/* ══════════════════════════════════════════════════════════════════════════════
   Arctic — Fasega GPS Theme
   A standalone, self-contained theme for the Fasega GPS tracking platform.
   Built on Bootstrap 3 / Laravel. No external CSS dependencies.

   !important count target: under 20 (icon font overrides + a handful of
   Bootstrap specificity battles that cannot be resolved any other way).
   ══════════════════════════════════════════════════════════════════════════════ */

@charset "UTF-8";

/* ══ GOOGLE FONTS ══ */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap");


:root {
  /* Background surfaces */
  --color-bg: #0A1020;
  --color-surface-1: #0F1730;
  --color-surface-2: #141E3F;
  --color-surface-3: #1A264F;
  /* Borders — blanco alpha (convención dark theme: bordes estructurales
     sutiles. Tintar bordes con primario hacía que TODO pareciera acentuado
     y se perdía la jerarquía visual). */
  --color-border-1: rgba(120, 170, 255, .08);
  --color-border-2: rgba(120, 170, 255, .18);
  --color-border-3: rgba(var(--color-primary-rgb), .35);
  /* Text — t2/t3 sólidos (no alpha) para contraste consistente
     independiente del bg detrás. Crema desaturada en pasos. */
  --color-text-1: #E0EAFF;
  --color-text-2: #8A93A6;
  --color-text-3: #4A5163;
  /* text-inv: texto sobre el color primario (dorado). Negro puro para
     máximo contraste sobre oro. */
  --color-text-inv: #000000;
  /* Brand / primary
     Para cambiar el color primario en TODA la app, modifica solo
     --color-primary-rgb (canales R,G,B) y --color-primary-dark.
     El resto se deriva automáticamente por rgba()/rgb() del canal. */
  --color-primary-rgb: 56, 189, 248;
  --color-primary-dark-rgb: 2, 132, 199;
  --color-primary: rgb(var(--color-primary-rgb));
  --color-primary-dark: rgb(var(--color-primary-dark-rgb));
  --color-primary-bg-soft: rgba(var(--color-primary-rgb), .05);
  --color-primary-bg: rgba(var(--color-primary-rgb), .10);
  --color-primary-tint: rgba(var(--color-primary-rgb), .12);
  --color-primary-tint-strong: rgba(var(--color-primary-rgb), .22);
  --color-primary-ring: rgba(var(--color-primary-rgb), .25);
  --color-primary-border: rgba(var(--color-primary-rgb), .28);
  --color-primary-shadow: rgba(var(--color-primary-rgb), .32);
  /* Semantic states */
  --color-success: #4ADE80;
  --color-success-bg: rgba(74, 222, 128, .10);
  --color-warning: #FBB724;
  --color-warning-bg: rgba(251, 183, 36, .10);
  --color-danger: #F87171;
  --color-danger-bg: rgba(248, 113, 113, .10);
  --color-purple: #A78BFA;
  --color-purple-bg: rgba(167, 139, 250, .10);
  /* Shadows — negro sólido con alpha fuerte para que se vea sobre fondos
     dark (las sombras de Arctic con base navy y alpha .04 eran invisibles
     sobre carbón). Dark themes necesitan sombras notorias para crear
     jerarquía de capas. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .25);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .40);
  /* Typography — DM Mono para dar carácter industrial/vintage al theme. */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  /* Inputs / selects / textareas — perilla central de TODOS los campos del Mapa
     Cambia estos tokens y se actualizan inputs, selects, textareas y bootstrap-select
     en cada modal y panel del Mapa de un solo saque. */
  --input-bg: var(--color-surface-2);
  --input-border: var(--color-border-2);
  --input-text: var(--color-text-1);
  --input-placeholder: var(--color-text-3);
  --input-radius: 8px;
  --input-height: 36px;
  --input-padding-x: 11px;
  --input-font-size: 12.5px;
  --input-focus-bg: var(--color-surface-1);
  --input-focus-border: var(--color-primary);
  --input-focus-ring: var(--color-primary-bg);
  --input-disabled-bg: var(--color-surface-3);
  --input-disabled-text: var(--color-text-3);
  /* Border radii */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 999px;
  /* Transitions */
  --transition-fast: all .12s ease;
  --transition-base: all .18s ease;
  /* Legacy aliases used by JavaScript and legacy templates */
  --fa-primary: var(--color-primary);
  --fa-primary-hover: var(--color-primary-dark);
  --fa-primary-active: var(--color-primary-dark);
  --fa-primary-border: var(--color-primary-dark);
  --fa-on-primary: var(--color-text-inv);
  --fa-bg-surface: var(--color-surface-1);
  /* Bloquear nav-sidebar.js: inyecta :root{--ui-radius:10px} sin !important.
     Con !important aquí ganamos independientemente del orden de carga. */
  --ui-radius: 0 !important;
  --ui-popup-radius: var(--radius-lg) !important;
}

/* ══ BASE RESET & TYPOGRAPHY ══ */

html,body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apply theme font to all elements, then carve out exceptions for icon fonts */

html *,body *,.admin-layout * {
  font-family: var(--font-sans);
  box-sizing: border-box;
}

/*
 * Restore icon font families — these MUST use !important because the wildcard
 * rule above has equal-or-higher specificity than a single class selector.
 * (3 !important uses — unavoidable for icon fonts)
 */

.glyphicon,[class^="glyphicon-"],[class*=" glyphicon-"] {
  font-family: 'Glyphicons Halflings' !important;
}

.fa,.far,[class^="fa-"],[class*=" fa-"] {
  font-family: 'FontAwesome' !important;
}

[class^="icon-"],[class*=" icon-"] {
  font-family: 'icomoon' !important;
}

/* ══ GLOBAL LINKS ══ */

a {
  color: var(--color-primary);
  transition: var(--transition-fast);
  text-decoration: none;
}

a:hover,a:focus {
  color: var(--color-primary-dark);
  text-decoration: underline;
  outline: none;
}

/* ══ TEXT SELECTION ══ */

::selection {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

::-moz-selection {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

/* ══ SCROLLBARS (WEBKIT) ══ */

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--color-primary-rgb), .2);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-primary-rgb), .4);
}

/* ══ CHECKBOX & RADIO ══ */

input[type="checkbox"],input[type="radio"] {
  accent-color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════════
   SWITCH GLOBAL — tema arctic
   Convierte en toggle switch SOLO los checkboxes dentro de .checkbox
   (patrón semántico de habilitar/deshabilitar).
   Excluye: dropdown-menu, tablas, filtros.
   ══════════════════════════════════════════════════════════════ */

/* Contenedor */

:root[data-theme="medianoche"] .checkbox,:root[data-theme="medianoche"] .checkboxes .checkbox,:root[data-theme="medianoche"] .form-group .checkbox {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 4px 0 !important;
  margin: 2px 0 !important;
  min-height: unset !important;
  overflow: visible !important;
}

/* Eliminar pseudoelementos legacy */

:root[data-theme="medianoche"] .checkbox::before,:root[data-theme="medianoche"] .checkbox::after {
  display: none !important;
  content: none !important;
}

/* INPUT = track + knob visual */

:root[data-theme="medianoche"] .checkbox input[type="checkbox"],:root[data-theme="medianoche"] .checkboxes .checkbox input[type="checkbox"],:root[data-theme="medianoche"] .form-group .checkbox input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: static !important;
  width: 38px !important;
  height: 21px !important;
  min-width: 38px !important;
  border-radius: 11px !important;
  opacity: 1 !important;
  cursor: pointer !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  border: none !important;
  outline: none !important;
  background: radial-gradient(circle 8.5px at 12px 50%, #fff 8px, transparent 9px),    #CBD5E1 !important;
  transition: background .22s ease !important;
  transform: none !important;
}

/* Checked: azul */

:root[data-theme="medianoche"] .checkbox input[type="checkbox"]:checked,:root[data-theme="medianoche"] .checkboxes .checkbox input[type="checkbox"]:checked,:root[data-theme="medianoche"] .form-group .checkbox input[type="checkbox"]:checked {
  background: radial-gradient(circle 8.5px at 26px 50%, #fff 8px, transparent 9px),    var(--color-primary) !important;
}

/* Label */

:root[data-theme="medianoche"] .checkbox label,:root[data-theme="medianoche"] .checkboxes .checkbox label,:root[data-theme="medianoche"] .form-group .checkbox label {
  padding-left: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  font-size: 12.5px !important;
  color: rgba(224,234,255,.58) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  flex: 1 !important;
}

:root[data-theme="medianoche"] .checkbox label::before,:root[data-theme="medianoche"] .checkbox label::after {
  display: none !important;
  content: none !important;
}

/* EXCEPCIÓN: dropdown-menu y tablas — checkbox normal */

:root[data-theme="medianoche"] .dropdown-menu .checkbox input[type="checkbox"],:root[data-theme="medianoche"] .table .checkbox input[type="checkbox"],:root[data-theme="medianoche"] td input[type="checkbox"],:root[data-theme="medianoche"] th input[type="checkbox"] {
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  background: none !important;
  border-radius: 3px !important;
  transform: none !important;
  transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ADMIN LAYOUT
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ══ ADMIN BODY ══ */

body.admin-layout {
  background: var(--color-bg);
  color: var(--color-text-2);
  font-family: var(--font-sans);
}

/* ══ ADMIN NAVBAR ══ */

.admin-layout .header {
  background: var(--color-primary);
  border: none;
  box-shadow: var(--shadow-md);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  height: 52px;
  min-height: 52px;
}

/*
 * Bootstrap's .navbar has background-color set as an inline-like rule via the
 * theme classes (e.g. .navbar-default). We need !important on exactly this one
 * rule to reliably override it regardless of load order.  (1 !important use)
 */

.admin-layout .header .navbar-main {
  background: var(--color-primary) !important;
  border: none;
  box-shadow: none;
  margin-bottom: 0;
  min-height: 52px;
  height: 52px;
}

.admin-layout .header .navbar-brand {
  color: var(--color-text-inv);
  font-weight: 800;
  font-size: 15px;
  line-height: 52px;
  height: 52px;
  padding-top: 0;
  padding-bottom: 0;
}

.admin-layout .header .navbar-brand:hover,.admin-layout .header .navbar-brand:focus {
  color: rgba(255, 255, 255, .85);
  background: transparent;
}

.admin-layout .header .navbar-nav > li > a {
  color: rgba(255, 255, 255, .85);
  line-height: 52px;
  height: 52px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
  font-weight: 500;
  transition: var(--transition-fast);
}

.admin-layout .header .navbar-nav > li > a:hover,.admin-layout .header .navbar-nav > li > a:focus {
  color: var(--color-text-inv);
  background: rgba(255, 255, 255, .10);
}

.admin-layout .header .navbar-nav > .open > a,.admin-layout .header .navbar-nav > .open > a:hover,.admin-layout .header .navbar-nav > .open > a:focus {
  background: rgba(255, 255, 255, .12);
  color: var(--color-text-inv);
}

.admin-layout .header .navbar-nav .dropdown-menu {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-top: 4px;
  padding: 6px;
}

.admin-layout .header .navbar-nav .dropdown-menu > li > a {
  color: var(--color-text-2);
  font-size: 12.5px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.admin-layout .header .navbar-nav .dropdown-menu > li > a:hover,.admin-layout .header .navbar-nav .dropdown-menu > li > a:focus {
  background: var(--color-surface-2);
  color: var(--color-primary);
}

.admin-layout .header .navbar-toggle {
  border-color: rgba(255, 255, 255, .3);
}

.admin-layout .header .navbar-toggle .icon-bar {
  background: var(--color-text-inv);
}

.admin-layout .header .navbar-text {
  color: rgba(255, 255, 255, .80);
}

/* ══ ADMIN CONTENT AREA ══ */

.admin-layout .content {
  padding-top: 68px;
  background: var(--color-bg);
  min-height: calc(100vh - 52px);
}

/* ══ ADMIN FOOTER ══ */

.admin-layout #footer {
  border-top: 1px solid var(--color-border-1);
  background: var(--color-surface-1);
  color: var(--color-text-3);
  font-size: 11px;
  padding: 10px 16px;
}

/* ══ ADMIN SIDEBAR ══ */

.admin-layout .sidebar {
  background: var(--color-surface-1);
  border-right: 1px solid var(--color-border-1);
  box-shadow: var(--shadow-xs);
}

.admin-layout .sidebar .nav > li > a {
  color: var(--color-text-2);
  font-size: 12.5px;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: var(--radius-md);
  margin: 1px 6px;
  transition: var(--transition-fast);
}

.admin-layout .sidebar .nav > li > a:hover,.admin-layout .sidebar .nav > li > a:focus {
  background: var(--color-surface-2);
  color: var(--color-text-1);
}

.admin-layout .sidebar .nav > li.active > a,.admin-layout .sidebar .nav > li.active > a:hover,.admin-layout .sidebar .nav > li.active > a:focus {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PANELS
   ═══════════════════════════════════════════════════════════════════════════════ */

.panel {
  background: var(--color-surface-1);
  /*
   * Bootstrap adds border-color via .panel-default and variant classes with
   * high specificity. One !important on border is enough to neutralise all of
   * them without needing to repeat it on each variant.  (1 !important use)
   */
  border: 1px solid var(--color-border-1) !important;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}

.panel-default {
  border-color: var(--color-border-1);
}

.panel-default > .panel-heading {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border-1);
}

.panel-heading {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border-1);
  /*
   * Bootstrap's .panel > .panel-heading selector injects border-radius: 0 on
   * inner edges. We must use !important here because Bootstrap pins it with
   * a compound selector that beats ours without it.  (2 !important uses)
   */
  border-top-left-radius: var(--radius-xl) !important;
  border-top-right-radius: var(--radius-xl) !important;
  padding: 12px 16px;
}

.panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-1);
  margin: 0;
}

.panel-title > a,.panel-title > a:hover,.panel-title > a:focus {
  color: var(--color-text-1);
  text-decoration: none;
}

.panel-body {
  padding: 16px;
  color: var(--color-text-2);
}

.panel-footer {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border-1);
  /* Same Bootstrap compound-selector issue as .panel-heading  (2 !important uses) */
  border-bottom-left-radius: var(--radius-xl) !important;
  border-bottom-right-radius: var(--radius-xl) !important;
  padding: 10px 16px;
  color: var(--color-text-3);
}

/* Panel colour variants */

.panel-primary > .panel-heading {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inv);
}

.panel-primary > .panel-heading .panel-title {
  color: var(--color-text-inv);
}

.panel-success > .panel-heading {
  background: var(--color-success-bg);
  border-color: rgba(21, 128, 61, .2);
  color: var(--color-success);
}

.panel-danger > .panel-heading {
  background: var(--color-danger-bg);
  border-color: rgba(220, 38, 38, .2);
  color: var(--color-danger);
}

.panel-warning > .panel-heading {
  background: var(--color-warning-bg);
  border-color: rgba(180, 83, 9, .2);
  color: var(--color-warning);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════════════════ */

.table,.table-list {
  background: var(--color-surface-1);
  color: var(--color-text-2);
  margin-bottom: 0;
  width: 100%;
  border-collapse: collapse;
}

/* Remove Bootstrap's border-radius conflicts on tables inside panels */

.panel > .table:first-child,.panel > .table-responsive:first-child > .table:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.panel > .table:first-child > thead:first-child > tr:first-child td,.panel > .table:first-child > thead:first-child > tr:first-child th,.panel > .table:first-child > tbody:first-child > tr:first-child td,.panel > .table:first-child > tbody:first-child > tr:first-child th {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.table > thead > tr > th,.table-list > thead > tr > th {
  background: var(--color-surface-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-3);
  /*
   * Bootstrap's .table > thead > tr > th has border-bottom with the same
   * specificity, so one !important is needed to reliably apply our design.
   * (1 !important use)
   */
  border-bottom: 2px solid var(--color-border-2) !important;
  border-top: none;
  padding: 10px 14px;
  vertical-align: middle;
  white-space: nowrap;
}

.table > tbody > tr,.table-list > tbody > tr {
  border-bottom: 1px solid var(--color-border-1);
  transition: var(--transition-fast);
}

.table > tbody > tr > td,.table-list > tbody > tr > td {
  font-size: 12px;
  color: var(--color-text-2);
  padding: 11px 14px;
  vertical-align: middle;
  border-top: none;
  border-bottom: 1px solid var(--color-border-1);
}

.table-hover > tbody > tr:hover > td,.table-hover > tbody > tr:hover > th {
  background: var(--color-surface-2);
  color: var(--color-text-1);
}

.table-condensed > thead > tr > th,.table-condensed > tbody > tr > td {
  padding: 6px 10px;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: var(--color-surface-2);
}

.table-bordered {
  border: 1px solid var(--color-border-1);
}

.table-bordered > thead > tr > th,.table-bordered > tbody > tr > td {
  border: 1px solid var(--color-border-1);
}

.table-responsive {
  border: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════════ */

.btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  line-height: 1.4;
  padding: 0 14px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  user-select: none;
}

.btn:focus,.btn:active:focus,.btn.active:focus {
  outline: 2px solid var(--color-primary-ring);
  outline-offset: 2px;
  box-shadow: none;
}

/* Primary */

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inv);
  border: none;
  box-shadow: 0 2px 8px var(--color-primary-ring);
}

.btn-primary:hover,.btn-primary:focus {
  background: var(--color-primary-dark);
  color: var(--color-text-inv);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--color-primary-ring);
}

.btn-primary:active,.btn-primary.active {
  background: var(--color-primary-dark);
  transform: translateY(0);
  box-shadow: none;
  color: var(--color-text-inv);
}

/* Default */

.btn-default {
  background: var(--color-surface-2);
  color: var(--color-text-2);
  border: 1.5px solid var(--color-border-2);
}

.btn-default:hover,.btn-default:focus {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-default:active,.btn-default.active {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Danger */

.btn-danger {
  background: var(--color-danger);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(220, 38, 38, .25);
}

.btn-danger:hover,.btn-danger:focus {
  background: var(--color-danger);
  color: #fff;
  opacity: .90;
}

.btn-danger:active {
  opacity: 1;
  color: #fff;
}

/* Success */

.btn-success {
  background: var(--color-success);
  color: #fff;
  border: none;
}

.btn-success:hover,.btn-success:focus {
  background: #126a32;
  color: #fff;
}

/* Info */

.btn-info {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border: 1.5px solid var(--color-border-2);
}

.btn-info:hover,.btn-info:focus {
  background: var(--color-surface-3);
  color: var(--color-primary-dark);
}

/* Warning */

.btn-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1.5px solid rgba(180, 83, 9, .25);
}

.btn-warning:hover,.btn-warning:focus {
  background: rgba(180, 83, 9, .18);
  color: var(--color-warning);
}

/* Link */

.btn-link {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--color-primary);
  padding: 0 4px;
  height: auto;
  font-weight: 500;
}

.btn-link:hover,.btn-link:focus {
  color: var(--color-primary-dark);
  background: transparent;
  text-decoration: underline;
}

/* Sizes */

.btn-sm,.btn-xs {
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  font-size: 11.5px;
}

.btn-lg {
  height: 40px;
  padding: 0 20px;
  border-radius: var(--radius-lg);
  font-size: 14px;
}

/* Button groups */

.btn-group .btn,.input-group-btn .btn {
  border-radius: var(--radius-md);
}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn:last-child:not(:first-child),.btn-group > .dropdown-toggle:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FORMS — Estética global arctic: fondo #141E3F, borde azul sutil, focus azul
   Aplica a ABSOLUTAMENTE todos los inputs, selects y textareas del tema arctic.
   ═══════════════════════════════════════════════════════════════════════════════ */

.form-control {
  height: var(--input-height);
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: var(--input-radius);
  font-size: var(--input-font-size);
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--input-text);
  padding: 0 var(--input-padding-x);
  transition: border-color .15s, box-shadow .15s;
  box-shadow: none;
  outline: none;
}

.form-control:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
  outline: none;
  background: var(--input-focus-bg);
}

.form-control::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

select.form-control {
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A90BC' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

textarea.form-control {
  height: auto;
  min-height: 80px;
  padding: 10px var(--input-padding-x);
  resize: vertical;
  line-height: 1.5;
}

/* ── Regla !important para tema arctic: garantiza consistencia en TODA la app ── */

:root[data-theme="medianoche"] .form-control,:root[data-theme="medianoche"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="color"]):not([type="range"]),:root[data-theme="medianoche"] select,:root[data-theme="medianoche"] textarea {
  background: var(--input-bg) !important;
  border: 1.5px solid var(--input-border) !important;
  border-radius: var(--input-radius) !important;
  color: var(--input-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: var(--input-font-size) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}

:root[data-theme="medianoche"] .form-control:focus,:root[data-theme="medianoche"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="color"]):not([type="range"]):focus,:root[data-theme="medianoche"] select:focus,:root[data-theme="medianoche"] textarea:focus {
  border-color: var(--input-focus-border) !important;
  background: var(--input-focus-bg) !important;
  box-shadow: 0 0 0 3px var(--input-focus-ring) !important;
  outline: none !important;
}

:root[data-theme="medianoche"] .form-control::placeholder,:root[data-theme="medianoche"] input::placeholder,:root[data-theme="medianoche"] textarea::placeholder {
  color: var(--input-placeholder) !important;
  opacity: 1 !important;
}

:root[data-theme="medianoche"] .form-control[disabled],:root[data-theme="medianoche"] input[disabled],:root[data-theme="medianoche"] select[disabled],:root[data-theme="medianoche"] textarea[disabled],:root[data-theme="medianoche"] .form-control[readonly],:root[data-theme="medianoche"] input[readonly] {
  background: var(--input-disabled-bg) !important;
  color: var(--input-disabled-text) !important;
  cursor: not-allowed !important;
}

:root[data-theme="medianoche"] select,:root[data-theme="medianoche"] select.form-control {
  padding-right: 28px !important;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A90BC' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* <input type="color"> — el preview se mantiene pero enmarcado con el look Arctic */

:root[data-theme="medianoche"] input[type="color"] {
  height: var(--input-height) !important;
  background: var(--input-bg) !important;
  border: 1.5px solid var(--input-border) !important;
  border-radius: var(--input-radius) !important;
  padding: 4px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}

:root[data-theme="medianoche"] input[type="color"]:focus {
  border-color: var(--input-focus-border) !important;
  box-shadow: 0 0 0 3px var(--input-focus-ring) !important;
}

:root[data-theme="medianoche"] input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0 !important;
  border-radius: 5px !important;
}

:root[data-theme="medianoche"] input[type="color"]::-webkit-color-swatch {
  border: 1px solid var(--input-border) !important;
  border-radius: 5px !important;
}

:root[data-theme="medianoche"] input[type="color"]::-moz-color-swatch {
  border: 1px solid var(--input-border) !important;
  border-radius: 5px !important;
}

/* Refuerzo final para .bootstrap-select — gana cualquier override gris de facelift */

:root[data-theme="medianoche"] .bootstrap-select .btn.dropdown-toggle,:root[data-theme="medianoche"] .bootstrap-select button.dropdown-toggle,:root[data-theme="medianoche"] button.bootstrap-select-dropdown-toggle,:root[data-theme="medianoche"] .form-group .bootstrap-select > .btn,:root[data-theme="medianoche"] .form-group .bootstrap-select.btn-group > .btn,:root[data-theme="medianoche"] .modal .bootstrap-select > .btn,:root[data-theme="medianoche"] .modal .bootstrap-select.btn-group > .btn,:root[data-theme="medianoche"] .panel .bootstrap-select > .btn,:root[data-theme="medianoche"] .tab-pane .bootstrap-select > .btn {
  background: var(--input-bg) !important;
  background-color: var(--input-bg) !important;
  background-image: none !important;
  border: 1.5px solid var(--input-border) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
  border-radius: var(--input-radius) !important;
  box-shadow: none !important;
}

:root[data-theme="medianoche"] .bootstrap-select.open .btn.dropdown-toggle,:root[data-theme="medianoche"] .bootstrap-select .btn.dropdown-toggle:hover,:root[data-theme="medianoche"] .bootstrap-select .btn.dropdown-toggle:focus,:root[data-theme="medianoche"] .form-group .bootstrap-select > .btn:hover,:root[data-theme="medianoche"] .form-group .bootstrap-select > .btn:focus,:root[data-theme="medianoche"] .modal .bootstrap-select > .btn:hover,:root[data-theme="medianoche"] .modal .bootstrap-select > .btn:focus,:root[data-theme="medianoche"] .panel .bootstrap-select > .btn:hover,:root[data-theme="medianoche"] .panel .bootstrap-select > .btn:focus {
  background: var(--input-focus-bg) !important;
  background-color: var(--input-focus-bg) !important;
  background-image: none !important;
  border-color: var(--input-focus-border) !important;
  color: var(--input-text) !important;
  box-shadow: 0 0 0 3px var(--input-focus-ring) !important;
}

.form-group label,label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-2);
  margin-bottom: 5px;
  display: inline-block;
}

.help-block {
  font-size: 11px;
  color: var(--color-text-3);
  margin-top: 4px;
  margin-bottom: 0;
}

/* Validation states */

.has-error .form-control {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .15);
}

.has-error .form-control:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .25);
}

.has-error label,.has-error .control-label {
  color: var(--color-danger);
}

.has-error .help-block {
  color: var(--color-danger);
}

.has-success .form-control {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(21, 128, 61, .15);
}

.has-success .form-control:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(21, 128, 61, .20);
}

/* Input groups */

.input-group .form-control {
  height: var(--input-height);
}

.input-group-addon {
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  color: var(--input-placeholder);
  font-size: 13px;
  padding: 0 10px;
  border-radius: var(--input-radius);
}

.input-group > .form-control:first-child,.input-group-addon:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .form-control:last-child,.input-group-addon:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group .form-control:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* Forward form — input-group con switch + IP + TCP/UDP en tema arctic */

:root[data-theme="medianoche"] .checkbox.input-group-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 6px 0 0 !important;
}

/* TCP/UDP radio buttons (div.input-group-addon) — quitar contenedor */

:root[data-theme="medianoche"] div.input-group-addon {
  background: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(56,189,248,.12) !important;
  box-shadow: none !important;
  padding: 0 0 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

:root[data-theme="medianoche"] div.input-group-addon .checkbox-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  color: #E0EAFF !important;
  font-weight: 600 !important;
}

:root[data-theme="medianoche"] div.input-group-addon input[type="radio"] {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  accent-color: var(--color-primary) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] div.input-group-addon label {
  margin: 0 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #E0EAFF !important;
  cursor: pointer !important;
}

/* Checkbox / radio layout */

.checkbox label,.radio label {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-2);
  padding-left: 22px;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════════════════ */

.modal-content {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-header {
  background: var(--color-primary);
  border-bottom: none;
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  color: var(--color-text-inv);
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}

.modal-body {
  padding: 20px;
  color: var(--color-text-2);
}

.modal-footer {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border-1);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.modal-backdrop.in {
  opacity: .45;
}

.modal-dialog {
  margin-top: 60px;
}

.close {
  color: var(--color-text-inv);
  opacity: .7;
  text-shadow: none;
  font-size: 20px;
  font-weight: 400;
  float: right;
  line-height: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.close:hover,.close:focus {
  color: var(--color-text-inv);
  opacity: 1;
  outline: none;
}

/* Close button in non-primary contexts */

.modal-body .close,.alert .close {
  color: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BADGES AND LABELS
   ═══════════════════════════════════════════════════════════════════════════════ */

.badge {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border: 1px solid rgba(var(--color-primary-rgb), .20);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  display: inline-block;
  line-height: 1.4;
  vertical-align: baseline;
  white-space: nowrap;
}

.label {
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  display: inline;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
}

.label-default {
  background: var(--color-surface-2);
  color: var(--color-text-2);
  border: 1px solid var(--color-border-2);
}

.label-primary {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border: 1px solid rgba(var(--color-primary-rgb), .20);
}

.label-success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid rgba(21, 128, 61, .20);
}

.label-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid rgba(220, 38, 38, .20);
}

.label-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid rgba(180, 83, 9, .20);
}

.label-info {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border: 1px solid rgba(var(--color-primary-rgb), .20);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════════════════════════ */

.alert {
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

.alert-success {
  background: var(--color-success-bg);
  border-color: rgba(21, 128, 61, .2);
  color: var(--color-success);
}

.alert-danger,.alert-error {
  background: var(--color-danger-bg);
  border-color: rgba(220, 38, 38, .2);
  color: var(--color-danger);
}

.alert-warning {
  background: var(--color-warning-bg);
  border-color: rgba(180, 83, 9, .2);
  color: var(--color-warning);
}

.alert-info {
  background: var(--color-primary-bg);
  border-color: rgba(var(--color-primary-rgb), .2);
  color: var(--color-primary);
}

.alert .close {
  margin-left: auto;
  font-size: 16px;
  opacity: .5;
}

.alert .close:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════════════════════ */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.pagination > li > a,.pagination > li > span {
  color: var(--color-primary);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-2);
  /*
   * Bootstrap applies border-radius to the first/last pagination items via
   * compound selectors; overriding per-item requires !important here.
   * (1 !important use)
   */
  border-radius: var(--radius-md) !important;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  min-width: 32px;
  text-align: center;
  line-height: 1.6;
  transition: var(--transition-fast);
  display: inline-block;
  text-decoration: none;
}

.pagination > li > a:hover,.pagination > li > span:hover {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border-color: var(--color-border-2);
  text-decoration: none;
}

.pagination > .active > a,.pagination > .active > span,.pagination > .active > a:hover,.pagination > .active > span:hover,.pagination > .active > a:focus,.pagination > .active > span:focus {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inv);
}

.pagination > .disabled > a,.pagination > .disabled > span {
  color: var(--color-text-3);
  background: var(--color-surface-2);
  border-color: var(--color-border-1);
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DROPDOWNS
   ═══════════════════════════════════════════════════════════════════════════════ */

.dropdown-menu {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 6px;
  min-width: 160px;
  z-index: 1050;
}

.dropdown-menu > li > a {
  color: var(--color-text-2);
  font-size: 12.5px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  display: block;
  text-decoration: none;
  clear: both;
  white-space: nowrap;
}

.dropdown-menu > li > a:hover,.dropdown-menu > li > a:focus {
  background: var(--color-surface-2);
  color: var(--color-primary);
  text-decoration: none;
}

.dropdown-menu > .active > a,.dropdown-menu > .active > a:hover,.dropdown-menu > .active > a:focus {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.dropdown-menu > li.divider,.dropdown-menu .divider {
  height: 1px;
  background: var(--color-border-1);
  margin: 5px 0;
  overflow: hidden;
  padding: 0;
}

.dropdown-menu > .dropdown-header {
  color: var(--color-text-3);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  padding: 6px 14px 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NAV TABS
   ═══════════════════════════════════════════════════════════════════════════════ */

.nav-tabs {
  border-bottom: 1px solid var(--color-border-1);
  margin-bottom: 0;
}

.nav-tabs > li > a {
  color: var(--color-text-3);
  font-size: 12.5px;
  font-weight: 600;
  border: none;
  border-bottom: 2.5px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  padding: 9px 14px;
  background: transparent;
  transition: var(--transition-fast);
}

.nav-tabs > li > a:hover,.nav-tabs > li > a:focus {
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--color-border-2);
  color: var(--color-text-2);
}

.nav-tabs > li.active > a,.nav-tabs > li.active > a:hover,.nav-tabs > li.active > a:focus {
  color: var(--color-primary);
  background: transparent;
  border: none;
  border-bottom: 2.5px solid var(--color-primary);
  cursor: default;
}

.tab-content {
  padding-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NAV PILLS
   ═══════════════════════════════════════════════════════════════════════════════ */

.nav-pills > li > a {
  color: var(--color-text-2);
  font-size: 12.5px;
  font-weight: 500;
  border-radius: var(--radius-md);
  padding: 7px 14px;
  transition: var(--transition-fast);
}

.nav-pills > li > a:hover {
  background: var(--color-surface-2);
  color: var(--color-text-1);
}

.nav-pills > li.active > a,.nav-pills > li.active > a:hover,.nav-pills > li.active > a:focus {
  background: var(--color-primary);
  color: var(--color-text-inv);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BREADCRUMB
   ═══════════════════════════════════════════════════════════════════════════════ */

.breadcrumb {
  background: transparent;
  padding: 6px 0;
  margin-bottom: 12px;
  font-size: 12px;
}

.breadcrumb > li {
  color: var(--color-text-3);
}

.breadcrumb > li + li::before {
  color: var(--color-text-3);
}

.breadcrumb > li > a {
  color: var(--color-primary);
}

.breadcrumb > .active {
  color: var(--color-text-2);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   WELL
   ═══════════════════════════════════════════════════════════════════════════════ */

.well {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LIST GROUPS
   ═══════════════════════════════════════════════════════════════════════════════ */

.list-group {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.list-group-item {
  background: var(--color-surface-1);
  border-color: var(--color-border-1);
  color: var(--color-text-2);
  font-size: 13px;
  padding: 10px 14px;
  transition: var(--transition-fast);
}

.list-group-item:first-child {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.list-group-item:last-child {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

a.list-group-item:hover,a.list-group-item:focus {
  background: var(--color-surface-2);
  color: var(--color-text-1);
}

.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inv);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PROGRESS BARS
   ═══════════════════════════════════════════════════════════════════════════════ */

.progress {
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  box-shadow: none;
  height: 8px;
  margin-bottom: 10px;
}

.progress-bar {
  background: var(--color-primary);
  border-radius: var(--radius-full);
  box-shadow: none;
  line-height: 8px;
  font-size: 9px;
}

.progress-bar-success {
  background: var(--color-success);
}

.progress-bar-warning {
  background: var(--color-warning);
}

.progress-bar-danger {
  background: var(--color-danger);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TOOLTIP & POPOVER
   ═══════════════════════════════════════════════════════════════════════════════ */

.tooltip-inner {
  background: var(--color-text-1);
  border-radius: var(--radius-md);
  font-size: 11.5px;
  font-family: var(--font-sans);
  padding: 5px 10px;
  color: var(--color-text-inv);
  max-width: 240px;
}

.tooltip.top    .tooltip-arrow {
  border-top-color: var(--color-text-1);
}

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: var(--color-text-1);
}

.tooltip.left   .tooltip-arrow {
  border-left-color: var(--color-text-1);
}

.tooltip.right  .tooltip-arrow {
  border-right-color: var(--color-text-1);
}

.popover {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-family: var(--font-sans);
}

.popover-title {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border-1);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  color: var(--color-text-1);
  font-size: 12.5px;
  font-weight: 700;
  padding: 10px 14px;
}

.popover-content {
  color: var(--color-text-2);
  padding: 12px 14px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HEADINGS AND TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════════ */

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: var(--font-sans);
  color: var(--color-text-1);
  font-weight: 700;
  line-height: 1.3;
}

h1,.h1 {
  font-size: 24px;
}

h2,.h2 {
  font-size: 20px;
}

h3,.h3 {
  font-size: 17px;
}

h4,.h4 {
  font-size: 15px;
}

h5,.h5 {
  font-size: 13px;
}

h6,.h6 {
  font-size: 12px;
}

small,.small {
  font-size: 11px;
  color: var(--color-text-3);
}

.text-muted {
  color: var(--color-text-3);
}

.text-primary {
  color: var(--color-primary);
}

.text-success {
  color: var(--color-success);
}

.text-danger {
  color: var(--color-danger);
}

.text-warning {
  color: var(--color-warning);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FRONTEND MAP LAYOUT — TOPBAR
   ═══════════════════════════════════════════════════════════════════════════════ */

body:not(.admin-layout) #header {
  background: var(--color-primary);
  height: 48px;
  min-height: 48px;
  box-shadow: var(--shadow-sm);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
}

body:not(.admin-layout) #header .navbar {
  background: var(--color-primary);
  border: none;
  box-shadow: none;
  min-height: 48px;
  margin-bottom: 0;
  width: 100%;
}

body:not(.admin-layout) #header .navbar-brand {
  color: var(--color-text-inv);
  font-weight: 800;
  font-size: 15px;
  line-height: 48px;
  height: 48px;
  padding-top: 0;
  padding-bottom: 0;
}

body:not(.admin-layout) #header .navbar-brand:hover {
  color: rgba(255, 255, 255, .85);
  background: transparent;
}

body:not(.admin-layout) #header .navbar-nav > li > a {
  color: rgba(255, 255, 255, .85);
  line-height: 48px;
  height: 48px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 13px;
  font-weight: 500;
}

body:not(.admin-layout) #header .navbar-nav > li > a:hover {
  color: var(--color-text-inv);
  background: rgba(255, 255, 255, .10);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FRONTEND MAP LAYOUT — LEFT ICON NAV
   ═══════════════════════════════════════════════════════════════════════════════ */

#nav-icons {
  background: var(--color-primary-dark);
  width: 48px;
  min-width: 48px;
  position: fixed;
  top: 48px;
  left: 0;
  bottom: 0;
  z-index: 1020;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 2px 0 8px rgba(0, 0, 0, .10);
  overflow: hidden;
  overflow-y: auto;
}

#nav-icons .nav-icon,#nav-icons a,#nav-icons button,#nav-icons li > a {
  color: rgba(255, 255, 255, .65);
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  transition: var(--transition-fast);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

#nav-icons .nav-icon:hover,#nav-icons a:hover,#nav-icons button:hover,#nav-icons li > a:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--color-text-inv);
  text-decoration: none;
}

#nav-icons .nav-icon.active,#nav-icons .nav-icon.selected,#nav-icons a.active,#nav-icons li.active > a {
  color: var(--color-text-inv);
  background: rgba(255, 255, 255, .15);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FRONTEND MAP LAYOUT — LEFT SLIDING PANEL
   ═══════════════════════════════════════════════════════════════════════════════ */

#nav-panel {
  background: var(--color-surface-1);
  border-right: 1px solid var(--color-border-1);
  box-shadow: var(--shadow-sm);
  position: fixed;
  top: 48px;
  left: 48px;
  bottom: 0;
  z-index: 1010;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.nav-panel-header {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border-1);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-3);
  padding: 10px 14px;
  flex-shrink: 0;
}

.nav-panel-section {
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-border-1);
}

.nav-panel-body {
  flex: 0 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.nav-panel-link,#nav-panel .list-group-item,#nav-panel a {
  color: var(--color-text-2);
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.nav-panel-link:hover,#nav-panel .list-group-item:hover,#nav-panel a:hover {
  background: var(--color-surface-2);
  color: var(--color-text-1);
  text-decoration: none;
}

.nav-panel-link.active,#nav-panel .list-group-item.active {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FRONTEND MAP LAYOUT — BOTTOM WIDGETS BAR
   ═══════════════════════════════════════════════════════════════════════════════ */

#widgetsbar {
  background: var(--color-surface-1);
  border-top: 1px solid var(--color-border-1);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
}

.widget {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  flex-shrink: 0;
}

.widget-heading {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border-1);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.widget-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-1);
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-body {
  padding: 10px 12px;
  color: var(--color-text-2);
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   OBJECT / DEVICE LIST ITEMS
   ═══════════════════════════════════════════════════════════════════════════════ */

.device-item,.object-item,#object-list .list-group-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-1);
  border-left: 3px solid transparent;
  transition: var(--transition-fast);
  cursor: pointer;
  background: var(--color-surface-1);
}

.device-item:hover,.object-item:hover,#object-list .list-group-item:hover {
  background: var(--color-surface-2);
}

.device-item.active,.device-item.selected,.object-item.active,.object-item.selected,#object-list .list-group-item.active,#object-list .list-group-item.selected {
  background: var(--color-primary-bg);
  border-left-color: var(--color-primary);
  color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MISC / UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */

blockquote {
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-bg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--color-text-2);
}

code {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 5px;
}

pre {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-1);
  border-radius: var(--radius-lg);
  color: var(--color-text-1);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 14px 16px;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border-1);
  margin: 16px 0;
}

.container-fluid {
  padding-left: 20px;
  padding-right: 20px;
}

/* Bootstrap row / column gutter preservation */

.row {
  margin-left: -10px;
  margin-right: -10px;
}

[class^="col-"],[class*=" col-"] {
  padding-left: 10px;
  padding-right: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .admin-layout .content {
    padding-top: 60px;
  }

  .modal-dialog {
    margin: 10px;
  }

  .modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .modal-footer .btn {
    width: 100%;
  }

  .pagination > li > a,  .pagination > li > span {
    padding: 5px 8px;
    min-width: 28px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  h1,  .h1 {
    font-size: 20px;
  }

  h2,  .h2 {
    font-size: 17px;
  }

  h3,  .h3 {
    font-size: 15px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ARCTIC OVERRIDE LAYER
   nav-sidebar.css usa !important en todo. Este bloque carga al final y
   restaura los valores Arctic donde nav-sidebar.css los pisa incorrectamente.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Panel headings → fondo claro, texto oscuro ── */

.panel-heading,.panel-default > .panel-heading,#panel-devices .sidebar-content .panel-heading {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text-1) !important;
  border-bottom: 1px solid var(--color-border-1) !important;
}

.panel-heading *,.panel-heading .panel-title {
  color: var(--color-text-1) !important;
}

/* Panel variantes de color mantienen su color */

.panel-primary > .panel-heading {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

.panel-primary > .panel-heading * {
  color: #fff !important;
}

.panel-danger  > .panel-heading {
  background-color: var(--color-danger-bg) !important;
  color: var(--color-danger) !important;
}

.panel-success > .panel-heading {
  background-color: var(--color-success-bg) !important;
  color: var(--color-success) !important;
}

.panel-warning > .panel-heading {
  background-color: var(--color-warning-bg) !important;
  color: var(--color-warning) !important;
}

/* ── Widget headings (bottombar) → fondo primario + texto sobre primary ── */

#widgets .widget-heading,#widgets .widget > .widget-heading,#widgetsbar #widgets .widget-heading {
  background-color: var(--color-primary) !important;
  color: var(--color-text-inv) !important;
}

:root[data-theme="medianoche"] #widgets .widget-heading,:root[data-theme="medianoche"] #widgets .widget > .widget-heading,:root[data-theme="medianoche"] #widgetsbar #widgets .widget-heading {
  background-color: var(--color-primary) !important;
  color: #0A1020 !important;
}

:root[data-theme="medianoche"] #widgets .widget-heading *,:root[data-theme="medianoche"] #widgets .widget > .widget-heading *,:root[data-theme="medianoche"] #widgetsbar #widgets .widget-heading * {
  color: #0A1020 !important;
}

:root[data-theme="medianoche"] #widgets .widget {
  background: var(--s1) !important;
  border: 1px solid var(--b2) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}

:root[data-theme="medianoche"] #widgets .widget-body {
  background: var(--s1) !important;
  color: var(--t1) !important;
}

:root[data-theme="medianoche"] #widgets .widget-body * {
  color: inherit;
}

/* ── Table heads → fondo claro, texto muted ── */

.table > thead > tr,.table.table-list > thead > tr,table.table > thead > tr {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text-3) !important;
}

.table > thead > tr > th,.table > thead > tr > td,.table.table-list > thead > tr > th,table.table > thead > tr > th {
  color: var(--color-text-3) !important;
  font-weight: 700 !important;
  border-bottom-color: var(--color-border-2) !important;
}

/* ── Table row hover → fondo claro, no azul sólido ── */

.table-hover > tbody > tr:hover,.table.table-list > tbody > tr:hover {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text-1) !important;
}

.table-hover > tbody > tr:hover > td,.table-hover > tbody > tr:hover > th,.table.table-list > tbody > tr:hover > td {
  color: var(--color-text-1) !important;
}

/* ── Dropdown hover → sí usa primary ── */

.dropdown-menu > li > a:hover:not(.btn),.dropdown-menu > li > a:focus:not(.btn) {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

.dropdown-menu > li > a:hover:not(.btn) *,.dropdown-menu > li > a:focus:not(.btn) * {
  color: #fff !important;
}

/* ── Group list hover → primary ── */

#panel-devices .group-list > li:hover,.group-heading {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

.group-heading * {
  color: #fff !important;
}

/* ── Headings h1-h5 → color texto, no azul primario ── */

h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5,.card-title,.page-title,.section-title {
  color: var(--color-text-1) !important;
}

/* Títulos dentro de panel-heading sí van blancos si es panel-primary */

.panel-primary > .panel-heading h1,.panel-primary > .panel-heading h2,.panel-primary > .panel-heading h3,.panel-primary > .panel-heading .panel-title {
  color: #fff !important;
}

/* ── Modal header → primario (correcto para Arctic) ── */

.modal-header {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
}

.modal-header *,.modal-title {
  color: #fff !important;
}

.modal-body {
  background-color: var(--color-surface-1) !important;
  color: var(--color-text-2) !important;
}

.modal-footer {
  background-color: var(--color-surface-2) !important;
}

/* ── nav-panel header → primario (correcto) ── */

.nav-panel-header {
  background: var(--color-primary) !important;
  color: #fff !important;
}

.nav-panel-header * {
  color: #fff !important;
}

/* ── Panel-title standalone (fuera de panel-heading) → primario ── */

:not(.panel-heading):not(.widget-heading) > .panel-title {
  color: var(--color-primary) !important;
}

/* ── Pagination hover → primario ── */

.pagination > li > a:hover:not(.btn),.pagination > li > span:hover {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

.pagination > .active > a,.pagination > .active > span {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

/* ── Nav tabs hover → primario ── */

.nav-tabs > li > a:hover:not(.btn) {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
}

.nav-tabs > li.active > a,.nav-tabs > li.active > a:focus,.nav-tabs > li.active > a:hover {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
  background: transparent !important;
}

/* ── List group hover → primario ── */

.list-group-item:hover {
  background-color: var(--color-surface-2) !important;
  color: var(--color-text-1) !important;
}

/* ── Textos muted → color correcto ── */

.text-muted,small,.help-block {
  color: var(--color-text-3) !important;
}

.modal-body .text-muted,.modal-body label,.modal-body small,.control-label,label {
  color: var(--color-text-2) !important;
}

.modal-body,.modal-content,.panel-body,.tab-content {
  color: var(--color-text-2) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ARCTIC MAP — Implementación idéntica al prototipo mapa-completo.html
   Variables del prototipo:
   --primary:var(--color-primary)  --t1:#E0EAFF  --topbar-h:44px  --iconbar-w:72px  --panel-w:360px
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. MODULE BAR (#fdb-tabs) — barra superior completa estilo prototipo
   ───────────────────────────────────────────────────────────────────────────── */

:root[data-theme="medianoche"] #fdb-tabs {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: auto !important;
  height: 44px !important;
  border-radius: 0 !important;
  padding: 0 10px !important;
  gap: 2px !important;
  background: #0F1730 !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.3) !important;
  backdrop-filter: none !important;
  z-index: 10100 !important;
  display: flex !important;
  align-items: center !important;
}

/* Logo del module bar */

:root[data-theme="medianoche"] .mb-logo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-right: 14px !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  margin-right: 6px !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] .mb-mark {
  display: none !important;
}

:root[data-theme="medianoche"] .mb-name {
  display: none !important;
}

/* Brand igual al admin (.aa-brand) */

:root[data-theme="medianoche"] .mb-brand {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1 !important;
  gap: 3px !important;
}

:root[data-theme="medianoche"] .mb-brand-name {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.01em !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  white-space: nowrap !important;
}

:root[data-theme="medianoche"] .mb-brand-tag {
  font-size: 9px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.4) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  font-family: 'Space Grotesk', monospace !important;
  white-space: nowrap !important;
}

/* Tabs del module bar */

:root[data-theme="medianoche"] .fdb-tab-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 44px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.5) !important;
  cursor: pointer !important;
  border-bottom: 2.5px solid transparent !important;
  border-top: 2.5px solid transparent !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  transition: color .15s, background .15s !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  line-height: 1 !important;
}

:root[data-theme="medianoche"] .fdb-tab-btn:hover {
  color: rgba(255,255,255,.85) !important;
  background: rgba(120,170,255,.06) !important;
  box-shadow: none !important;
}

:root[data-theme="medianoche"] .fdb-tab-btn.fdb-tab-active {
  color: #fff !important;
  border-bottom-color: var(--color-primary) !important;
  background: var(--color-primary-tint) !important;
  box-shadow: none !important;
}

:root[data-theme="medianoche"] .fdb-tab-btn svg {
  width: 14px !important;
  height: 14px !important;
  opacity: .7 !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] .fdb-tab-btn.fdb-tab-active svg {
  opacity: 1 !important;
}

/* Parte derecha del module bar (usuario) */

:root[data-theme="medianoche"] .mb-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] .mb-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: rgba(120,170,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,.6);
  transition: all .15s;
  position: relative;
}

:root[data-theme="medianoche"] .mb-icon-btn:hover {
  background: rgba(120,170,255,.14);
  color: #fff;
}

:root[data-theme="medianoche"] .mb-icon-btn svg {
  width: 14px;
  height: 14px;
}

/* Toggle de cinemática del mapa (topbar) */

:root[data-theme="medianoche"] .mb-cinematic-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 30px !important;
  padding: 0 11px !important;
  border-radius: 7px !important;
  background: rgba(120,170,255,.08) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.6) !important;
  font: 600 11px 'Plus Jakarta Sans', sans-serif !important;
  cursor: pointer !important;
  transition: all .15s !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}

:root[data-theme="medianoche"] .mb-cinematic-toggle:hover {
  background: rgba(120,170,255,.14) !important;
  color: #fff !important;
}

:root[data-theme="medianoche"] .mb-cinematic-toggle.on {
  background: rgba(34,197,94,.18) !important;
  border-color: rgba(34,197,94,.4) !important;
  color: #86EFAC !important;
}

:root[data-theme="medianoche"] .mb-cinematic-toggle.on:hover {
  background: rgba(34,197,94,.25) !important;
}

:root[data-theme="medianoche"] .mb-cinematic-toggle.off {
  opacity: .55 !important;
}

:root[data-theme="medianoche"] .mb-cinematic-toggle svg {
  flex-shrink: 0;
}

@media (max-width: 900px) {
  :root[data-theme="medianoche"] .mb-cinematic-toggle .mb-cinematic-label {
    display: none !important;
  }

  :root[data-theme="medianoche"] .mb-cinematic-toggle {
    padding: 0 8px !important;
  }
}

:root[data-theme="medianoche"] .mb-user {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  cursor: pointer;
}

:root[data-theme="medianoche"] .mb-av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 700;
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. ICON BAR (#nav-icons) — 72px con etiquetas, #E0EAFF, debajo del module bar
   ───────────────────────────────────────────────────────────────────────────── */

:root[data-theme="medianoche"] #nav-icons {
  width: 72px !important;
  top: 44px !important;
  bottom: auto !important;
  /* ya no llega al fondo */
  height: auto !important;
  /* se ajusta al contenido */
  padding: 8px 4px 6px !important;
  /* un poco más de padding abajo para el redondeo */
  background: var(--s1, #fff) !important;
  border-right: 1px solid var(--b1) !important;
  border-bottom: 1px solid var(--b1) !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  box-shadow: 2px 2px 10px rgba(0,0,0,.08) !important;
  gap: 6px !important;
  overflow: visible !important;
}

:root[data-theme="medianoche"] #nav-icons.nav-hidden {
  transform: translateX(-72px) !important;
}

/* Cada item es una "tarjeta" blanca con borde azul y icono+label centrados */

:root[data-theme="medianoche"] .nav-icon {
  width: 60px !important;
  height: 52px !important;
  border-radius: 10px !important;
  margin: 0 auto !important;
  padding: 4px 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  color: #000 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  border: 1.5px solid var(--color-primary) !important;
  background: var(--s2) !important;
  cursor: pointer !important;
  transition: all .15s !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

:root[data-theme="medianoche"] .nav-icon:hover {
  background: var(--color-primary-bg) !important;
  /* azul Arctic muy translúcido */
  border-color: var(--color-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), .18) !important;
}

:root[data-theme="medianoche"] .nav-icon.active {
  background: var(--color-primary-tint) !important;
  border-color: var(--color-primary-dark) !important;
  box-shadow: 0 2px 10px rgba(var(--color-primary-rgb), .25) !important;
  color: #000 !important;
}

/* Reemplazo de iconos legacy por emojis a color. Ocultamos cualquier
   icono heredado (.icon, <i> de FontAwesome) y mostramos un ::before con emoji. */

:root[data-theme="medianoche"] .nav-icon > .icon,:root[data-theme="medianoche"] .nav-icon > i {
  display: none !important;
}

/* Mayor especificidad: agregamos #nav-icons al selector para ganar a la regla
   `:root[data-theme="medianoche"] #nav-icons .nav-icon { color: rgba(255,255,255,.45) }`
   que estaba bajando la opacidad heredada del color a los emojis. */

:root[data-theme="medianoche"] #nav-icons .nav-icon::before,:root[data-theme="medianoche"] #nav-icons .nav-icon:hover::before,:root[data-theme="medianoche"] #nav-icons .nav-icon.active::before {
  font-size: 18px !important;
  line-height: 1 !important;
  display: block !important;
  /* Forzar fuentes emoji a color (vence Plus Jakarta Sans / Symbola / etc.) */
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',               'Noto Color Emoji', 'Twemoji Mozilla', 'EmojiOne Color',               'Android Emoji', sans-serif !important;
  /* Resetear cualquier herencia que oscurezca/desature los pixeles del emoji */
  color: initial !important;
  /* anula color rgba(255,255,255,.45) heredado */
  opacity: 1 !important;
  /* anula cualquier opacity inherited */
  text-shadow: none !important;
  /* anula text-shadow del padre */
  -webkit-text-fill-color: initial !important;
  /* Safari/Chrome: clave para emojis */
  /* Vibrancia siempre activa, sin scale extra para que el label tenga espacio. */
  transform: none !important;
  filter: saturate(2.5) contrast(1.32) drop-shadow(0 2px 3px rgba(0,0,0,.30)) !important;
  margin-bottom: 2px !important;
  transition: filter .15s !important;
}

:root[data-theme="medianoche"] .nav-icon[data-panel="devices"]::before {
  content: '🚗';
}

:root[data-theme="medianoche"] .nav-icon[data-panel="alerts"]::before {
  content: '🔔';
}

:root[data-theme="medianoche"] .nav-icon[data-panel="geofences"]::before {
  content: '📍';
}

:root[data-theme="medianoche"] .nav-icon[data-panel="events"]::before {
  content: '⚡';
}

:root[data-theme="medianoche"] .nav-icon[data-panel="gprs"]::before {
  content: '📡';
}

:root[data-theme="medianoche"] .nav-icon[data-modal="device_console"]::before {
  content: '💬';
}

:root[data-theme="medianoche"] a.nav-icon[href*="admin"]::before {
  content: '🛠️';
}

:root[data-theme="medianoche"] .nav-icon[data-panel="settings"]::before {
  content: '⚙️';
}

:root[data-theme="medianoche"] .nav-icon[data-panel="account"]::before {
  content: '👤';
}

:root[data-theme="medianoche"] .nav-icon[data-panel="theme"]::before {
  content: '🎨';
}

:root[data-theme="medianoche"] .nav-label {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  line-height: 1 !important;
  display: block !important;
  color: #FFFFFF !important;
  text-transform: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.6) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 56px !important;
}

/* Hover/active mantienen blanco con un poco más de glow */

:root[data-theme="medianoche"] #nav-icons .nav-icon:hover .nav-label,:root[data-theme="medianoche"] #nav-icons .nav-icon.active .nav-label {
  color: #FFFFFF !important;
  text-shadow: 0 0 8px rgba(56,189,248,.6), 0 1px 2px rgba(0,0,0,.6) !important;
}

/* Separador entre grupos del icon bar */

:root[data-theme="medianoche"] .nav-icon-sep {
  width: 36px;
  height: 1px;
  background: var(--b1, rgba(56,189,248,.08)) !important;
  margin: 4px auto;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. SIDE PANEL (#nav-panel) — top 44px, left 72px, 360px abierto
   ───────────────────────────────────────────────────────────────────────────── */

:root[data-theme="medianoche"] #nav-panel {
  top: 44px !important;
  left: 72px !important;
  bottom: 0 !important;
  /* extiende el panel hasta el fondo de la pantalla */
  height: auto !important;
  max-height: none !important;
  border-radius: 0 !important;
  box-shadow: 2px 0 12px rgba(0,0,0,.1) !important;
}

:root[data-theme="medianoche"] #nav-panel.open {
  width: 360px !important;
}

/* Animación fluida del panel desplegable al abrir/cerrar */

:root[data-theme="medianoche"] #nav-panel {
  transition: width .28s cubic-bezier(.4, 0, .2, 1),              opacity .22s ease,              visibility 0s linear .28s !important;
  opacity: 0 !important;
}

:root[data-theme="medianoche"] #nav-panel.open {
  transition: width .3s cubic-bezier(.4, 0, .2, 1),              opacity .25s ease,              visibility 0s linear 0s !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Cuando el panel está colapsado: sin shadow/border (franja fantasma) */

:root[data-theme="medianoche"] #nav-panel:not(.open) {
  width: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  visibility: hidden !important;
}

/* La sección activa se fuerza a content-sizing con max-content. Esto
   evita que el browser la trate como flex-stretchable o le aplique un
   alto implícito cuando hay max-height + display:flex.
   El padre #nav-panel ya tiene max-height: 100vh. */

:root[data-theme="medianoche"] #nav-panel.open .nav-panel-section.active {
  height: max-content !important;
  max-height: none !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 max-content !important;
  align-self: flex-start !important;
}

/* Header del panel-devices fijo arriba (no scrollea) */

:root[data-theme="medianoche"] #panel-devices > .nav-panel-header,:root[data-theme="medianoche"] #panel-devices > #panel-devices-header {
  flex-shrink: 0 !important;
}

/* sidebar-content se ajusta al contenido (no estira al fondo cuando la
   lista es corta). Si la lista desborda el viewport, scrollea adentro. */

:root[data-theme="medianoche"] #panel-devices > .sidebar-content {
  flex: 0 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* nav-tabs (Dispositivos / Eventos / Historial) también fijos arriba */

:root[data-theme="medianoche"] #panel-devices .sidebar-content > .nav.nav-tabs {
  flex-shrink: 0 !important;
}

/* tab-content se ajusta al contenido */

:root[data-theme="medianoche"] #panel-devices .sidebar-content > .tab-content {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding-top: 0 !important;
}

/* La pestaña activa se ajusta al contenido. Si excede el viewport,   scrollea internamente. Sin offset porque el panel-section ya lo limita. */

:root[data-theme="medianoche"] #panel-devices .tab-content > .tab-pane.active {
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
}

:root[data-theme="medianoche"] #nav-panel.nav-hidden {
  transform: translateX(-72px) !important;
}

/* Panel header — estilo prototipo (fondo claro, texto oscuro) */

:root[data-theme="medianoche"] .nav-panel-header {
  background: var(--s2, #141E3F) !important;
  color: #E0EAFF !important;
  border-bottom: 1px solid rgba(56,189,248,.08) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  padding: 0 12px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
}

:root[data-theme="medianoche"] .nav-panel-header * {
  color: #E0EAFF !important;
}

/* Nav tabs in panel */

:root[data-theme="medianoche"] #nav-panel .nav-tabs {
  background: var(--s2) !important;
  border-bottom: 1px solid rgba(56,189,248,.08) !important;
}

:root[data-theme="medianoche"] #nav-panel .nav-tabs > li > a {
  color: rgba(224,234,255,.40) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-bottom: 2.5px solid transparent !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

:root[data-theme="medianoche"] #nav-panel .nav-tabs > li.active > a,:root[data-theme="medianoche"] #nav-panel .nav-tabs > li.active > a:focus,:root[data-theme="medianoche"] #nav-panel .nav-tabs > li.active > a:hover {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
  background: transparent !important;
}

/* Panel links */

:root[data-theme="medianoche"] .nav-panel-link {
  border-radius: 9px !important;
  background: var(--s2, #141E3F) !important;
  border: 1px solid rgba(56,189,248,.08) !important;
  margin-bottom: 7px !important;
  padding: 10px 12px !important;
  color: #E0EAFF !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

:root[data-theme="medianoche"] .nav-panel-link .icon {
  color: var(--color-primary) !important;
  font-size: 15px !important;
  margin-right: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. MAP AREA — offset 44px por el module bar
   ───────────────────────────────────────────────────────────────────────────── */

:root[data-theme="medianoche"] #mapWrap {
  top: 44px !important;
}

:root[data-theme="medianoche"] #map-controls {
  top: 52px !important;
  width: auto !important;
  align-items: flex-end !important;
}

:root[data-theme="medianoche"] #map-controls > div {
  width: auto !important;
}

:root[data-theme="medianoche"] #fdb-fullscreen {
  top: 44px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MAP CONTROLS — estilo definitivo
   Selector de máxima especificidad: supera nav-sidebar.js y Bootstrap.
   No modificar: este bloque es la única fuente de verdad para el estilo
   de la barra de controles del mapa en el tema Arctic.
   ═══════════════════════════════════════════════════════════════════ */

/* Tarjeta blanca por grupo de botones */

:root[data-theme="medianoche"] #map-controls .btn-group-vertical {
  background: var(--s2) !important;
  border: 1px solid rgba(56,189,248,.16) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.10) !important;
  overflow: hidden !important;
  display: block !important;
  width: auto !important;
  float: none !important;
  pointer-events: auto !important;
}

/* Botón base — 36×36 px, fondo blanco, ícono azul oscuro */

:root[data-theme="medianoche"] #map-controls button.btn,:root[data-theme="medianoche"] #map-controls label.btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--s2) !important;
  color: rgba(224,234,255,.58) !important;
  border: none !important;
  border-bottom: 1px solid rgba(56,189,248,.07) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  transition: background .14s, color .14s !important;
  position: static !important;
  float: none !important;
  text-align: center !important;
}

/* Último botón del grupo: sin borde inferior */

:root[data-theme="medianoche"] #map-controls button.btn:last-child,:root[data-theme="medianoche"] #map-controls label.btn:last-child {
  border-bottom: none !important;
}

/* Hover */

:root[data-theme="medianoche"] #map-controls button.btn:hover,:root[data-theme="medianoche"] #map-controls label.btn:hover {
  background: #0A1020 !important;
  color: var(--color-primary) !important;
  box-shadow: none !important;
}

/* Focus — sin ring visual */

:root[data-theme="medianoche"] #map-controls button.btn:focus,:root[data-theme="medianoche"] #map-controls label.btn:focus {
  background: var(--s2) !important;
  color: rgba(224,234,255,.58) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Active (pulsado momentáneamente) */

:root[data-theme="medianoche"] #map-controls button.btn:active,:root[data-theme="medianoche"] #map-controls label.btn:active {
  background: #0A1020 !important;
  color: var(--color-primary) !important;
  box-shadow: none !important;
}

/* Activado permanente: clase .active (Bootstrap) o checkbox checked */

:root[data-theme="medianoche"] #map-controls button.btn.active,:root[data-theme="medianoche"] #map-controls label.btn.active,:root[data-theme="medianoche"] #map-controls label.btn:has(input:checked) {
  background: #0A1020 !important;
  color: var(--color-primary) !important;
  box-shadow: none !important;
}

/* Todo dentro del botón hereda el color del botón */

:root[data-theme="medianoche"] #map-controls button.btn *,:root[data-theme="medianoche"] #map-controls label.btn * {
  color: inherit !important;
  fill: currentColor !important;
  pointer-events: none !important;
}

/* Bootstrap .open en el grupo: mantener estilo de tarjeta sin cambios */

:root[data-theme="medianoche"] #map-controls .btn-group-vertical.open,:root[data-theme="medianoche"] #map-controls .btn-group-vertical.open button.btn,:root[data-theme="medianoche"] #map-controls .btn-group-vertical.open label.btn {
  background: var(--s2) !important;
  box-shadow: none !important;
}

:root[data-theme="medianoche"] #map-controls .btn-group-vertical.open {
  border: 1px solid rgba(56,189,248,.16) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.10) !important;
}

/* Tooltips Bootstrap (data-placement="left") */

:root[data-theme="medianoche"] #map-controls .tooltip.left .tooltip-arrow {
  border-left-color: #E0EAFF !important;
}

:root[data-theme="medianoche"] #map-controls .tooltip-inner {
  background: #141E3F !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  border-radius: 5px !important;
  padding: 4px 9px !important;
}

/* Etiqueta de sección opcional dentro de un grupo */

:root[data-theme="medianoche"] #map-controls .layer-label {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: rgba(224,234,255,.40) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 3px 0 2px !important;
  line-height: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ARCTIC MAP — PANEL DESIGN SYSTEM (fiel al prototipo mapa-completo.html)
   Mapeo completo: Tobuli HTML → clases del prototipo
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── VARIABLES LOCALES (alias cortos del prototipo) ─── */

:root[data-theme="medianoche"] {
  --s1: #0F1730;
  --s2: #141E3F;
  --s3: #1A264F;
  --b1: rgba(120,170,255,.08);
  --b2: rgba(120,170,255,.18);
  --t1: #E0EAFF;
  --t2: #8A93A6;
  --t3: #4A5163;
  --primary: rgb(56,189,248);
  --primary-dk: rgb(2,132,199);
  --primary-bg: rgba(56,189,248,.12);
  --primary-ring: rgba(56,189,248,.22);
  --success: #4ADE80;
  --warning: #FBB724;
  --danger: #F87171;
  --panel-w: 360px;
  --topbar-h: 44px;
  --iconbar-w: 72px;
  --hover-bg: var(--s2);
  /* Carbon-specific */
  --bg: #0A1020;
  --ac: rgb(56,189,248);
  --ac2: rgb(2,132,199);
  --acb: rgba(56,189,248,.12);
  --gn: #4ADE80;
  --gnb: rgba(74,222,128,.12);
  --am: #FBB724;
  --amb: rgba(251,183,36,.12);
  --rd: #F87171;
  --rdb: rgba(248,113,113,.12);
  --bl: #38BDF8;
  --blb: rgba(56,189,248,.12);
  --pu: #A78BFA;
  --pub: rgba(167,139,250,.12);
}

/* ══════════════════════════════════════════════════════════════════════
   HOVER MAESTRO ARCTIC
   Cambia --hover-bg en :root[data-theme="medianoche"] y afectas TODO.
   ══════════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] .list-group-item:hover,:root[data-theme="medianoche"] a.list-group-item:hover,:root[data-theme="medianoche"] .dropdown-menu > li > a:hover,:root[data-theme="medianoche"] .dropdown-menu > li > a:focus,:root[data-theme="medianoche"] .dropdown-menu > li:hover > a,:root[data-theme="medianoche"] .btn-group .dropdown-menu > li > a:hover,:root[data-theme="medianoche"] .btn-group .dropdown-menu > li > a:focus,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu.inner > li > a:hover,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu.inner > li > a:focus,:root[data-theme="medianoche"] .device-item:hover,:root[data-theme="medianoche"] .object-item:hover,:root[data-theme="medianoche"] .item-row:hover,:root[data-theme="medianoche"] #object-list .list-group-item:hover,:root[data-theme="medianoche"] #panel-devices .list-group-item:hover,:root[data-theme="medianoche"] #objects_tab .object-item:hover,:root[data-theme="medianoche"] #objects_tab .item-row:hover,:root[data-theme="medianoche"] .group-list > li:hover,:root[data-theme="medianoche"] #panel-devices .group-list > li:hover,:root[data-theme="medianoche"] .table-hover > tbody > tr:hover,:root[data-theme="medianoche"] .table.table-list > tbody > tr:hover,:root[data-theme="medianoche"] .nav-panel-link:hover,:root[data-theme="medianoche"] #nav-panel .nav-panel-link:hover,:root[data-theme="medianoche"] #nav-panel .list-group-item:hover,:root[data-theme="medianoche"] #nav-panel .nav-panel-section .nav-panel-body .nav-panel-link:hover,:root[data-theme="medianoche"] #nav-panel a:hover,:root[data-theme="medianoche"] .ev-card:hover,:root[data-theme="medianoche"] #events_tab .ev-card:hover,:root[data-theme="medianoche"] .ctx-item:hover {
  background: var(--hover-bg) !important;
  color: var(--t1) !important;
  text-decoration: none !important;
}

/* Hover de pagination / nav-tabs / nav-pills — mismo color, pero también neutralizar bordes
   coloreados del bootstrap base. NO incluir aquí cards que tienen borde semántico de color. */

:root[data-theme="medianoche"] .pagination > li > a:hover,:root[data-theme="medianoche"] .pagination > li > span:hover,:root[data-theme="medianoche"] .nav-tabs > li > a:hover,:root[data-theme="medianoche"] .nav-pills > li > a:hover {
  background: var(--hover-bg) !important;
  color: var(--t1) !important;
  text-decoration: none !important;
  border-color: transparent !important;
}

/* Celdas de tabla en hover — anula el background azul de nav-sidebar.css
   (.table-hover>tbody>tr:hover>td usa var(--nav-hover-bg) que cae al fallback rgb(56,189,248)
   cuando el alias no resuelve). */

:root[data-theme="medianoche"] .table-hover > tbody > tr:hover > td,:root[data-theme="medianoche"] .table-hover > tbody > tr:hover > th,:root[data-theme="medianoche"] .table.table-list > tbody > tr:hover > td {
  background: var(--hover-bg) !important;
  background-color: var(--hover-bg) !important;
  color: var(--t1) !important;
}

/* Texto hijo en hover — anula el color blanco que inyecta nav-sidebar.js */

:root[data-theme="medianoche"] .list-group-item:hover *,:root[data-theme="medianoche"] .dropdown-menu > li > a:hover *,:root[data-theme="medianoche"] .btn-group .dropdown-menu > li > a:hover *,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu.inner > li > a:hover *,:root[data-theme="medianoche"] .group-list > li:hover *,:root[data-theme="medianoche"] #panel-devices .group-list > li:hover * {
  color: var(--t1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUDITORÍA HOVER — anula el azul oscuro del fallback var(--nav-hover-bg, rgb(56,189,248))
   inyectado por nav-sidebar.css en TODO el sistema. La cadena `var(--hover-bg)`
   que setea nav-sidebar.js a veces no resuelve, así que aquí forzamos el valor
   con !important y especificidad de atributo arctic. (NO duplicar ni mover.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1) Dropdown-menu items genéricos */

:root[data-theme="medianoche"] .dropdown-menu > li > a:focus:not(.btn),:root[data-theme="medianoche"] .dropdown-menu > li > a:hover:not(.btn),:root[data-theme="medianoche"] .btn-group .dropdown-menu > li > a:focus:not(.btn),:root[data-theme="medianoche"] .btn-group .dropdown-menu > li > a:hover:not(.btn),:root[data-theme="medianoche"] .bootstrap-select.btn-group .dropdown-menu.inner > li > a:hover,:root[data-theme="medianoche"] .bootstrap-select.btn-group .dropdown-menu.inner > li > a:focus,:root[data-theme="medianoche"] .bootstrap-select.btn-group .dropdown-menu.inner > li.selected > a:hover,:root[data-theme="medianoche"] .bootstrap-select.btn-group .dropdown-menu.inner > li.selected > a:focus,:root[data-theme="medianoche"] #panel-devices .dropdown-menu.inner > li > a:hover,:root[data-theme="medianoche"] #panel-devices .dropdown-menu.inner > li:hover > a,:root[data-theme="medianoche"] #panel-devices .dropdown-menu.inner > li > a:focus,:root[data-theme="medianoche"] #panel-devices .dropdown-menu.inner > li:focus > a,:root[data-theme="medianoche"] #panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li > a:hover,:root[data-theme="medianoche"] #panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li:hover > a,:root[data-theme="medianoche"] #panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li > a:focus,:root[data-theme="medianoche"] #panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li:focus > a,:root[data-theme="medianoche"] #panel-devices .btn-group.droparrow .dropdown-menu > li > a:focus,:root[data-theme="medianoche"] #panel-devices .btn-group.droparrow .dropdown-menu > li > a:hover,:root[data-theme="medianoche"] .nav > li > a:focus:not(.btn),:root[data-theme="medianoche"] .nav > li > a:hover:not(.btn),:root[data-theme="medianoche"] .list-group-item:hover,:root[data-theme="medianoche"] #panel-devices .group-list > li:hover > .checkbox,:root[data-theme="medianoche"] #panel-devices .group-list > li:hover > .details,:root[data-theme="medianoche"] #panel-devices .group-list > li:hover > .name {
  background: var(--hover-bg) !important;
  background-color: var(--hover-bg) !important;
  color: var(--t1) !important;
}

/* Texto descendiente en los nuevos selectores (anula color:#fff !important del fallback) */

:root[data-theme="medianoche"] .dropdown-menu > li > a:focus:not(.btn) *,:root[data-theme="medianoche"] .dropdown-menu > li > a:hover:not(.btn) *,:root[data-theme="medianoche"] .btn-group .dropdown-menu > li > a:focus:not(.btn) *,:root[data-theme="medianoche"] .btn-group .dropdown-menu > li > a:hover:not(.btn) *,:root[data-theme="medianoche"] .bootstrap-select.btn-group .dropdown-menu.inner > li > a:hover *,:root[data-theme="medianoche"] .bootstrap-select.btn-group .dropdown-menu.inner > li > a:focus *,:root[data-theme="medianoche"] #panel-devices .dropdown-menu.inner > li > a:hover *,:root[data-theme="medianoche"] #panel-devices .dropdown-menu.inner > li:hover > a *,:root[data-theme="medianoche"] #panel-devices .dropdown-menu.inner > li > a:focus *,:root[data-theme="medianoche"] #panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li > a:hover *,:root[data-theme="medianoche"] #panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li:hover > a *,:root[data-theme="medianoche"] #panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li > a:focus *,:root[data-theme="medianoche"] #panel-devices .btn-group.droparrow .dropdown-menu > li > a:focus *,:root[data-theme="medianoche"] #panel-devices .btn-group.droparrow .dropdown-menu > li > a:hover *,:root[data-theme="medianoche"] .nav > li > a:focus:not(.btn) *,:root[data-theme="medianoche"] .nav > li > a:hover:not(.btn) *,:root[data-theme="medianoche"] .list-group-item:hover *,:root[data-theme="medianoche"] #panel-devices .group-list > li:hover > .checkbox *,:root[data-theme="medianoche"] #panel-devices .group-list > li:hover > .details *,:root[data-theme="medianoche"] #panel-devices .group-list > li:hover > .name * {
  color: var(--t1) !important;
}

/* ─── ICON BAR (#nav-icons .nav-icon) → .ib-item ─── */

:root[data-theme="medianoche"] #nav-icons .nav-icon,:root[data-theme="medianoche"] #nav-icons a.nav-icon {
  width: 64px !important;
  height: 46px !important;
  border-radius: 9px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  cursor: pointer !important;
  transition: all .15s !important;
  color: rgba(255,255,255,.45) !important;
  position: relative !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  margin: 1px auto !important;
  padding: 4px 0 !important;
}

:root[data-theme="medianoche"] #nav-icons .nav-icon:hover,:root[data-theme="medianoche"] #nav-icons a.nav-icon:hover {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.85) !important;
}

:root[data-theme="medianoche"] #nav-icons .nav-icon.open,:root[data-theme="medianoche"] #nav-icons .nav-icon.active {
  background: rgba(var(--color-primary-rgb), .3) !important;
  color: #fff !important;
}

:root[data-theme="medianoche"] #nav-icons .nav-icon .nav-label {
  font-size: 7.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
  line-height: 1 !important;
}

/* Iconos legacy ocultos en Arctic — los reemplazamos con emojis a color via ::before */

:root[data-theme="medianoche"] #nav-icons .nav-icon .icon,:root[data-theme="medianoche"] #nav-icons .nav-icon i.fa {
  display: none !important;
}

/* Separador entre íconos */

:root[data-theme="medianoche"] #nav-icons .ib-sep {
  width: 28px !important;
  height: 1px !important;
  background: rgba(255,255,255,.08) !important;
  margin: 3px 0 !important;
}

/* Badge en ícono */

:root[data-theme="medianoche"] #nav-icons .nav-icon .ib-badge {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: var(--danger) !important;
  border: 1.5px solid #E0EAFF !important;
  font-size: 6.5px !important;
  font-weight: 700 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ─── SIDE PANEL (#nav-panel) → .side-panel ───
   Background TRANSPARENTE: el blanco lo pinta solo .nav-panel-section.active
   (que es content-sized). Si pintamos el contenedor #nav-panel, el blanco
   se extiende hasta el fondo del viewport. */

:root[data-theme="medianoche"] #nav-panel {
  background: transparent !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* ─── PANEL SECTION HEADER (.nav-panel-header) → .panel-hd ─── */

:root[data-theme="medianoche"] #nav-panel .nav-panel-header {
  height: 42px !important;
  background: var(--s2) !important;
  border-bottom: 1px solid var(--b1) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  gap: 8px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: var(--t1) !important;
  letter-spacing: -.01em !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  text-transform: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* ─── PANEL TABS (.nav-tabs li a) → .ptab ─── */

:root[data-theme="medianoche"] #nav-panel .nav-tabs {
  display: flex !important;
  border-bottom: 1px solid var(--b1) !important;
  flex-shrink: 0 !important;
  background: var(--s1) !important;
  margin: 0 !important;
  padding: 0 !important;
}

:root[data-theme="medianoche"] #nav-panel .nav-tabs > li {
  float: none !important;
  flex: 1 !important;
  margin-bottom: 0 !important;
}

:root[data-theme="medianoche"] #nav-panel .nav-tabs > li > a {
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-bottom: 2.5px solid transparent !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--t3) !important;
  cursor: pointer !important;
  transition: all .15s !important;
  margin: 0 !important;
  padding: 0 6px !important;
  border-radius: 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

:root[data-theme="medianoche"] #nav-panel .nav-tabs > li > a:hover {
  color: var(--t2) !important;
  background: transparent !important;
  border-color: transparent transparent var(--b2) !important;
}

:root[data-theme="medianoche"] #nav-panel .nav-tabs > li.active > a,:root[data-theme="medianoche"] #nav-panel .nav-tabs > li.active > a:focus,:root[data-theme="medianoche"] #nav-panel .nav-tabs > li.active > a:hover {
  color: var(--primary) !important;
  border-color: transparent transparent var(--primary) !important;
  background: transparent !important;
}

/* ─── SIDEBAR CONTENT → panel-body ─── */

:root[data-theme="medianoche"] #nav-panel .sidebar-content {
  background: var(--s1) !important;
  padding: 0 !important;
}

:root[data-theme="medianoche"] #nav-panel .sidebar-content .tab-content {
  background: var(--s1) !important;
}

/* ─── PANEL BODY (nav-panel-body links) → .panel-links / .settings-list ─── */

:root[data-theme="medianoche"] #nav-panel .nav-panel-body {
  padding: 10px !important;
  background: var(--s1) !important;
}

:root[data-theme="medianoche"] #nav-panel .nav-panel-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 9px !important;
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  cursor: pointer !important;
  transition: all .15s !important;
  margin-bottom: 7px !important;
  text-decoration: none !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--t1) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

:root[data-theme="medianoche"] #nav-panel .nav-panel-link .icon,:root[data-theme="medianoche"] #nav-panel .nav-panel-link i.fa {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: var(--s3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  color: var(--t2) !important;
}

/* Panel links con subtext via tema → logout especial */

:root[data-theme="medianoche"] #nav-panel #panel-account .nav-panel-link[href*="logout"],:root[data-theme="medianoche"] #nav-panel #panel-account a.nav-panel-link[style*="e53935"] {
  background: rgba(220,38,38,.06) !important;
  border-color: rgba(220,38,38,.15) !important;
  color: var(--danger) !important;
}

:root[data-theme="medianoche"] #nav-panel #panel-account .nav-panel-link[href*="logout"]:hover {
  background: rgba(220,38,38,.12) !important;
}

/* ─── THEME PANEL → .theme-grid ─── */

/* Lista vertical (una columna) — más compacto, dot a la izquierda + nombre */

:root[data-theme="medianoche"] #nav-panel #panel-theme .nav-panel-body {
  padding: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

:root[data-theme="medianoche"] #nav-panel #panel-theme .nav-panel-link.theme-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 8px 10px !important;
  text-align: left !important;
  border: 1px solid var(--b1) !important;
  margin-bottom: 0 !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

:root[data-theme="medianoche"] #nav-panel #panel-theme .nav-panel-link.theme-option .theme-dot {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  margin: 0 10px 0 0 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] #nav-panel #panel-theme .nav-panel-link.theme-active {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-bg) !important;
  color: var(--color-primary) !important;
}

:root[data-theme="medianoche"] #panel-theme .theme-option:hover {
  background-color: var(--theme-hover-bg) !important;
  color: var(--theme-hover-fg) !important;
}

:root[data-theme="medianoche"] #panel-theme .theme-option:hover * {
  color: var(--theme-hover-fg) !important;
}

:root[data-theme="medianoche"] #panel-theme .theme-option:hover .theme-dot {
  border-color: var(--theme-hover-bg) !important;
}

/* ── Panel header: DISPOSITIVOS + búsqueda fija ── */

:root[data-theme="medianoche"] #panel-devices-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 12px !important;
  min-height: 44px !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] .panel-header-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--t3) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] .sidebar-search-input {
  flex: 1 !important;
  height: 28px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 7px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
  color: var(--t1) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  outline: none !important;
}

:root[data-theme="medianoche"] .sidebar-search-input::placeholder {
  color: var(--t3) !important;
}

:root[data-theme="medianoche"] .sidebar-search-input:focus {
  border-color: var(--primary) !important;
  background: rgba(120,170,255,.18) !important;
}

/* ── Botón añadir en panel header — misma estética que admin aa-modal-header-action ── */

:root[data-theme="medianoche"] .panel-header-add-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 7px !important;
  background: var(--color-primary-tint) !important;
  border: 1.5px solid var(--color-primary-border) !important;
  color: var(--color-primary) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: background .12s, border-color .12s !important;
}

:root[data-theme="medianoche"] .panel-header-add-btn:hover {
  background: var(--color-primary-tint-strong) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

:root[data-theme="medianoche"] .panel-header-add-btn .icon {
  font-size: 12px !important;
  color: inherit !important;
}

/* ══ FILTROS DE ESTADO DE DISPOSITIVO (#device-filter-bar) ══ */

:root[data-theme="medianoche"] #device-filter-bar {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 8px !important;
  background: var(--s2) !important;
  border-bottom: 1px solid rgba(56,189,248,.08) !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
}

:root[data-theme="medianoche"] .dfb-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(56,189,248,.14) !important;
  background: transparent !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(224,234,255,.40) !important;
  cursor: pointer !important;
  transition: background .12s, color .12s, border-color .12s !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

:root[data-theme="medianoche"] .dfb-btn:hover {
  border-color: rgba(56,189,248,.30) !important;
  color: #E0EAFF !important;
  background: #141E3F !important;
}

:root[data-theme="medianoche"] .dfb-btn.dfb-active {
  background: #0A1020 !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

:root[data-theme="medianoche"] .dfb-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* ══ LISTA DE DISPOSITIVOS — ajustes arctic ══ */

/* 1. Ocultar el switch activar/desactivar dispositivo (en items y en cabecera de grupo) */

:root[data-theme="medianoche"] .group-list > li > .checkbox,:root[data-theme="medianoche"] .group-heading > .checkbox {
  display: none !important;
}

/* Padding izquierdo al nombre al quedar sin el switch */

:root[data-theme="medianoche"] .group-list > li > .name {
  padding-left: 12px !important;
}

/* 2. Nombre del dispositivo: negro */

:root[data-theme="medianoche"] .group-list > li > .name [data-device="name"] {
  color: #E0EAFF !important;
  font-weight: 600 !important;
}

/* 3. Fecha/hora: negro (misma familia tipográfica) */

:root[data-theme="medianoche"] .group-list > li > .name [data-device="time"] {
  color: #E0EAFF !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
}

/* 4. Texto en hover de fila: mantener negro (no blanco del tema base) */

:root[data-theme="medianoche"] .group-list > li:hover > .name [data-device="name"],:root[data-theme="medianoche"] .group-list > li:hover > .name [data-device="time"] {
  color: #E0EAFF !important;
}

/* 5. Botón de tres puntos: sin hover visual */

:root[data-theme="medianoche"] .group-list > li .btn.icon.options {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: rgba(224,234,255,.40) !important;
}

:root[data-theme="medianoche"] .group-list > li .btn.icon.options:hover,:root[data-theme="medianoche"] .group-list > li .btn.icon.options:focus,:root[data-theme="medianoche"] .group-list > li .btn.icon.options:active {
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(224,234,255,.40) !important;
}

/* 6. Cada dispositivo como tarjeta con borde izquierdo coloreado por estado.
   Necesario forzar display:flex porque navy-pro define li como table-row (margin se ignora). */

:root[data-theme="medianoche"] #panel-devices .group-list > li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--s1) !important;
  border-radius: 8px !important;
  border-left: 3px solid #94A3B8 !important;
  border-right: 1px solid var(--b1) !important;
  border-top: 1px solid var(--b1) !important;
  border-bottom: 1px solid var(--b1) !important;
  padding: 8px 10px 8px 12px !important;
  margin: 0 0 5px 2px !important;
  width: calc(100% - 2px) !important;
  max-width: none !important;
  box-sizing: border-box !important;
  transition: background .12s, border-color .12s !important;
}

:root[data-theme="medianoche"] #panel-devices .group-list > li.dev-online {
  border-left-color: #22C55E !important;
}

:root[data-theme="medianoche"] #panel-devices .group-list > li.dev-stopped {
  border-left-color: #EAB308 !important;
}

:root[data-theme="medianoche"] #panel-devices .group-list > li.dev-offline {
  border-left-color: #EF4444 !important;
}

/* Permitir que el filtro JS oculte items via inline style="display:none" */

:root[data-theme="medianoche"] #panel-devices .group-list > li[style*="display: none"],:root[data-theme="medianoche"] #panel-devices .group-list > li[style*="display:none"] {
  display: none !important;
}

/* Hijos como flex items en lugar de table-cells */

:root[data-theme="medianoche"] #panel-devices .group-list > li > .name {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
}

:root[data-theme="medianoche"] #panel-devices .group-list > li > .name [data-device="name"] {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

:root[data-theme="medianoche"] #panel-devices .group-list > li > .details {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  width: auto !important;
  white-space: nowrap !important;
}

:root[data-theme="medianoche"] #panel-devices .group-list > li > .details > * {
  margin: 0 !important;
}

/* Indicador de borde activo (último hijo) — desactivar el border-right de navy-pro */

:root[data-theme="medianoche"] #panel-devices .group-list > li > *:last-child {
  border-right: none !important;
}

/* ─── DEVICE LIST (.item-group / devices) → .dev-list / .dev-item ─── */

/* Scroll en la lista de dispositivos — fix probado en runtime */

:root[data-theme="medianoche"] #panel-devices .sidebar-content .tab-content {
  overflow: hidden !important;
}

:root[data-theme="medianoche"] #panel-devices #objects_tab.active {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  max-height: calc(100vh - 80px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

:root[data-theme="medianoche"] #panel-devices #objects_tab #device-filter-bar,:root[data-theme="medianoche"] #panel-devices #objects_tab .tab-pane-header {
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] #panel-devices #objects_tab .tab-pane-body {
  /* flex: 1 1 auto para que el body se ajuste al espacio que deja el
     padre (#objects_tab.active está capado en max-height calc(100vh - 80px)).
     Con basis: auto + grow:1, el body puede crecer hasta el cap del
     padre, y cuando la lista supera ese alto, overflow-y: auto activa
     el scroll interno (sin recortar items como TRACTOR/yaris/camiones).
     Para listas cortas, el body se ajusta al contenido sin estirar. */
  flex: 1 1 auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  padding-bottom: 7px !important;
  /* Radius en el body porque el overflow-y:auto crea un nuevo contexto
     de clipping que ignora el radius del padre. */
  border-bottom-right-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}

:root[data-theme="medianoche"] #panel-devices #objects_tab.active {
  border-bottom-right-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}

:root[data-theme="medianoche"] #panel-devices .sidebar-content {
  border-bottom-right-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}

:root[data-theme="medianoche"] #panel-devices #objects_tab #ajax-items,:root[data-theme="medianoche"] #panel-devices #objects_tab ul.group-list,:root[data-theme="medianoche"] #panel-devices #geofencing_tab ul.group-list,:root[data-theme="medianoche"] #panel-devices #routes_tab ul.group-list,:root[data-theme="medianoche"] #panel-devices #pois_tab ul.group-list,:root[data-theme="medianoche"] #panel-devices #alerts_tab ul.group-list {
  /* Sin padding-bottom: el espacio blanco que aparecía al fondo de la
     lista era este 12px + el 20px del tab-pane-body. */
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Tarjetas de geocercas con fondo claro distintivo (azul muy suave) */

:root[data-theme="medianoche"] #panel-devices #geofencing_tab .group-list > li {
  background: var(--s2) !important;
  border-left-color: var(--color-primary) !important;
}

:root[data-theme="medianoche"] #objects_tab .item-list,:root[data-theme="medianoche"] #objects_tab .device-list {
  padding: 4px !important;
  background: var(--s1) !important;
}

:root[data-theme="medianoche"] #objects_tab .item-row,:root[data-theme="medianoche"] #objects_tab .object-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background .1s !important;
  margin-bottom: 2px !important;
  position: relative !important;
}

/* Velocidad en negro */

:root[data-theme="medianoche"] #panel-devices .group-list > li > .details [data-device="speed"] {
  color: var(--t1) !important;
  font-weight: 600 !important;
}

/* Device status badges */

:root[data-theme="medianoche"] .dev-status {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  padding: 1.5px 6px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}

:root[data-theme="medianoche"] .ds-move {
  background: rgba(29,78,216,.1) !important;
  color: #1D4ED8 !important;
}

:root[data-theme="medianoche"] .ds-stop {
  background: rgba(180,83,9,.1) !important;
  color: var(--warning) !important;
}

:root[data-theme="medianoche"] .ds-off {
  background: #F1F5F9 !important;
  color: #94A3B8 !important;
}

/* ─── EVENTS TAB — search bar ─── */

:root[data-theme="medianoche"] #events-header {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--b1) !important;
  background: var(--s1) !important;
}

:root[data-theme="medianoche"] #events_tab .ev-search-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

:root[data-theme="medianoche"] #events_tab .ev-search-wrap {
  flex: 1 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

:root[data-theme="medianoche"] #events_tab .ev-search-icon {
  position: absolute !important;
  left: 9px !important;
  font-size: 13px !important;
  color: var(--t3) !important;
  pointer-events: none !important;
}

:root[data-theme="medianoche"] #events_tab .ev-search-input {
  width: 100% !important;
  height: 32px !important;
  padding: 4px 10px 4px 28px !important;
  background: var(--s2) !important;
  border: 1.5px solid var(--b1) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  color: var(--t1) !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

:root[data-theme="medianoche"] #events_tab .ev-search-input:focus {
  border-color: var(--primary) !important;
  background: var(--s1) !important;
  box-shadow: 0 0 0 3px var(--primary-ring) !important;
}

:root[data-theme="medianoche"] #events_tab .ev-icon-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: var(--s2) !important;
  border: 1.5px solid var(--b1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--t2) !important;
  transition: all .15s !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] #events_tab .ev-icon-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: var(--primary-bg) !important;
}

:root[data-theme="medianoche"] #events_tab .ev-icon-btn--danger:hover {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
  background: #FEF2F2 !important;
}

/* ─── EVENT CARDS ─── */

:root[data-theme="medianoche"] #events_tab #ajax-events {
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

:root[data-theme="medianoche"] #events_tab .ev-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 10px 10px 10px 14px !important;
  border-radius: 8px !important;
  border-left: 3px solid var(--b2) !important;
  background: var(--s1) !important;
  cursor: pointer !important;
  transition: background .12s !important;
  position: relative !important;
}

:root[data-theme="medianoche"] #events_tab .ev-card.active {
  background: var(--primary-bg) !important;
}

/* Border colors por tipo */

:root[data-theme="medianoche"] #events_tab .ev-speed {
  border-left-color: var(--danger)  !important;
}

:root[data-theme="medianoche"] #events_tab .ev-geo {
  border-left-color: var(--primary) !important;
}

:root[data-theme="medianoche"] #events_tab .ev-idle {
  border-left-color: var(--warning) !important;
}

:root[data-theme="medianoche"] #events_tab .ev-on {
  border-left-color: var(--success) !important;
}

:root[data-theme="medianoche"] #events_tab .ev-off {
  border-left-color: #94A3B8       !important;
}

/* Card interior */

:root[data-theme="medianoche"] #events_tab .ev-card-inner {
  flex: 1 !important;
  min-width: 0 !important;
}

:root[data-theme="medianoche"] #events_tab .ev-device {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--t3) !important;
  font-family: 'Space Grotesk', monospace !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}

:root[data-theme="medianoche"] #events_tab .ev-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--t1) !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.35 !important;
}

:root[data-theme="medianoche"] #events_tab .ev-title--speed {
  color: var(--danger)  !important;
}

:root[data-theme="medianoche"] #events_tab .ev-title--geo {
  color: var(--primary) !important;
}

:root[data-theme="medianoche"] #events_tab .ev-title--idle {
  color: var(--warning) !important;
}

:root[data-theme="medianoche"] #events_tab .ev-title--on {
  color: var(--success) !important;
}

:root[data-theme="medianoche"] #events_tab .ev-title--off {
  color: #94A3B8        !important;
}

:root[data-theme="medianoche"] #events_tab .ev-meta {
  font-size: 10.5px !important;
  color: var(--t3) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Space Grotesk', monospace !important;
  line-height: 1.3 !important;
}

/* Botón de acciones (tres puntos) */

:root[data-theme="medianoche"] #events_tab .ev-card-actions {
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

/* Sin eventos */

:root[data-theme="medianoche"] #events_tab .ev-empty {
  padding: 32px 16px !important;
  text-align: center !important;
  color: var(--t3) !important;
  font-size: 12px !important;
}

/* ─── MODALES (.modal-content) → .modal ─── */

:root[data-theme="medianoche"] .modal-content {
  background: var(--s1) !important;
  border: 1px solid rgba(56,189,248,.15) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(10,20,50,.22), 0 6px 20px rgba(10,20,50,.12) !important;
  overflow: hidden !important;
}

:root[data-theme="medianoche"] .modal-content::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg,var(--primary),#D8B660) !important;
  border-radius: 14px 14px 0 0 !important;
}

:root[data-theme="medianoche"] .modal-header {
  padding: 16px 18px 12px !important;
  border-bottom: 1px solid var(--b1) !important;
  background: var(--s1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

:root[data-theme="medianoche"] .modal-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--t1) !important;
  letter-spacing: -.01em !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

:root[data-theme="medianoche"] .modal-header .close,:root[data-theme="medianoche"] .modal-content .close,:root[data-theme="medianoche"] .modal .close {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  background: var(--s2) !important;
  border: 1px solid rgba(120,170,255,.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #E0EAFF !important;
  transition: all .15s !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  margin-left: auto !important;
}

:root[data-theme="medianoche"] .modal-header .close *,:root[data-theme="medianoche"] .modal-header .close span,:root[data-theme="medianoche"] .modal-content .close span {
  color: #E0EAFF !important;
  opacity: 1 !important;
}

:root[data-theme="medianoche"] .modal-header .close:hover,:root[data-theme="medianoche"] .modal-content .close:hover {
  background: rgba(248,113,113,.15) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

:root[data-theme="medianoche"] .modal-header .close:hover *,:root[data-theme="medianoche"] .modal-content .close:hover span {
  color: var(--danger) !important;
}

:root[data-theme="medianoche"] .modal-body {
  padding: 18px !important;
  overflow-y: auto !important;
}

:root[data-theme="medianoche"] .modal-footer {
  padding: 12px 18px !important;
  border-top: 1px solid var(--b1) !important;
  background: var(--s2) !important;
  border-radius: 0 0 14px 14px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 7px !important;
}

/* Modal tabs */

:root[data-theme="medianoche"] .modal .nav-tabs {
  padding: 0 18px !important;
}

:root[data-theme="medianoche"] .modal .nav-tabs > li > a {
  height: 36px !important;
  padding: 0 13px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

/* ─── BOTONES GENERALES (modal/form) → .btn / .btn-primary / .btn-outline ─── */

:root[data-theme="medianoche"] .modal-footer .btn,:root[data-theme="medianoche"] .modal-footer button,:root[data-theme="medianoche"] .modal-body .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all .15s !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  white-space: nowrap !important;
}

:root[data-theme="medianoche"] .modal-footer .btn-primary,:root[data-theme="medianoche"] .modal-body .btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px var(--primary-ring) !important;
  border: none !important;
}

:root[data-theme="medianoche"] .modal-footer .btn-primary:hover {
  background: var(--primary-dk) !important;
}

:root[data-theme="medianoche"] .modal-footer .btn-default,:root[data-theme="medianoche"] .modal-body .btn-default {
  background: transparent !important;
  border: 1.5px solid var(--b2) !important;
  color: var(--t2) !important;
}

:root[data-theme="medianoche"] .modal-footer .btn-default:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* ─── FORMULARIOS EN MODALES → .fm-* ─── */

:root[data-theme="medianoche"] .modal-body .form-group {
  margin-bottom: 13px !important;
}

:root[data-theme="medianoche"] .modal-body .control-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--t2) !important;
  margin-bottom: 4px !important;
  display: block !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

:root[data-theme="medianoche"] .modal-body .form-control {
  width: 100% !important;
  height: 35px !important;
  background: var(--s2) !important;
  border: 1.5px solid var(--b2) !important;
  border-radius: 8px !important;
  padding: 0 11px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  color: var(--t1) !important;
  outline: none !important;
  transition: all .15s !important;
  box-shadow: none !important;
}

:root[data-theme="medianoche"] .modal-body .form-control:focus {
  border-color: var(--primary) !important;
  background: var(--s1) !important;
  box-shadow: 0 0 0 3px var(--primary-ring) !important;
}

:root[data-theme="medianoche"] .modal-body select.form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A90BC' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 28px !important;
}

:root[data-theme="medianoche"] .modal-body textarea.form-control {
  height: auto !important;
  padding: 8px 11px !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}

:root[data-theme="medianoche"] .modal-body .fm-section-title {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--t3) !important;
  margin-bottom: 10px !important;
  padding-bottom: 7px !important;
  border-bottom: 1px solid var(--b1) !important;
  font-family: 'Space Grotesk', monospace !important;
}

/* ─── BADGES → .badge / .b-* ─── */

:root[data-theme="medianoche"] .badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  padding: 2.5px 7px !important;
  border-radius: 5px !important;
  font-family: 'Space Grotesk', monospace !important;
  letter-spacing: .03em !important;
}

:root[data-theme="medianoche"] .b-green {
  background: rgba(21,128,61,.1) !important;
  color: var(--success) !important;
  border: 1px solid rgba(21,128,61,.2) !important;
}

:root[data-theme="medianoche"] .b-red {
  background: rgba(220,38,38,.1) !important;
  color: var(--danger)  !important;
  border: 1px solid rgba(220,38,38,.2) !important;
}

:root[data-theme="medianoche"] .b-amber {
  background: rgba(180,83,9,.1)  !important;
  color: var(--warning) !important;
  border: 1px solid rgba(180,83,9,.2)  !important;
}

:root[data-theme="medianoche"] .b-blue {
  background: rgba(var(--color-primary-rgb), .1) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(var(--color-primary-rgb), .2) !important;
}

:root[data-theme="medianoche"] .b-muted {
  background: var(--s2)         !important;
  color: var(--t3)      !important;
  border: 1px solid var(--b1)         !important;
}

/* ─── SCROLLBAR GLOBAL ─── */

:root[data-theme="medianoche"] #nav-panel ::-webkit-scrollbar,:root[data-theme="medianoche"] .modal-body ::-webkit-scrollbar {
  width: 3px !important;
  height: 3px !important;
}

:root[data-theme="medianoche"] #nav-panel ::-webkit-scrollbar-thumb,:root[data-theme="medianoche"] .modal-body ::-webkit-scrollbar-thumb {
  background: var(--b2) !important;
  border-radius: 2px !important;
}

/* ─── PANEL SEARCH DENTRO DE PANEL HEADER ─── */

:root[data-theme="medianoche"] #nav-panel .panel-search {
  height: 28px !important;
  background: var(--s1) !important;
  border: 1.5px solid var(--b2) !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 0 8px !important;
  flex: 1 !important;
}

:root[data-theme="medianoche"] #nav-panel .panel-search input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  font-size: 11.5px !important;
  color: var(--t1) !important;
  background: transparent !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

:root[data-theme="medianoche"] #nav-panel .panel-search input::placeholder {
  color: var(--t3) !important;
}

/* ─── WIDGET CARDS FLOTANTES → .widget-card / .wc-* ─── */

:root[data-theme="medianoche"] .widget-card {
  background: rgba(20,20,20,.85) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(56,189,248,.18) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
  min-width: 90px !important;
  color: #E0EAFF !important;
}

/* ─── CONTEXT MENU (.ctx-menu) ─── */

:root[data-theme="medianoche"] .ctx-menu {
  background: var(--s1) !important;
  border: 1px solid var(--b2) !important;
  border-radius: 9px !important;
  padding: 4px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.14) !important;
  min-width: 190px !important;
}

:root[data-theme="medianoche"] .ctx-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--t2) !important;
  cursor: pointer !important;
  transition: all .1s !important;
}

:root[data-theme="medianoche"] .ctx-sep {
  height: 1px !important;
  background: var(--b1) !important;
  margin: 3px 0 !important;
}

/* ─── CONFIRM MODAL (centrado / overlay) ─── */

:root[data-theme="medianoche"] .modal-backdrop {
  background: rgba(10,20,50,.5) !important;
}

:root[data-theme="medianoche"] .modal-backdrop.in {
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HIGH-SPECIFICITY OVERRIDES — beats nav-sidebar.css (3,x,x) selectors
   ══════════════════════════════════════════════════════════════════════════════ */

/* Panel header supera nav-sidebar (1,1,0) */

:root[data-theme="medianoche"] #nav-panel #panel-devices .nav-panel-header,:root[data-theme="medianoche"] #nav-panel .nav-panel-section .nav-panel-header {
  height: 42px !important;
  background: #141E3F !important;
  border-bottom: 1px solid rgba(56,189,248,.08) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #E0EAFF !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

:root[data-theme="medianoche"] #nav-panel #panel-devices .nav-panel-header *,:root[data-theme="medianoche"] #nav-panel .nav-panel-section .nav-panel-header * {
  color: #E0EAFF !important;
}

/* Nav tabs en panel-devices supera nav-sidebar */

:root[data-theme="medianoche"] #panel-devices .nav-tabs > li > a,:root[data-theme="medianoche"] #panel-devices .nav-tabs > li > a:focus,:root[data-theme="medianoche"] #panel-devices .nav-tabs > li > a:hover {
  height: 34px !important;
  border: none !important;
  border-bottom: 2.5px solid transparent !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(224,234,255,.40) !important;
  padding: 0 8px !important;
  letter-spacing: 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: all .15s !important;
}

:root[data-theme="medianoche"] #panel-devices .nav-tabs > li.active > a,:root[data-theme="medianoche"] #panel-devices .nav-tabs > li.active > a:focus,:root[data-theme="medianoche"] #panel-devices .nav-tabs > li.active > a:hover {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
}

:root[data-theme="medianoche"] #panel-devices .nav-tabs {
  background: var(--s2) !important;
  border-bottom: 1px solid rgba(56,189,248,.08) !important;
}

/* Panel nav links supera nav-sidebar (.nav-panel-link) */

:root[data-theme="medianoche"] #nav-panel .nav-panel-section .nav-panel-body .nav-panel-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 9px !important;
  background: #141E3F !important;
  border: 1px solid rgba(56,189,248,.08) !important;
  margin-bottom: 7px !important;
  text-decoration: none !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #E0EAFF !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: all .15s !important;
  letter-spacing: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BOOTSTRAP-SELECT — Eliminar doble contenedor (igual que admin)
   .bootstrap-select.form-control es el wrapper div → transparente
   .dropdown-toggle es el botón real → recibe el estilo del select
   ══════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] .bootstrap-select.form-control:not(.bs-container),:root[data-theme="medianoche"] .bootstrap-select.btn-group:not(.bs-container) {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  display: block !important;
  position: relative !important;
  overflow: visible !important;
  width: 100%;
  /* sin !important — inline-style de selectPosition() gana en bs-container */
}

/* Multiselect (.multiexpand) crece según contenido — restaurar height auto */

:root[data-theme="medianoche"] .bootstrap-select.form-control.multiexpand:not(.bs-container),:root[data-theme="medianoche"] .bootstrap-select.btn-group.multiexpand:not(.bs-container) {
  height: auto !important;
  min-height: 0 !important;
}

/* ── multiexpand: ocultar el dropdown-toggle "Nada seleccionado" y mostrar el
       dropdown ABIERTO INLINE — para que el usuario vea directo actions-box +
       search + lista de items, sin tener que hacer click en un toggle.
       Aplica a TODOS los .multiexpand del proyecto (alertas, admin clients,       grupos, plantillas, etc.). Excluye .bs-container (cuando la lista se
       appendea al body con data-container="body" por bootstrap-select). ── */

:root[data-theme="medianoche"] .bootstrap-select.multiexpand:not(.bs-container) > .dropdown-toggle,:root[data-theme="medianoche"] .bootstrap-select.multiexpand:not(.bs-container) > .caret {
  display: none !important;
}

:root[data-theme="medianoche"] .bootstrap-select.multiexpand:not(.bs-container) > .dropdown-menu {
  display: block !important;
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 6px !important;
  border: 1.5px solid var(--input-border) !important;
  border-radius: var(--input-radius) !important;
  background: var(--color-surface-1) !important;
  box-shadow: none !important;
  float: none !important;
  transform: none !important;
}

/* <select> nativo dentro de .bootstrap-select: oculto pero accesible.
   Sin esto, la regla `:root[data-theme="medianoche"] select` (background/border)
   lo hace visible, inflando el contenedor visual ("sobre-contenedor"). */

:root[data-theme="medianoche"] .bootstrap-select > select,:root[data-theme="medianoche"] .bootstrap-select > select.form-control,:root[data-theme="medianoche"] .bootstrap-select > .selectpicker {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: -1 !important;
}

:root[data-theme="medianoche"] .bootstrap-select > .dropdown-toggle,:root[data-theme="medianoche"] .bootstrap-select.form-control > .dropdown-toggle {
  width: 100% !important;
  height: 34px !important;
  background: var(--input-bg) !important;
  border: 1.5px solid var(--input-border) !important;
  border-radius: var(--input-radius) !important;
  color: var(--input-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  padding: 0 32px 0 10px !important;
  box-shadow: none !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  transition: border-color .15s, box-shadow .15s !important;
}

:root[data-theme="medianoche"] .bootstrap-select > .dropdown-toggle:hover,:root[data-theme="medianoche"] .bootstrap-select > .dropdown-toggle:focus,:root[data-theme="medianoche"] .bootstrap-select.open > .dropdown-toggle {
  background: var(--input-focus-bg) !important;
  border-color: var(--input-focus-border) !important;
  box-shadow: 0 0 0 3px var(--input-focus-ring) !important;
  outline: none !important;
}

:root[data-theme="medianoche"] .bootstrap-select .filter-option {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 !important;
  line-height: 34px !important;
}

/* Caret / flecha */

:root[data-theme="medianoche"] .bootstrap-select .caret {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-top-color: rgba(224,234,255,.40) !important;
  border-width: 5px 4px 0 !important;
}

:root[data-theme="medianoche"] .bootstrap-select.open .caret {
  transform: translateY(-50%) rotate(180deg) !important;
}

/* Dropdown del selectpicker — siempre se despliega DESDE EL CONTENEDOR HACIA ABAJO.
   container: false (default global) → menu queda como hijo del .bootstrap-select.
   position: absolute + top: 100% lo ancla bajo el .dropdown-toggle. */

:root[data-theme="medianoche"] .bootstrap-select:not(.bs-container) > .dropdown-menu,:root[data-theme="medianoche"] .bootstrap-select.btn-group:not(.bs-container) > .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  transform: none !important;
  z-index: 1060 !important;
}

/* dropup explícito: también forzar abajo (anula la decisión del JS) */

:root[data-theme="medianoche"] .bootstrap-select.dropup:not(.bs-container) > .dropdown-menu {
  top: 100% !important;
  bottom: auto !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu {
  background: var(--s2) !important;
  border: 1px solid rgba(56,189,248,.18) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.14) !important;
  padding: 4px !important;
  margin-top: 4px !important;
  overflow: hidden !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu > li > a {
  font-size: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: rgba(224,234,255,.58) !important;
  padding: 7px 12px !important;
  border-radius: 7px !important;
  transition: all .1s !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu > li > a:hover,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu > li.selected > a {
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu > li.selected > a {
  background: rgba(var(--color-primary-rgb), .1) !important;
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

/* Live search del selectpicker */

:root[data-theme="medianoche"] .bootstrap-select .bs-searchbox {
  padding: 4px 6px !important;
  border-bottom: 1px solid rgba(56,189,248,.08) !important;
  margin-bottom: 4px !important;
}

:root[data-theme="medianoche"] .bootstrap-select .bs-searchbox .form-control {
  height: 30px !important;
  background: var(--input-bg) !important;
  border: 1.5px solid var(--input-border) !important;
  border-radius: 7px !important;
  font-size: 11.5px !important;
  padding: 0 8px 0 31px !important;
  box-shadow: none !important;
}

:root[data-theme="medianoche"] .bootstrap-select .bs-searchbox .form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-tint) !important;
}

/* Widgetsbar original en Arctic — oculto, reemplazado por #arctic-wb */

:root[data-theme="medianoche"] #widgetsbar {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ARCTIC WIDGET BAR (#arctic-wb) — Fase 1 estructura base
   ══════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] #arctic-wb {
  position: fixed !important;
  left: 72px !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 60 !important;
  background: var(--s1) !important;
  border-top: 2px solid var(--primary) !important;
  box-shadow: 0 -6px 24px var(--color-primary-tint) !important;
  display: none !important;
  flex-direction: column !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: left .3s ease !important;
}

:root[data-theme="medianoche"] #arctic-wb.open {
  display: flex !important;
}

:root[data-theme="medianoche"] #nav-panel.open ~ #arctic-wb {
  left: 432px !important;
}

/* Header del bar */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 30px !important;
  padding: 0 8px !important;
  background: var(--s2) !important;
  border-bottom: 1px solid var(--b1) !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-device {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--success) !important;
  box-shadow: 0 0 6px rgba(21,128,61,.5) !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-dname {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--t1) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-btn {
  width: 22px !important;
  height: 22px !important;
  border-radius: 5px !important;
  background: transparent !important;
  border: 1px solid var(--b2) !important;
  color: var(--t3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background .12s, color .12s, border-color .12s !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-btn svg {
  width: 11px !important;
  height: 11px !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-btn:hover {
  background: var(--hover-bg) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

:root[data-theme="medianoche"] #arctic-wb.collapsed .arctic-wb-collapse svg {
  transform: rotate(180deg) !important;
}

/* Body del bar — scroll horizontal de cards */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-body {
  display: flex !important;
  align-items: stretch !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  /* Total widget bar = 200px (2px border + 30px header + 168px body) */
  height: 168px !important;
  min-height: 168px !important;
  max-height: 168px !important;
}

:root[data-theme="medianoche"] #arctic-wb.collapsed .arctic-wb-body {
  display: none !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-body::-webkit-scrollbar {
  height: 4px !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-body::-webkit-scrollbar-thumb {
  background: var(--b2) !important;
  border-radius: 2px !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-empty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 24px !important;
  font-size: 12px !important;
  color: var(--t3) !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-empty a {
  color: var(--primary) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  margin: 0 4px !important;
}

/* Card de widget */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-card {
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border-right: 1px solid var(--b1) !important;
  background: var(--s1) !important;
  position: relative !important;
  animation: arctic-wb-card-in .18s ease !important;
}

@keyframes arctic-wb-card-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-card.dragging {
  opacity: .4 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-card.drag-over {
  border-left: 3px solid var(--primary) !important;
}

/* Card header */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-cardhead {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 8px 5px 10px !important;
  height: 28px !important;
  background: var(--s2) !important;
  border-bottom: 1px solid var(--b1) !important;
  flex-shrink: 0 !important;
  cursor: grab !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-cardhead:active {
  cursor: grabbing !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-cardicon {
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-cardtitle {
  flex: 1 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--t1) !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-cardx {
  width: 17px !important;
  height: 17px !important;
  border-radius: 4px !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--t3) !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: background .1s, color .1s !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-cardx:hover {
  background: rgba(220,38,38,.1) !important;
  color: var(--danger) !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-cardx svg {
  width: 9px !important;
  height: 9px !important;
}

/* Indicador de color por tipo (border-left del card) */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-card-primary {
  border-left: 3px solid var(--primary)  !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-card-success {
  border-left: 3px solid var(--success)  !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-card-warning {
  border-left: 3px solid var(--warning)  !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-card-danger {
  border-left: 3px solid var(--danger)   !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-card-cyan {
  border-left: 3px solid #0891B2          !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-card-indigo {
  border-left: 3px solid #4F46E5          !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-card-gray {
  border-left: 3px solid #94A3B8          !important;
}

/* Card body */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-cardbody {
  padding: 8px 10px !important;
  overflow-y: auto !important;
  flex: 1 !important;
  min-height: 0 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-cardbody::-webkit-scrollbar {
  width: 3px !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-pl {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  font-size: 11px !important;
  color: var(--t3) !important;
  font-family: 'Space Grotesk', monospace !important;
  font-style: italic !important;
}

/* ── Widget Sensores: contenedor que combina velocímetro + lista ── */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-sensors {
  display: flex !important;
  height: 100% !important;
  gap: 12px !important;
  align-items: stretch !important;
}

/* Lista de sensores: grid auto-flow column. Las columnas se dimensionan al
   nombre más largo (max-content). El número de filas lo setea JS dinámicamente
   para mantener máximo 2 columnas. */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-sensorlist {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  align-content: center !important;
  gap: 1px 16px !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-pl-inline {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  font-size: 11px !important;
  color: var(--t3) !important;
  font-style: italic !important;
  font-family: 'Space Grotesk', monospace !important;
}

/* Widget Street View: iframe legacy de Google Maps (sin API key). */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-streetview {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 140px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--s2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARCTIC DEVICE VIEW — Layout en 3 columnas:
     · Izquierda: lista compacta de dispositivos (#arctic-dv-devicelist, ~72px)
     · Centro:    mapa principal (visible al fondo)
     · Derecha:   columna de widgets en acordeón (#arctic-dv, ~340px)
   El mapa nunca se cubre completamente.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cuando el device view está activo, ocultar el nav-panel grande y el
   widget bar inferior. nav-icons sigue visible (con la lista compacta encima). */

:root[data-theme="medianoche"].arctic-dv-active #nav-panel,:root[data-theme="medianoche"].arctic-dv-active #arctic-wb {
  display: none !important;
}

/* El nav-icons original (menú de Dispositivos/Geocercas/etc.) se oculta también
   porque la lista compacta lo reemplaza visualmente en el mismo lugar. */

:root[data-theme="medianoche"].arctic-dv-active #nav-icons {
  display: none !important;
}

/* ─── Sidebar compacta de dispositivos (izquierda) ─────────────────────────── */

/* ─── Sidebar de dispositivos (izquierda) — STACK style horizontal ─────────
   Card horizontal: icono plano + nombre en primary, offset shadow (papel apilado). */

:root[data-theme="medianoche"] #arctic-dv-devicelist {
  position: fixed !important;
  top: 44px !important;
  left: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  max-height: none !important;
  width: 190px !important;
  z-index: 1100 !important;
  background: var(--s1) !important;
  border-right: 1px solid var(--b1) !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 2px 0 12px rgba(0,0,0,.08) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  padding-bottom: 3px !important;
  transform: translateX(-110%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1),              opacity .22s ease,              visibility 0s linear .28s !important;
  pointer-events: none !important;
}

:root[data-theme="medianoche"] #arctic-dv-devicelist.open {
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1),              opacity .25s ease,              visibility 0s linear 0s !important;
}

:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-dl-back {
  flex-shrink: 0 !important;
  width: 100% !important;
  height: 36px !important;
  background: var(--s2) !important;
  border: none !important;
  border-bottom: 1px solid var(--b1) !important;
  cursor: pointer !important;
  color: var(--t2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .12s !important;
}

:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-dl-back svg {
  width: 14px !important;
  height: 14px !important;
}

:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-dl-back:hover {
  background: rgba(var(--color-primary-rgb), .08) !important;
  color: var(--color-primary) !important;
}

:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-dl-list {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 8px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-dl-list::-webkit-scrollbar {
  width: 3px !important;
}

:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-dl-list::-webkit-scrollbar-thumb {
  background: var(--b2) !important;
  border-radius: 2px !important;
}

/* Card horizontal: icono izquierda + nombre derecha. Sombra offset (papel apilado). */

:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-dl-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 9px 12px !important;
  margin: 0 !important;
  background: var(--s1) !important;
  border: 1px solid var(--b2) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  text-align: left !important;
  box-shadow: 2px 2px 0 var(--s3) !important;
  transform: none !important;
}

:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-dl-item:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--s3) !important;
  background: var(--s1) !important;
}

:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-dl-item:active {
  transform: scale(.97) !important;
}

:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-dl-item.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary-dark) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0 var(--color-primary-bg),    4px 4px 0 1px var(--color-primary-border) !important;
}

/* Icono: cuadrado plano sin doble container */

:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-dl-icon {
  width: 22px !important;
  height: 22px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--t2) !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: color .15s ease !important;
  transform: none !important;
}

:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-dl-item.active .arctic-dv-dl-icon {
  color: var(--color-text-inv) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-dl-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
}

/* Nombre: contraste con primary del theme. En activo: text-inv. */

:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-dl-item .arctic-dv-dl-name,:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-dl-name,:root[data-theme="medianoche"] #arctic-dv-devicelist span.arctic-dv-dl-name {
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-primary) !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: none !important;
  line-height: 1.3 !important;
  text-align: left !important;
  opacity: 1 !important;
}

:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-dl-item.active .arctic-dv-dl-name,:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-dl-item.active span.arctic-dv-dl-name {
  color: var(--color-text-inv) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

:root[data-theme="medianoche"] #arctic-dv-devicelist .arctic-dv-pl-inline {
  padding: 16px 6px !important;
  font-size: 10px !important;
  color: var(--t3) !important;
  text-align: center !important;
  font-style: italic !important;
}

/* ─── Columna derecha — wrapper TRANSPARENTE (solo posicionador) ─────────────
   El acordeón interior tiene su propio borde/sombra; no queremos doble caja. */

:root[data-theme="medianoche"] #arctic-dv {
  position: fixed !important;
  top: auto !important;
  left: 200px !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: 220px !important;
  z-index: 1100 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  pointer-events: none !important;
  transform: translateY(12px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .25s ease, visibility 0s linear .28s !important;
}

:root[data-theme="medianoche"] #arctic-dv.open {
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1),              opacity .28s ease,              visibility 0s linear 0s !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc {
  pointer-events: auto !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-widgets {
  flex: 0 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  gap: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  /* Transición suave del contenido al cambiar de dispositivo */
  transition: opacity .18s ease, transform .18s ease !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Estado "switching" — fade out + leve descenso mientras se cambia el contenido */

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-widgets.switching {
  opacity: 0 !important;
  transform: translateY(-4px) !important;
}

:root[data-theme="medianoche"] #arctic-dv.open {
  display: flex !important;
}

:root[data-theme="medianoche"].arctic-dv-focus #arctic-dv {
  display: none !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 38px !important;
  padding: 0 12px !important;
  background: var(--s2) !important;
  border-bottom: 1px solid var(--b1) !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #15803D !important;
  box-shadow: 0 0 5px rgba(21,128,61,.5) !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-name {
  flex: 1 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--t1) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-widgets {
  flex: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 10px 12px !important;
  background: transparent !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-widgets::-webkit-scrollbar {
  width: 4px !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-widgets::-webkit-scrollbar-thumb {
  background: var(--b2) !important;
  border-radius: 2px !important;
}

/* Acordeones */

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-left: 3px solid var(--t3) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: box-shadow .15s !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  width: 280px !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* El acordeón Street View se ajusta al iframe (que es 350px ancho).
   Los demás se mantienen en 360px para que queden alineados visualmente. */

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-streetview {
  width: 280px !important;
}

/* Caso especial: cuando el acordeón es de Street View, el body NO debe tener
   padding (el iframe ocupa todo el espacio sin holguras). */

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-streetview .arctic-dv-acc-body {
  padding: 0 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc[open] {
  box-shadow: 0 4px 14px rgba(0,0,0,.08) !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-blue {
  border-left-color: var(--color-primary) !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-success {
  border-left-color: #15803D !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-warning {
  border-left-color: #D97706 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-danger {
  border-left-color: #DC2626 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-cyan {
  border-left-color: #0891B2 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-indigo {
  border-left-color: #6D28D9 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-primary {
  border-left-color: var(--color-primary) !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-gray {
  border-left-color: #64748B !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-summary {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 10px 12px !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none !important;
  transition: background .12s !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-summary::-webkit-details-marker {
  display: none !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-summary::marker {
  display: none !important;
  content: '' !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-summary:hover {
  background: var(--s2) !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-icon {
  width: 14px !important;
  text-align: center !important;
  color: var(--t3) !important;
  font-size: 13px !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--t1) !important;
  white-space: nowrap !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-sub {
  flex: 1 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--t2) !important;
  margin-left: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-chev {
  width: 12px !important;
  height: 12px !important;
  color: var(--t3) !important;
  transition: transform .15s !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc[open] .arctic-dv-acc-chev {
  transform: rotate(180deg) !important;
}

/* Botón "+" para gestionar widgets, en la esquina del summary del Street View */

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-manage {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  margin: 0 2px 0 0 !important;
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 6px !important;
  color: var(--t2) !important;
  cursor: pointer !important;
  transition: background .12s, color .12s, border-color .12s, transform .12s !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-manage svg {
  width: 11px !important;
  height: 11px !important;
  display: block !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-manage:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  transform: scale(1.06) !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-manage:active {
  transform: scale(.96) !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-body {
  padding: 10px 12px 12px !important;
  border-top: 1px solid var(--b1) !important;
  font-size: 12px !important;
}

/* iframe del widget Street View — tamaño exacto solicitado */

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-sv-iframe {
  display: block !important;
  width: 350px !important;
  height: 250px !important;
  border: 0 !important;
  border-radius: 0 0 9px 9px !important;
  background: var(--s2) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Punto de estado en el summary del acordeón Street View */

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 5px currentColor !important;
  border: 1.5px solid #fff !important;
  margin: 0 2px !important;
}

/* Empty state cuando no hay widgets activos */

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-pl {
  padding: 20px 12px !important;
  text-align: center !important;
  font-size: 11.5px !important;
  color: var(--t3) !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-pl a {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}

/* Botón flotante para reabrir la columna en modo Focus */

:root[data-theme="medianoche"] .arctic-dv-focus-restore {
  position: fixed !important;
  top: 80px !important;
  right: 12px !important;
  z-index: 1100 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), .4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: scale(.7) !important;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1),              opacity .22s ease,              visibility 0s linear .25s !important;
}

:root[data-theme="medianoche"] .arctic-dv-focus-restore svg {
  width: 14px !important;
  height: 14px !important;
}

:root[data-theme="medianoche"].arctic-dv-active.arctic-dv-focus .arctic-dv-focus-restore {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1),              opacity .25s ease,              visibility 0s linear 0s !important;
}

/* Cada fila de sensor */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 2px 0 !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon {
  flex: 0 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon {
  color: var(--t3) !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-name {
  color: var(--t2) !important;
  font-weight: 500 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  margin-right: auto !important;
  padding-right: 10px !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-val {
  font-weight: 700 !important;
  color: var(--t1) !important;
  font-family: 'Space Grotesk', monospace !important;
  font-size: 11px !important;
}

/* Lista vertical genérica para widgets como "Dispositivo" — flex column simple */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-rows {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  justify-content: center !important;
  gap: 1px !important;
}

/* Iconos del widget Dispositivo (mismas clases del icon-font de Tobuli) */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-rows .arctic-wb-srow-icon .icon.address {
  color: var(--color-primary) !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-rows .arctic-wb-srow-icon .icon.time {
  color: #475569 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-rows .arctic-wb-srow-icon .icon.idle {
  color: #B45309 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-rows .arctic-wb-srow-icon .icon.driver {
  color: #7C3AED !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-rows .arctic-wb-srow-icon .icon.engine_hours {
  color: #059669 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-rows .arctic-wb-srow-icon .icon.engine {
  color: #16A34A !important;
}

/* Dirección: permite wrap a 2 líneas. El nombre y el icono se alinean arriba. */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow.is-address {
  align-items: flex-start !important;
  padding-top: 3px !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow.is-address .arctic-wb-srow-val {
  white-space: normal !important;
  max-width: 220px !important;
  line-height: 1.3 !important;
  text-align: right !important;
}

/* Iconos coloreados por tipo de sensor (cuando vienen del icon-font de Tobuli) */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.engine,:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.ignition {
  color: var(--color-primary) !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.fuel_tank,:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.fuel_consumption {
  color: #F97316 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.temperature {
  color: #DC2626 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.battery,:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.battery_external {
  color: #EAB308 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.tachometer {
  color: #7C3AED !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.satellites {
  color: #16A34A !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.gsm {
  color: #0891B2 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.door {
  color: #B45309 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.seatbelt {
  color: #DC2626 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.rfid {
  color: #7C3AED !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.odometer,:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.engine_hours {
  color: #475569 !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.harsh_acceleration,:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.harsh_breaking,:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow-icon .icon.harsh_turning {
  color: #DC2626 !important;
}

/* Estados booleanos: motor/ignición/puerta/cinturón → verde si on, rojo si off
   El icono Y el valor cambian de color con la transición */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow.is-on .arctic-wb-srow-icon .icon,:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow.is-on .arctic-wb-srow-val {
  color: #16A34A !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow.is-off .arctic-wb-srow-icon .icon,:root[data-theme="medianoche"] #arctic-wb .arctic-wb-srow.is-off .arctic-wb-srow-val {
  color: #DC2626 !important;
}

/* ── Velocímetro ── */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-speedo {
  flex: 0 0 130px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  position: relative !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-speedo-svg {
  width: 100% !important;
  max-width: 130px !important;
  height: auto !important;
}

/* Transiciones fluidas: las zonas coloreadas y la aguja animan suavemente al actualizar */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-speedo-svg .sp-zone {
  transition: stroke-dasharray .8s cubic-bezier(.4,0,.2,1) !important;
}

/* Aguja: rotación CSS con origen en el centro del viewBox (50, 55) — eso permite
   que la transición CSS funcione (el atributo SVG transform no es transicionable). */

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-speedo-svg .sp-needle {
  transform-box: view-box !important;
  transform-origin: 50px 55px !important;
  transition: transform .8s cubic-bezier(.4,0,.2,1) !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-speedo-svg .sp-needle line {
  transition: stroke .3s ease !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-speedo-svg .sp-pivot {
  transition: fill .3s ease !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-speedo-num {
  font-family: 'Space Grotesk', monospace !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
  margin-top: -6px !important;
  transition: color .3s ease !important;
}

:root[data-theme="medianoche"] #arctic-wb .arctic-wb-speedo-unit {
  font-family: 'Space Grotesk', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--t3) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MODAL GESTIONAR WIDGETS
   ══════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] #arctic-wb-modal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.45) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  z-index: 9000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal.open {
  display: flex !important;
  animation: arctic-wb-modal-in .15s ease !important;
}

@keyframes arctic-wb-modal-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-panel {
  background: var(--s1) !important;
  border: 1px solid var(--b2) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.25) !important;
  width: min(880px, 94vw) !important;
  max-height: 80vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 18px 20px 22px !important;
  animation: arctic-wb-panel-in .22s cubic-bezier(.34,1.4,.64,1) !important;
}

@keyframes arctic-wb-panel-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-title {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: var(--t1) !important;
  letter-spacing: -.01em !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-sub {
  font-size: 11px !important;
  color: var(--t3) !important;
  font-family: 'Space Grotesk', monospace !important;
  margin-top: 2px !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-close {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  cursor: pointer !important;
  font-size: 17px !important;
  line-height: 1 !important;
  color: var(--t3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .12s !important;
  padding: 0 !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-close:hover {
  background: rgba(220,38,38,.1) !important;
  color: var(--danger) !important;
  border-color: rgba(220,38,38,.3) !important;
}

/* Grid del catálogo */

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 10px !important;
  overflow-y: auto !important;
  padding: 2px !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 14px 10px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--b2) !important;
  background: var(--s2) !important;
  cursor: pointer !important;
  text-align: center !important;
  position: relative !important;
  transition: all .14s !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-item:hover {
  border-color: var(--primary) !important;
  background: var(--primary-bg) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px var(--color-primary-tint) !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-item.active {
  border-color: var(--success) !important;
  background: rgba(21,128,61,.08) !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-item.active::after {
  content: '✓' !important;
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--success) !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-icon {
  font-size: 20px !important;
  color: var(--primary) !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-name {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--t1) !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-req {
  font-size: 9.5px !important;
  color: var(--t3) !important;
  font-family: 'Space Grotesk', monospace !important;
  font-style: italic !important;
}

/* Footer del modal con botones Guardar / Cancelar */

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--b1) !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-footinfo {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--t3) !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-footinfo-dirty {
  color: var(--primary) !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-footbtns {
  display: flex !important;
  gap: 8px !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-btn {
  padding: 8px 16px !important;
  border-radius: 8px !important;
  border: 1.5px solid transparent !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  cursor: pointer !important;
  transition: all .14s !important;
  letter-spacing: .2px !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-btn-cancel {
  background: var(--s2) !important;
  border-color: var(--b1) !important;
  color: var(--t2) !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-btn-cancel:hover {
  background: var(--b1) !important;
  color: var(--t1) !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-btn-save {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px var(--color-primary-ring) !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-btn-save:hover:not(:disabled) {
  background: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px var(--color-primary-shadow) !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-btn-save:active:not(:disabled) {
  transform: translateY(0) !important;
}

:root[data-theme="medianoche"] #arctic-wb-modal .arctic-wb-modal-btn-save:disabled {
  background: var(--b1) !important;
  border-color: var(--b1) !important;
  color: var(--t3) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   WIDGETS DENTRO DE #arctic-dv (acordeones del Device View)
   Replica los estilos del widget bar inferior (#arctic-wb), que quedó eliminada.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Filas key/value (widget Dispositivo, Sensores, etc) */

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 2px !important;
  font-size: 11.5px !important;
  white-space: nowrap !important;
  border-bottom: 1px dashed var(--b1) !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow:last-child {
  border-bottom: 0 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon {
  flex: 0 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon {
  color: var(--t3) !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-name {
  color: var(--t2) !important;
  font-weight: 500 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  margin-right: auto !important;
  padding-right: 12px !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-val {
  font-weight: 700 !important;
  color: var(--t1) !important;
  font-family: 'Space Grotesk', monospace !important;
  font-size: 11.5px !important;
}

/* Lista vertical genérica (widget "Dispositivo") */

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
}

/* Iconos coloreados — widget Dispositivo */

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-rows .arctic-wb-srow-icon .icon.address {
  color: var(--color-primary) !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-rows .arctic-wb-srow-icon .icon.time {
  color: #475569 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-rows .arctic-wb-srow-icon .icon.idle {
  color: #B45309 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-rows .arctic-wb-srow-icon .icon.driver {
  color: #7C3AED !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-rows .arctic-wb-srow-icon .icon.engine_hours {
  color: #059669 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-rows .arctic-wb-srow-icon .icon.engine {
  color: #16A34A !important;
}

/* Dirección: 2 líneas, alinea desde arriba */

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow.is-address {
  align-items: flex-start !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  white-space: normal !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow.is-address .arctic-wb-srow-icon {
  margin-top: 2px !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow.is-address .arctic-wb-srow-val {
  white-space: normal !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  line-height: 1.35 !important;
  text-align: right !important;
  font-size: 11px !important;
  word-break: break-word !important;
}

/* Dirección clickable hacia Google Maps */

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-addr-link {
  color: var(--color-primary) !important;
  text-decoration: none !important;
  border-bottom: 1px dashed transparent !important;
  transition: color .15s, border-color .15s !important;
  cursor: pointer !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-addr-link:hover {
  color: var(--color-primary-dark) !important;
  border-bottom-color: var(--color-primary) !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-addr-link span[data-device="address"] {
  color: inherit !important;
}

/* Iconos coloreados por tipo de sensor */

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.engine,:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.ignition {
  color: var(--color-primary) !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.fuel_tank,:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.fuel_consumption {
  color: #F97316 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.temperature {
  color: #DC2626 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.battery,:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.battery_external {
  color: #EAB308 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.tachometer {
  color: #7C3AED !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.satellites {
  color: #16A34A !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.gsm {
  color: #0891B2 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.door {
  color: #B45309 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.seatbelt {
  color: #DC2626 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.rfid {
  color: #7C3AED !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.odometer,:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.engine_hours {
  color: #475569 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.harsh_acceleration,:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.harsh_breaking,:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow-icon .icon.harsh_turning {
  color: #DC2626 !important;
}

/* Estados on/off */

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow.is-on .arctic-wb-srow-icon .icon,:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow.is-on .arctic-wb-srow-val {
  color: #16A34A !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow.is-off .arctic-wb-srow-icon .icon,:root[data-theme="medianoche"] #arctic-dv .arctic-wb-srow.is-off .arctic-wb-srow-val {
  color: #DC2626 !important;
}

/* Velocímetro — más pequeño dentro del acordeón Sensores */

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-sensors {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 0 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-speedo {
  flex: 0 0 90px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-speedo-svg {
  width: 90px !important;
  max-width: 90px !important;
  height: auto !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-speedo-svg .sp-zone {
  transition: stroke-dasharray .8s cubic-bezier(.4,0,.2,1) !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-speedo-svg .sp-needle {
  transform-box: view-box !important;
  transform-origin: 50px 55px !important;
  transition: transform .8s cubic-bezier(.4,0,.2,1) !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-speedo-svg .sp-needle line {
  transition: stroke .3s ease !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-speedo-svg .sp-pivot {
  transition: fill .3s ease !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-speedo-num {
  font-family: 'Space Grotesk', monospace !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  line-height: 1 !important;
  margin-top: -4px !important;
  transition: color .3s ease !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-speedo-unit {
  font-family: 'Space Grotesk', monospace !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  color: var(--t3) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}

/* Lista de sensores al lado del velocímetro */

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-sensorlist {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Body de cualquier acordeón con widget de filas: ancho cómodo y padding parejo */

:root[data-theme="medianoche"] #arctic-dv .arctic-dv-acc-body {
  min-width: 280px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   WIDGET CONDUCTOR
   ══════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-driver {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 4px 0 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-driver-avatar {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #6D28D9 0%, #4F46E5 100%) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Space Grotesk', monospace !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-driver-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-driver-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--t1) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-driver-sub {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--t3) !important;
  font-family: 'Space Grotesk', monospace !important;
  letter-spacing: .02em !important;
  margin-bottom: 4px !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-driver-row {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 11px !important;
  color: var(--t2) !important;
  font-family: 'Space Grotesk', monospace !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-driver-row .icon {
  color: var(--t3) !important;
  font-size: 12px !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-driver-row a {
  color: var(--color-primary) !important;
  text-decoration: none !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-driver-row a:hover {
  text-decoration: underline !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-driver-desc {
  font-size: 10.5px !important;
  color: var(--t3) !important;
  font-style: italic !important;
  line-height: 1.35 !important;
  padding-top: 3px !important;
  border-top: 1px dashed var(--b1) !important;
  margin-top: 3px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   WIDGET MANTENIMIENTO
   ══════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-svcs {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-svc {
  border: 1px solid var(--b1) !important;
  border-left-width: 3px !important;
  border-radius: 7px !important;
  padding: 7px 10px !important;
  background: var(--s2) !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-svc-ok {
  border-left-color: #16A34A !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-svc-warning {
  border-left-color: #F59E0B !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-svc-danger {
  border-left-color: #DC2626 !important;
  background: rgba(220,38,38,.06) !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-svc-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-bottom: 5px !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-svc-name {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--t1) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-svc-left {
  font-size: 11px !important;
  font-weight: 700 !important;
  font-family: 'Space Grotesk', monospace !important;
  color: var(--t2) !important;
  flex: 0 0 auto !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-svc-danger .arctic-wb-svc-left {
  color: #DC2626 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-svc-warning .arctic-wb-svc-left {
  color: #B45309 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-svc-bar {
  height: 4px !important;
  border-radius: 2px !important;
  background: var(--b1) !important;
  overflow: hidden !important;
  margin-bottom: 5px !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-svc-fill {
  height: 100% !important;
  background: #16A34A !important;
  transition: width .4s cubic-bezier(.4,0,.2,1) !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-svc-warning .arctic-wb-svc-fill {
  background: #F59E0B !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-svc-danger  .arctic-wb-svc-fill {
  background: #DC2626 !important;
}

:root[data-theme="medianoche"] #arctic-dv .arctic-wb-svc-meta {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 10px !important;
  color: var(--t3) !important;
  font-family: 'Space Grotesk', monospace !important;
  letter-spacing: .02em !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MODAL HEADER ARCTIC — fix colores (nav-sidebar fuerza todo blanco)
   Especificidad (0,5,0) > nav-sidebar (0,1,0) — ambos con !important
   ══════════════════════════════════════════════════════════════════════════════ */

/* Fondo claro del header modal en Arctic */

:root[data-theme="medianoche"] .modal-content .modal-header {
  background: var(--s2) !important;
  border-bottom: 1px solid rgba(56,189,248,.10) !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

/* Forzar texto oscuro en TODOS los hijos del header (beat nav-sidebar .modal-header *{color:#fff}) */

:root[data-theme="medianoche"] .modal-content .modal-header,:root[data-theme="medianoche"] .modal-content .modal-header * {
  color: #E0EAFF !important;
}

/* Título consola de comandos (.cc-modal-*) */

:root[data-theme="medianoche"] .modal-content .modal-header .cc-modal-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
}

:root[data-theme="medianoche"] .modal-content .modal-header .cc-modal-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  background: var(--color-primary-bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  color: var(--color-primary) !important;
}

:root[data-theme="medianoche"] .modal-content .modal-header .cc-modal-texts {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  line-height: 1 !important;
}

:root[data-theme="medianoche"] .modal-content .modal-header .cc-modal-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #E0EAFF !important;
  letter-spacing: -.01em !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

:root[data-theme="medianoche"] .modal-content .modal-header .cc-modal-sub {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--color-primary) !important;
  letter-spacing: .04em !important;
  font-family: 'Space Grotesk', monospace !important;
}

/* Botón de cierre (X) — visible sobre fondo carbón */

:root[data-theme="medianoche"] .modal-content .modal-header .close {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  background: rgba(120,170,255,.07) !important;
  border: 1.5px solid rgba(120,170,255,.14) !important;
  color: #E0EAFF !important;
  opacity: 1 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: all .15s !important;
  text-shadow: none !important;
}

:root[data-theme="medianoche"] .modal-content .modal-header .close span {
  color: #E0EAFF !important;
  opacity: 1 !important;
}

:root[data-theme="medianoche"] .modal-content .modal-header .close:hover {
  background: rgba(248,113,113,.15) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

:root[data-theme="medianoche"] .modal-content .modal-header .close:hover span {
  color: var(--danger) !important;
}

/* Título genérico (modales sin .cc-modal-title) */

:root[data-theme="medianoche"] .modal-content .modal-header .modal-title {
  color: #E0EAFF !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* ══ BOOTSTRAP-SELECT: dropdown con scroll y texto negro ══ */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu {
  max-height: 220px !important;
  overflow-y: auto !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a span,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a * {
  color: #E0EAFF !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12.5px !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a:hover,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a:hover * {
  color: var(--color-primary) !important;
  background: var(--input-bg) !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.selected > a,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.selected > a * {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  background: rgba(var(--color-primary-rgb), .08) !important;
}

/* Placeholder (primera opción) */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li:first-child > a,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li:first-child > a * {
  color: rgba(224,234,255,.40) !important;
  font-style: italic !important;
}

/* Scrollbar del dropdown */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu::-webkit-scrollbar {
  width: 4px !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(56,189,248,.25) !important;
  border-radius: 2px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   NAV PANEL LINKS — estructura con ícono + título + descripción + chevron
   Clases: .npl-icon, .npl-text, .npl-name, .npl-desc, .npl-arrow
   ══════════════════════════════════════════════════════════════════════════════ */

/* Contenedor del body. Sin max-height para que se ajuste exactamente
   al alto de los links. La cadena padre (.nav-panel-section.active)
   ya tiene su propio max-height: 100vh que limita el conjunto. */

:root[data-theme="medianoche"] #nav-panel .nav-panel-body {
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 0 1 auto !important;
  max-height: none !important;
  gap: 5px !important;
  background: var(--s2) !important;
  overflow-y: visible !important;
}

/* Link base */

:root[data-theme="medianoche"] #nav-panel .nav-panel-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: #F8FAFF !important;
  border: 1px solid rgba(56,189,248,.08) !important;
  cursor: pointer !important;
  transition: all .15s !important;
  text-decoration: none !important;
  margin: 0 !important;
  color: #E0EAFF !important;
  letter-spacing: 0 !important;
}

/* Ícono */

:root[data-theme="medianoche"] #nav-panel .nav-panel-link .npl-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* Texto (título + descripción) */

:root[data-theme="medianoche"] #nav-panel .nav-panel-link .npl-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

:root[data-theme="medianoche"] #nav-panel .nav-panel-link .npl-name {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #E0EAFF !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  line-height: 1.2 !important;
}

:root[data-theme="medianoche"] #nav-panel .nav-panel-link .npl-desc {
  font-size: 10.5px !important;
  color: rgba(224,234,255,.40) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  line-height: 1.2 !important;
}

/* Chevron */

:root[data-theme="medianoche"] #nav-panel .nav-panel-link .npl-arrow {
  color: #CBD5E1 !important;
  flex-shrink: 0 !important;
  transition: color .15s, transform .15s !important;
}

:root[data-theme="medianoche"] #nav-panel .nav-panel-link:hover .npl-arrow {
  color: var(--color-primary) !important;
  transform: translateX(2px) !important;
}

/* Variante peligro (cerrar sesión) */

:root[data-theme="medianoche"] #nav-panel .nav-panel-link.npl-danger {
  background: rgba(220,38,38,.04) !important;
  border-color: rgba(220,38,38,.12) !important;
  margin-top: 4px !important;
}

:root[data-theme="medianoche"] #nav-panel .nav-panel-link.npl-danger .npl-name {
  color: #DC2626 !important;
}

:root[data-theme="medianoche"] #nav-panel .nav-panel-link.npl-danger .npl-desc {
  color: rgba(220,38,38,.6) !important;
}

:root[data-theme="medianoche"] #nav-panel .nav-panel-link.npl-danger:hover {
  background: rgba(220,38,38,.08) !important;
  border-color: rgba(220,38,38,.2) !important;
}

/* Ocultar .icon original (Tobuli iconos) dentro de los nuevos links */

:root[data-theme="medianoche"] #nav-panel .nav-panel-link > .icon,:root[data-theme="medianoche"] #nav-panel .nav-panel-link > span.icon {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FIX GLOBAL FRONTEND — Bootstrap-Select, Dropdowns scroll, Checkboxes
   Aplica a toda la vista de mapa con tema Arctic
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. TODOS los .dropdown-menu con scroll ── */

:root[data-theme="medianoche"] .dropdown-menu {
  max-height: 260px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 1px solid rgba(56,189,248,.15) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.13) !important;
  background: var(--s2) !important;
  padding: 4px !important;
}

/* Menús contextuales (NO selectpicker): ancho por contenido, no por contenedor */

:root[data-theme="medianoche"] .dropdown-menu:not(.bootstrap-select .dropdown-menu):not(.inner) {
  width: auto !important;
  min-width: 160px !important;
  max-width: 300px !important;
}

:root[data-theme="medianoche"] .dropdown-menu::-webkit-scrollbar {
  width: 4px !important;
}

:root[data-theme="medianoche"] .dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--color-primary-tint-strong) !important;
  border-radius: 2px !important;
}

:root[data-theme="medianoche"] .dropdown-menu > li > a {
  border-radius: 7px !important;
  color: #E0EAFF !important;
  font-size: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  padding: 7px 11px !important;
  transition: background .1s !important;
}

:root[data-theme="medianoche"] .dropdown-menu > li > a:hover,:root[data-theme="medianoche"] .dropdown-menu > li.active > a {
  background: var(--input-bg) !important;
  color: var(--color-primary) !important;
}

/* ── 2. BOOTSTRAP-SELECT: doble contenedor eliminado globalmente ── */

:root[data-theme="medianoche"] .bootstrap-select,:root[data-theme="medianoche"] div.bootstrap-select,:root[data-theme="medianoche"] .bootstrap-select.form-control,:root[data-theme="medianoche"] .bootstrap-select.btn-group {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  width: 100%;
  /* sin !important — inline-style de selectPosition() gana en bs-container */
  display: block !important;
  border-radius: 0 !important;
}

:root[data-theme="medianoche"] .bootstrap-select > .dropdown-toggle,:root[data-theme="medianoche"] .bootstrap-select > .dropdown-toggle.btn-default,:root[data-theme="medianoche"] .bootstrap-select.form-control > .dropdown-toggle {
  width: 100% !important;
  height: 34px !important;
  background: var(--input-bg) !important;
  border: 1.5px solid var(--input-border) !important;
  border-radius: var(--input-radius) !important;
  color: var(--input-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  padding: 0 32px 0 10px !important;
  box-shadow: none !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  transition: border-color .15s, box-shadow .15s !important;
}

:root[data-theme="medianoche"] .bootstrap-select > .dropdown-toggle:hover,:root[data-theme="medianoche"] .bootstrap-select > .dropdown-toggle:focus,:root[data-theme="medianoche"] .bootstrap-select.open > .dropdown-toggle {
  background: var(--input-focus-bg) !important;
  border-color: var(--input-focus-border) !important;
  box-shadow: 0 0 0 3px var(--input-focus-ring) !important;
  outline: none !important;
}

/* Dropdown del selectpicker */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu {
  max-height: 220px !important;
  overflow-y: auto !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu > li > a,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a {
  color: var(--input-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

/* ── 3. CHECKBOXES EN DROPDOWN — sin doble cuadro en items, PERO mantener
       visible/clickable el checkbox del .dropdown-header (lo usa bootstrap-select
       para "seleccionar todos los del grupo"). ── */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li:not(.dropdown-header) input[type="checkbox"],:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li:not(.dropdown-header) input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li:not(.dropdown-header) .check-mark {
  display: none !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.selected > a {
  background: rgba(var(--color-primary-rgb), .08) !important;
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

/* Checkbox del header de grupo — visible y clickable, estilo Arctic */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.dropdown-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  user-select: none !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.dropdown-header input[type="checkbox"] {
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  position: static !important;
  opacity: 1 !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 3px !important;
  accent-color: var(--color-primary) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transform: none !important;
}

/* Ocultar la marca visual extra (.check-mark) que bootstrap-select inyecta
   en el header — ya tenemos el checkbox nativo visible. */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.dropdown-header .check-mark,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.dropdown-header::before,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.dropdown-header::after,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.dropdown-header label::before,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.dropdown-header label::after {
  display: none !important;
  content: none !important;
}

/* ── 4. SELECT NATIVO con flecha Arctic ── */

:root[data-theme="medianoche"] select.form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A90BC' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-color: var(--input-bg) !important;
  padding-right: 28px !important;
}

:root[data-theme="medianoche"] select[multiple].form-control {
  background-image: none !important;
  max-height: 180px !important;
  overflow-y: auto !important;
  padding-right: 8px !important;
}

/* ── 5. MODAL-BODY contenida con scroll ── */

:root[data-theme="medianoche"] .modal-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(85vh - 130px) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FIX DROPDOWN — ancho, hover blanco, seleccionado permanente
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Ancho del dropdown: solo bootstrap-select recibe width:100% y left:0 ── */

/* NO aplicar a .open > .dropdown-menu genérico — override !important rompe ddp_set */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  left: 0 !important;
  right: auto !important;
}

/* Para dropdowns con data-position=fixed que se salen */

:root[data-theme="medianoche"] .dropdown-menu[style*="position: fixed"],:root[data-theme="medianoche"] .dropdown-menu[style*="position:fixed"] {
  max-width: 320px !important;
  width: auto !important;
  min-width: 180px !important;
}

/* ── HOVER: texto BLANCO sobre fondo azul ── */

:root[data-theme="medianoche"] .dropdown-menu > li > a:hover,:root[data-theme="medianoche"] .dropdown-menu > li > a:focus,:root[data-theme="medianoche"] .dropdown-menu > li.active > a,:root[data-theme="medianoche"] .dropdown-menu > li.active > a:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}

:root[data-theme="medianoche"] .dropdown-menu > li > a:hover *,:root[data-theme="medianoche"] .dropdown-menu > li > a:focus *,:root[data-theme="medianoche"] .dropdown-menu > li.active > a * {
  color: #fff !important;
}

/* Bootstrap-select: hover blanco */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a:hover,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a:focus,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu > li > a:hover,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu > li > a:focus {
  background: var(--color-primary) !important;
  color: #fff !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a:hover *,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a:hover span,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu > li > a:hover * {
  color: #fff !important;
}

/* ── SELECCIONADO: hover permanente (azul + blanco) ── */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.selected > a,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.selected > a:hover,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu > li.selected > a {
  background: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.selected > a *,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.selected > a span {
  color: #fff !important;
}

/* ── MODAL-BODY: quitar overflow-x:hidden que rompe el ancho del dropdown ── */

:root[data-theme="medianoche"] .modal-body {
  overflow-x: visible !important;
  overflow-y: auto !important;
}

/* El modal-dialog sí contiene el overflow horizontal */

:root[data-theme="medianoche"] .modal-dialog {
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FIX PUNTUAL ALERTAS — dispositivos seleccionados visibles (blanco permanente)
   y multiselect con selección tipo .multiexpand
   ══════════════════════════════════════════════════════════════════════════════ */

/* Multiselect nativo (select[multiple]) — item seleccionado: azul + blanco */

:root[data-theme="medianoche"] .modal-body select[multiple] option:checked,:root[data-theme="medianoche"] .modal-body select.multiexpand option:checked,:root[data-theme="medianoche"] select[multiple].form-control option:checked {
  background: var(--color-primary) linear-gradient(0deg,var(--color-primary),var(--color-primary)) !important;
  color: #fff !important;
}

:root[data-theme="medianoche"] select[multiple].form-control option {
  padding: 5px 8px !important;
  color: #E0EAFF !important;
  border-radius: 5px !important;
}

:root[data-theme="medianoche"] select[multiple].form-control option:hover {
  background: var(--color-primary) linear-gradient(0deg,var(--color-primary),var(--color-primary)) !important;
  color: #fff !important;
}

/* Bootstrap-select multiselect en alertas (.multiexpand) */

:root[data-theme="medianoche"] .alert-form .bootstrap-select .dropdown-menu li.selected > a,:root[data-theme="medianoche"] .bootstrap-select[data-original-title] .dropdown-menu li.selected > a,:root[data-theme="medianoche"] .modal-body .bootstrap-select .dropdown-menu li.selected > a {
  background: var(--color-primary) !important;
  color: #fff !important;
}

:root[data-theme="medianoche"] .modal-body .bootstrap-select .dropdown-menu li.selected > a * {
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FIX DEFINITIVO — dropdown ancho correcto + doble contenedor historial
   ══════════════════════════════════════════════════════════════════════════════ */

/* Corregir: width:100% en position:fixed/absolute → ancho viewport
   Bootstrap-select calcula el ancho del botón automáticamente.
   Usar min-width:100% respeta el botón sin expandir al viewport. */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu,:root[data-theme="medianoche"] .open > .dropdown-menu {
  width: auto !important;
  min-width: 100% !important;
  max-width: none !important;
}

/* Dropdowns body-appended (position:fixed): limitar al ancho del trigger */

:root[data-theme="medianoche"] .dropdown-menu {
  width: auto !important;
  min-width: 160px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FIX FINAL COMPLETO — dropdowns, hover, ancho, items visibles
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. DROPDOWN BODY-APPENDED: ancho automático (bootstrap-select con data-container=body) ──
   Cuando bootstrap-select usa data-container="body", el .dropdown-menu es hijo
   directo del <body>. En ese caso width:auto respeta el JS que calcula el ancho
   del botón trigger. NO usamos width:100% porque sería 100% de la pantalla.    */

/* Dropdowns body-appended: NO pisamos el width que JS calcula (ancho del trigger).
   Solo limitamos el máximo para que no supere el ancho del panel lateral (280px). */

body > .dropdown-menu,body > .bootstrap-select.open > .dropdown-menu {
  max-width: 320px !important;
  min-width: 160px !important;
  width: auto !important;
}

/* El ancho lo fija bootstrap-select JS vía inline style — no lo pisamos */

:root[data-theme="medianoche"] body > .dropdown-menu {
  max-height: 220px !important;
  overflow-y: auto !important;
  border: 1px solid rgba(56,189,248,.18) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.13) !important;
  background: var(--s2) !important;
  padding: 4px !important;
}

/* ── 2. ITEMS DENTRO DE BOOTSTRAP-SELECT: texto siempre visible ── */

/* Aplica a dropdowns body-appended Y dentro de panel */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu .inner li > a,:root[data-theme="medianoche"] body > .dropdown-menu li > a {
  color: #E0EAFF !important;
  background: transparent !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
  display: block !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Texto dentro del link */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a .text,:root[data-theme="medianoche"] body > .dropdown-menu li > a .text {
  display: inline !important;
  color: inherit !important;
  background: transparent !important;
}

/* ── 3. CHECK-MARK: completamente oculto en todos los contextos ── */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li .check-mark,:root[data-theme="medianoche"] body > .dropdown-menu li .check-mark,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu .check-mark,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu .glyphicon {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ── 4. HOVER: azul + blanco SIN cuadro visible ── */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a:hover,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu .inner li > a:hover,:root[data-theme="medianoche"] body > .dropdown-menu li > a:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}

/* Todos los hijos del link en hover → blancos, sin background */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a:hover *,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a:hover span,:root[data-theme="medianoche"] body > .dropdown-menu li > a:hover *,:root[data-theme="medianoche"] body > .dropdown-menu li > a:hover span {
  color: #fff !important;
  background: transparent !important;
}

/* ── 5. SELECCIONADO: hover permanente ── */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.selected > a,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu .inner li.selected > a,:root[data-theme="medianoche"] body > .dropdown-menu li.selected > a {
  background: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.selected > a *,:root[data-theme="medianoche"] body > .dropdown-menu li.selected > a * {
  color: #fff !important;
  background: transparent !important;
}

/* ── 6. INNER ul de bootstrap-select: altura y scroll ── */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu .inner,:root[data-theme="medianoche"] body > .dropdown-menu .inner {
  max-height: 200px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar,:root[data-theme="medianoche"] body > .dropdown-menu .inner::-webkit-scrollbar {
  width: 4px !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-thumb {
  background: var(--color-primary-ring) !important;
  border-radius: 2px !important;
}

/* ── 7. OVERRIDE FINAL: eliminar width:100% de dropdowns globales ──
   Solo los dropdowns que NO son body-appended usan width:100% ── */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu {
  width: 100% !important;
  /* correcto: 100% del .bootstrap-select padre */
  min-width: 0 !important;
  max-height: none !important;
  /* el .inner maneja el scroll, no el wrapper */
  overflow: visible !important;
}

/* ── 8. NAV-PANEL: evitar que el hover global de nav-sidebar pise los dropdowns ── */

:root[data-theme="medianoche"] #nav-panel .bootstrap-select .dropdown-menu li > a,:root[data-theme="medianoche"] #nav-panel .bootstrap-select .dropdown-menu li > a:not(.btn) {
  color: #E0EAFF !important;
  background: transparent !important;
}

:root[data-theme="medianoche"] #nav-panel .bootstrap-select .dropdown-menu li > a:hover,:root[data-theme="medianoche"] #nav-panel .bootstrap-select .dropdown-menu li > a:hover:not(.btn) {
  background: var(--color-primary) !important;
  color: #fff !important;
}

/* ── 9. BS-CONTAINER (data-container="body"): z-index para el frontend ──
   nav-sidebar.css pone z-index:9999 en .dropdown del panel,   el bs-container debe estar POR ENCIMA para que la lista no quede detrás. */

:root[data-theme="medianoche"] body > .bs-container,:root[data-theme="medianoche"] .bootstrap-select.btn-group.bs-container {
  position: fixed !important;
  height: 0 !important;
  z-index: 9998 !important;
  pointer-events: none !important;
}

:root[data-theme="medianoche"] body > .bs-container .dropdown-menu,:root[data-theme="medianoche"] .bootstrap-select.btn-group.bs-container .dropdown-menu {
  z-index: 9998 !important;
  background: var(--s2) !important;
  pointer-events: all !important;
}

/* ── 10. PREVENIR DROPUP automático ──
   Bootstrap-select puede abrir el dropdown hacia arriba cuando detecta poco espacio
   abajo. Desactivamos dropupAuto via JS (en layouts) y lo reforzamos con CSS. */

:root[data-theme="medianoche"] .bootstrap-select.dropup .dropdown-menu {
  top: 100% !important;
  bottom: auto !important;
  margin-top: 2px !important;
  margin-bottom: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL ALERTAS — fixes específicos
   1) Switches cortados en pestaña Notificaciones (.col-xs-1 estrecho para switch 38px)
   2) Barra de pestañas (.nav-tabs.nav-default) sin centrado vertical
   ═══════════════════════════════════════════════════════════════════════════ */

/* (1a) Barra de pestañas del modal — centrado vertical y altura consistente */

:root[data-theme="medianoche"] #alerts_create .nav-tabs.nav-default,:root[data-theme="medianoche"] #alerts_edit .nav-tabs.nav-default {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0 8px !important;
  background: var(--s2, #141E3F) !important;
}

:root[data-theme="medianoche"] #alerts_create .nav-tabs.nav-default > li,:root[data-theme="medianoche"] #alerts_edit .nav-tabs.nav-default > li {
  display: flex !important;
  align-items: center !important;
  height: 44px !important;
  margin-bottom: 0 !important;
  float: none !important;
}

:root[data-theme="medianoche"] #alerts_create .nav-tabs.nav-default > li > a,:root[data-theme="medianoche"] #alerts_edit .nav-tabs.nav-default > li > a {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 14px !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* (1c) Pestaña Tipo — overflow visible para que el dropdown inline no se recorte */

:root[data-theme="medianoche"] #alerts-form-type {
  overflow: visible !important;
}

/* (2) Pestaña Notificaciones — switch no se corta
       .col-xs-1 = 8.33% (~75px en modal-lg) menos 30px de padding bootstrap = 45px
       El switch arctic mide 38px; bajamos padding-left a 8px para asegurar holgura
       y damos padding-right 4px para acercarlo al label. */

:root[data-theme="medianoche"] #alerts-form-notifications .form-group {
  display: flex !important;
  align-items: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

:root[data-theme="medianoche"] #alerts-form-notifications .form-group > .col-xs-1 {
  flex: 0 0 56px !important;
  width: 56px !important;
  max-width: 56px !important;
  padding-left: 8px !important;
  padding-right: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

:root[data-theme="medianoche"] #alerts-form-notifications .form-group > .col-xs-11 {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
}

:root[data-theme="medianoche"] #alerts-form-notifications .form-group .checkbox {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-height: unset !important;
}

:root[data-theme="medianoche"] #alerts-form-notifications .form-group .checkbox input[type="checkbox"] {
  margin-left: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HISTORY TAB (sidebar) — entrada al panel /history-panel
   Form simple: dispositivo + atajos rápidos + (opcional) form personalizado.
   Clases .hp-* exclusivas de este contexto, no chocan con nada.
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] #history_tab .tab-pane-header {
  padding: 12px !important;
  background: var(--s1) !important;
}

:root[data-theme="medianoche"] #history_tab .hp-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

:root[data-theme="medianoche"] #history_tab .hp-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

:root[data-theme="medianoche"] #history_tab .hp-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--t3, rgba(224,234,255,.40)) !important;
  font-family: 'Space Grotesk', monospace !important;
  margin: 0 !important;
}

:root[data-theme="medianoche"] #history_tab .hp-input {
  width: 100% !important;
  height: 32px !important;
  background: var(--input-bg) !important;
  border: 1.5px solid var(--input-border) !important;
  border-radius: var(--input-radius) !important;
  padding: 0 10px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  color: var(--input-text) !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: border-color .15s, box-shadow .15s !important;
  box-sizing: border-box !important;
}

:root[data-theme="medianoche"] #history_tab select.hp-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237A90BC' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 28px !important;
}

:root[data-theme="medianoche"] #history_tab .hp-input:focus {
  border-color: var(--input-focus-border) !important;
  background: var(--input-focus-bg) !important;
  box-shadow: 0 0 0 3px var(--input-focus-ring) !important;
}

/* Atajos rápidos: chips clickeables */

:root[data-theme="medianoche"] #history_tab .hp-shortcuts {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}

:root[data-theme="medianoche"] #history_tab .hp-chip {
  height: 32px !important;
  background: var(--s2) !important;
  border: 1.5px solid rgba(56,189,248,.18) !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--t2, rgba(224,234,255,.58)) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  cursor: pointer !important;
  transition: all .13s !important;
  padding: 0 10px !important;
}

:root[data-theme="medianoche"] #history_tab .hp-chip:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: var(--color-primary-bg-soft) !important;
}

:root[data-theme="medianoche"] #history_tab .hp-chip:active,:root[data-theme="medianoche"] #history_tab .hp-chip.on {
  background: var(--color-primary-bg) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* Form personalizado (expandible) */

:root[data-theme="medianoche"] #history_tab .hp-custom {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 10px !important;
  background: var(--s2, #141E3F) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(56,189,248,.08) !important;
}

:root[data-theme="medianoche"] #history_tab .hp-row {
  display: flex !important;
  gap: 6px !important;
}

:root[data-theme="medianoche"] #history_tab .hp-row > .hp-input {
  flex: 1 !important;
}

/* Botón primario — colores centralizados (cambiar las vars en :root) */

:root[data-theme="medianoche"] #history_tab .hp-btn-primary {
  height: 34px !important;
  border-radius: 8px !important;
  background: var(--color-primary) !important;
  color: var(--color-text-inv) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  box-shadow: 0 2px 8px var(--color-primary-ring) !important;
  transition: background .13s !important;
}

:root[data-theme="medianoche"] #history_tab .hp-btn-primary:hover {
  background: var(--color-primary-dark) !important;
}

/* Hint */

:root[data-theme="medianoche"] #history_tab .hp-hint {
  font-size: 10.5px !important;
  color: var(--t3, rgba(224,234,255,.40)) !important;
  text-align: center !important;
  margin-top: 4px !important;
  line-height: 1.4 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAB "IMAGEN" del modal Editar dispositivo (#device-form-image)
   Reemplaza al widget legacy. Preview + botones subir/borrar.
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] #device-form-image .dev-image-tab {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 20px 16px !important;
}

:root[data-theme="medianoche"] #device-form-image .dev-image-preview {
  width: 100% !important;
  max-width: 360px !important;
  height: 200px !important;
  border: 1.5px solid var(--b2) !important;
  border-radius: 10px !important;
  background: var(--s2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

:root[data-theme="medianoche"] #device-form-image .dev-image-thumb {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

:root[data-theme="medianoche"] #device-form-image .dev-image-placeholder {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--t3) !important;
  font-size: 12.5px !important;
  font-style: italic !important;
}

:root[data-theme="medianoche"] #device-form-image .dev-image-placeholder .icon {
  font-size: 32px !important;
  opacity: .55 !important;
}

:root[data-theme="medianoche"] #device-form-image .dev-image-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

:root[data-theme="medianoche"] #device-form-image .dev-image-actions .btn {
  min-width: 110px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DROPDOWN DE ACCIONES dentro del MODAL de Geocercas (engranaje en cada fila)
   Solo estilo de los items — la visibilidad open/closed la maneja Bootstrap JS
   (no forzamos display: none/block para no colisionar con bootstrap-select).
   ══════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] .modal .btn-group.dropdown:not(.bootstrap-select) > .dropdown-menu,:root[data-theme="medianoche"] .modal .btn-group.dropleft:not(.bootstrap-select) > .dropdown-menu {
  background: var(--color-surface-1) !important;
  border: 1px solid var(--color-border-1) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 6px !important;
  min-width: 140px !important;
  z-index: 1080 !important;
}

:root[data-theme="medianoche"] .modal .btn-group.dropdown:not(.bootstrap-select) > .dropdown-menu > li,:root[data-theme="medianoche"] .modal .btn-group.dropleft:not(.bootstrap-select) > .dropdown-menu > li,:root[data-theme="medianoche"] .modal .btn-group.dropdown:not(.bootstrap-select) > .dropdown-menu > li > a,:root[data-theme="medianoche"] .modal .btn-group.dropleft:not(.bootstrap-select) > .dropdown-menu > li > a {
  list-style: none !important;
}

:root[data-theme="medianoche"] .modal .btn-group.dropdown:not(.bootstrap-select) > .dropdown-menu > li > a,:root[data-theme="medianoche"] .modal .btn-group.dropleft:not(.bootstrap-select) > .dropdown-menu > li > a {
  display: block !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--color-text-2) !important;
  background: transparent !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  line-height: 1.3 !important;
}

:root[data-theme="medianoche"] .modal .btn-group.dropdown:not(.bootstrap-select) > .dropdown-menu > li > a:hover,:root[data-theme="medianoche"] .modal .btn-group.dropleft:not(.bootstrap-select) > .dropdown-menu > li > a:hover {
  background: var(--color-primary-bg) !important;
  color: var(--color-primary) !important;
}

/* El modal-body NO debe cortar dropdowns (engranajes), incluso con overflow auto */

:root[data-theme="medianoche"] #geofences_modal .modal-body,:root[data-theme="medianoche"] .modal:has(#table_geofences) .modal-body {
  overflow: visible !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SUB-VIEW DEL SIDEBAR (Geocercas / Rutas / POIs)
   Cuando #panel-devices.sub-view-active está activo, el header del sidebar ya
   provee búsqueda y "+" contexto-aware (ver script en loged.blade.php). Por eso
   ocultamos la barra de búsqueda+"+" duplicada que vive dentro del propio tab,   dejando intactos los botones extra (lápiz para grupos, etc.).
   ══════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] #panel-devices.sub-view-active #geofencing_tab > .tab-pane-header .form-group.search,:root[data-theme="medianoche"] #panel-devices.sub-view-active #routes_tab > .tab-pane-header .form-group.search,:root[data-theme="medianoche"] #panel-devices.sub-view-active #pois_tab > .tab-pane-header .form-group.search {
  display: none !important;
}

:root[data-theme="medianoche"] #panel-devices.sub-view-active #geofencing_tab > .tab-pane-header .input-group-btn .btn-primary,:root[data-theme="medianoche"] #panel-devices.sub-view-active #routes_tab > .tab-pane-header .input-group-btn .btn-primary,:root[data-theme="medianoche"] #panel-devices.sub-view-active #pois_tab > .tab-pane-header .input-group-btn .btn-primary {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FILA DE BOTONES Guardar/Cancelar — `.buttons` (panels del Mapa: geocercas, etc.)
   Lado a lado, anchos iguales, esquinas redondeadas, altura compacta.
   ══════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] .buttons {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 14px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
}

:root[data-theme="medianoche"] .buttons.text-center {
  justify-content: center !important;
}

:root[data-theme="medianoche"] .buttons > .btn,:root[data-theme="medianoche"] .buttons > a.btn {
  flex: 0 1 130px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 150px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border-radius: var(--input-radius) !important;
  white-space: nowrap !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RADIO BUTTONS — ahora <label class="radio-inline"> envuelve directo al input.
   Estilo nativo limpio con accent-color del primary Arctic. Sin scroll-jump.
   ══════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] label.radio-inline,:root[data-theme="medianoche"] .form-group label.radio-inline,:root[data-theme="medianoche"] div.radio-inline,:root[data-theme="medianoche"] .form-group div.radio-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-right: 16px !important;
  cursor: pointer !important;
  /* Reset del padding-left:20px que Bootstrap pone para alojar el radio
     que normalmente sería position:absolute. Acá lo dejamos en flujo. */
  padding: 0 !important;
  position: relative !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--color-text-2) !important;
  user-select: none !important;
}

:root[data-theme="medianoche"] .radio-inline input[type="radio"],:root[data-theme="medianoche"] .form-group .radio-inline input[type="radio"] {
  -webkit-appearance: radio !important;
  appearance: radio !important;
  /* CRÍTICO: anular el position:absolute y margin-left:-20px que Bootstrap
     pone en .radio-inline input[type="radio"]; con flex layout, el radio
     debe estar en flujo normal junto al texto. */
  position: static !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  accent-color: var(--color-primary) !important;
  background: none !important;
  border: none !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   OJO para mostrar/ocultar contraseñas — wrapper aplicado por JS
   (window.attachPasswordEyeToggles). Se renderiza un botón a la derecha del input.
   ══════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] .pwd-eye-wrap {
  position: relative !important;
  display: block !important;
}

:root[data-theme="medianoche"] .pwd-eye-wrap > input[type="password"],:root[data-theme="medianoche"] .pwd-eye-wrap > input[type="text"] {
  padding-right: 38px !important;
}

:root[data-theme="medianoche"] .pwd-eye-btn {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  color: var(--color-text-3) !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: color .12s, background .12s !important;
  z-index: 2 !important;
  /* sobre el input */
  pointer-events: auto !important;
}

:root[data-theme="medianoche"] .pwd-eye-btn:hover {
  color: var(--color-primary) !important;
  background: var(--color-primary-bg) !important;
}

:root[data-theme="medianoche"] .pwd-eye-btn svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  pointer-events: none !important;
  /* clicks pasan al botón padre */
}

/* ══════════════════════════════════════════════════════════════════════════════
   LISTA DE DISPOSITIVOS para asignar a sub-usuarios — checkboxes nativos, no
   se les aplica el switch-toggle global (porque ese es para .checkbox).
   ══════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] .subuser-device-list {
  border: 1px solid var(--input-border) !important;
  border-radius: var(--input-radius) !important;
  padding: 6px 10px !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  background: var(--input-bg) !important;
}

:root[data-theme="medianoche"] .subuser-device-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--color-text-2) !important;
  user-select: none !important;
}

:root[data-theme="medianoche"] .subuser-device-row input[type="checkbox"] {
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  position: static !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  accent-color: var(--color-primary) !important;
  background: none !important;
  border: none !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

:root[data-theme="medianoche"] .subuser-device-row span {
  flex: 1 !important;
  line-height: 1.3 !important;
}

:root[data-theme="medianoche"] .subuser-device-row:hover {
  color: var(--color-primary) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ICONOS DE ACCIÓN EN TABLAS (.btn.icon.edit / .btn.icon.delete / .btn.icon.trash)
   ─────────────────────────────────────────────────────────────────────────────
   El override global de `.btn` cambia font-family a Plus Jakarta Sans, lo que
   rompe los glifos del icomoon. Aquí forzamos el font icon, fondo transparente,   color neutro para edit y rojo para delete/trash, con hover azul/rojo Arctic.
   ══════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] .btn.icon,:root[data-theme="medianoche"] a.btn.icon,:root[data-theme="medianoche"] .table .btn.icon,:root[data-theme="medianoche"] .table-list .btn.icon,:root[data-theme="medianoche"] td.actions .btn.icon,:root[data-theme="medianoche"] td.actions a.btn.icon {
  font-family: 'icomoon' !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 6px !important;
  height: auto !important;
  min-width: 0 !important;
  color: var(--color-text-3) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Edit (lápiz): hover azul Arctic */

:root[data-theme="medianoche"] .btn.icon.edit:hover,:root[data-theme="medianoche"] td.actions .btn.icon.edit:hover {
  color: var(--color-primary) !important;
  background: var(--color-primary-bg) !important;
  border-radius: 6px !important;
}

/* Delete / trash: rojo siempre, hover más oscuro */

:root[data-theme="medianoche"] .btn.icon.delete,:root[data-theme="medianoche"] .btn.icon.trash,:root[data-theme="medianoche"] td.actions .btn.icon.delete,:root[data-theme="medianoche"] td.actions .btn.icon.trash {
  color: var(--color-danger) !important;
}

:root[data-theme="medianoche"] .btn.icon.delete:hover,:root[data-theme="medianoche"] .btn.icon.trash:hover,:root[data-theme="medianoche"] td.actions .btn.icon.delete:hover,:root[data-theme="medianoche"] td.actions .btn.icon.trash:hover {
  color: #B91C1C !important;
  background: var(--color-danger-bg) !important;
  border-radius: 6px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BOTONES PRIMARIOS DE LA VISTA MAPA (Arctic)
   ─────────────────────────────────────────────────────────────────────────────
   Todos los botones de "acción primaria" que aparecen en cualquier modal,   panel o sub-vista que se abra desde el Mapa deben usar el azul claro del
   tema (var(--color-primary)). En facelift.css quedan con el azul-oscuro del
   tema base, así que los re-pintamos acá con !important para ganar siempre.

   Cambia --color-primary-rgb en :root y todos cambian de golpe.
   NO toca .fdb-tab-btn (navbar superior) ni los módulos del nav superior.
   ══════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] .btn-action,:root[data-theme="medianoche"] a.btn-action,:root[data-theme="medianoche"] button.btn-action,:root[data-theme="medianoche"] .btn.btn-action,:root[data-theme="medianoche"] .btn-side,:root[data-theme="medianoche"] .btn-save,:root[data-theme="medianoche"] .btn-done,:root[data-theme="medianoche"] .days-mode-btn.active,:root[data-theme="medianoche"] .action-btn.btn-blue,:root[data-theme="medianoche"] .add-btn-main {
  background: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  background-image: none !important;
  color: var(--color-text-inv) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 2px 8px var(--color-primary-ring) !important;
}

:root[data-theme="medianoche"] .btn-action:hover,:root[data-theme="medianoche"] .btn-action:focus,:root[data-theme="medianoche"] .btn-action:active,:root[data-theme="medianoche"] .btn-action.active,:root[data-theme="medianoche"] .btn.btn-action:hover,:root[data-theme="medianoche"] .btn.btn-action:focus,:root[data-theme="medianoche"] .btn-side:hover,:root[data-theme="medianoche"] .btn-side:focus,:root[data-theme="medianoche"] .btn-save:hover,:root[data-theme="medianoche"] .btn-save:focus,:root[data-theme="medianoche"] .btn-done:hover,:root[data-theme="medianoche"] .btn-done:focus,:root[data-theme="medianoche"] .days-mode-btn.active:hover,:root[data-theme="medianoche"] .action-btn.btn-blue:hover,:root[data-theme="medianoche"] .add-btn-main:hover {
  background: var(--color-primary-dark) !important;
  background-color: var(--color-primary-dark) !important;
  color: var(--color-text-inv) !important;
  border-color: var(--color-primary-dark) !important;
}

:root[data-theme="medianoche"] .btn-action[disabled],:root[data-theme="medianoche"] .btn-action.disabled,:root[data-theme="medianoche"] .btn-side[disabled],:root[data-theme="medianoche"] .btn-save[disabled],:root[data-theme="medianoche"] .btn-done[disabled] {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-text-inv) !important;
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MODAL "Agregar/Editar dispositivo" — caja flexbox con header/body/footer
   visibles; el body crece y hace scroll interno. Nunca excede el viewport.
   ══════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] #devices_create .modal-dialog,:root[data-theme="medianoche"] #devices_edit .modal-dialog,:root[data-theme="medianoche"] #devices_update .modal-dialog {
  width: 940px !important;
  max-width: 97vw !important;
  margin-top: 50px !important;
  margin-bottom: 16px !important;
  height: calc(100vh - 66px) !important;
  max-height: calc(100vh - 66px) !important;
}

:root[data-theme="medianoche"] #devices_create .modal-content,:root[data-theme="medianoche"] #devices_edit .modal-content,:root[data-theme="medianoche"] #devices_update .modal-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
}

:root[data-theme="medianoche"] #devices_create .modal-header,:root[data-theme="medianoche"] #devices_edit .modal-header,:root[data-theme="medianoche"] #devices_update .modal-header,:root[data-theme="medianoche"] #devices_create .modal-footer,:root[data-theme="medianoche"] #devices_edit .modal-footer,:root[data-theme="medianoche"] #devices_update .modal-footer {
  flex: 0 0 auto !important;
}

:root[data-theme="medianoche"] #devices_create .modal-body,:root[data-theme="medianoche"] #devices_edit .modal-body,:root[data-theme="medianoche"] #devices_update .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
}

/* Multiexpand (lista inline del bootstrap-select) — alto fijo cómodo dentro del modal */

:root[data-theme="medianoche"] #devices_create .multiexpand .dropdown-menu,:root[data-theme="medianoche"] #devices_edit .multiexpand .dropdown-menu,:root[data-theme="medianoche"] #devices_update .multiexpand .dropdown-menu,:root[data-theme="medianoche"] #devices_create .bootstrap-select.multiexpand .inner,:root[data-theme="medianoche"] #devices_edit .bootstrap-select.multiexpand .inner,:root[data-theme="medianoche"] #devices_update .bootstrap-select.multiexpand .inner {
  max-height: 320px !important;
  min-height: 180px !important;
  overflow-y: auto !important;
}

/* btn-primary: ya está centralizado en la sección base de .btn-primary,   pero algunos contextos lo pintan oscuro vía facelift. Forzamos primary acá. */

:root[data-theme="medianoche"] .modal .btn-primary,:root[data-theme="medianoche"] .panel .btn-primary,:root[data-theme="medianoche"] form .btn-primary,:root[data-theme="medianoche"] .btn.btn-primary {
  background: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  color: var(--color-text-inv) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 2px 8px var(--color-primary-ring) !important;
}

:root[data-theme="medianoche"] .modal .btn-primary:hover,:root[data-theme="medianoche"] .panel .btn-primary:hover,:root[data-theme="medianoche"] form .btn-primary:hover,:root[data-theme="medianoche"] .btn.btn-primary:hover,:root[data-theme="medianoche"] .modal .btn-primary:focus,:root[data-theme="medianoche"] .btn.btn-primary:focus,:root[data-theme="medianoche"] .btn.btn-primary:active {
  background: var(--color-primary-dark) !important;
  background-color: var(--color-primary-dark) !important;
  color: var(--color-text-inv) !important;
  border-color: var(--color-primary-dark) !important;
}

/* ════════════════════════════════════════════════════════════════
   PARIDAD CON ARCTIC: reglas que faltaban en Carbon
   ════════════════════════════════════════════════════════════════ */

/* (1) Nombre del device — manejado por el bloque principal STACK style */

/* (2) Modal close X — boton 28x28 con hover rojo */

:root[data-theme="medianoche"] .modal-header .close {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--t2) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transition: var(--transition-fast) !important;
  text-shadow: none !important;
}

:root[data-theme="medianoche"] .modal-header .close:hover {
  background: rgba(248,113,113,.12) !important;
  color: var(--danger) !important;
  border-color: rgba(248,113,113,.30) !important;
}

/* (3) Items del dropdown 3-puntos en panel-devices */

:root[data-theme="medianoche"] #panel-devices .dropdown-menu > li > a {
  color: #E0EAFF !important;
  background: transparent !important;
}

:root[data-theme="medianoche"] #panel-devices .dropdown-menu > li > a:hover {
  background: rgba(56,189,248,.12) !important;
  color: rgb(56,189,248) !important;
}

/* ════════════════════════════════════════════════════════════════
   PARIDAD CON ARCTIC: reglas que faltaban
   ════════════════════════════════════════════════════════════════ */

/* (1) Nombre del device — manejado por el bloque principal STACK style */

/* (2) Modal close X */

:root[data-theme="medianoche"] .modal-header .close {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--t2) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transition: var(--transition-fast) !important;
  text-shadow: none !important;
}

:root[data-theme="medianoche"] .modal-header .close:hover {
  background: rgba(248,113,113,.12) !important;
  color: var(--danger) !important;
  border-color: rgba(248,113,113,.30) !important;
}

/* (3) Items del dropdown 3-puntos en panel-devices */

:root[data-theme="medianoche"] #panel-devices .dropdown-menu > li > a {
  color: #E0EAFF !important;
  background: transparent !important;
}

:root[data-theme="medianoche"] #panel-devices .dropdown-menu > li > a:hover {
  background: rgba(56,189,248,.12) !important;
  color: rgb(56,189,248) !important;
}

/* ════════════════════════════════════════════════════════════════
   FIX: actionsbox (Seleccionar/Deseleccionar todo) + dropdown-header
   en multiselect bootstrap-select. Por defecto venian con bg blanco.
   ════════════════════════════════════════════════════════════════ */

:root[data-theme="medianoche"] .bootstrap-select .bs-actionsbox {
  padding: 4px 6px !important;
  background: #141E3F !important;
  border-bottom: 1px solid rgba(56,189,248,.18) !important;
}

:root[data-theme="medianoche"] .bootstrap-select .bs-actionsbox .btn-group {
  display: flex !important;
  gap: 4px !important;
  width: 100% !important;
}

:root[data-theme="medianoche"] .bootstrap-select .bs-actionsbox .btn-group .actions-btn,:root[data-theme="medianoche"] .bootstrap-select .bs-actionsbox .btn-group button {
  flex: 1 !important;
  background: #0F1730 !important;
  background-color: #0F1730 !important;
  border: 1px solid rgba(56,189,248,.18) !important;
  color: #E0EAFF !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all .12s !important;
}

:root[data-theme="medianoche"] .bootstrap-select .bs-actionsbox .btn-group .actions-btn:hover,:root[data-theme="medianoche"] .bootstrap-select .bs-actionsbox .btn-group button:hover {
  background: rgba(56,189,248,.12) !important;
  background-color: rgba(56,189,248,.12) !important;
  border-color: rgba(56,189,248,.40) !important;
  color: rgb(56,189,248) !important;
}

/* Dropdown header (separador de grupos: "SIN GRUPO", "CAMIONES", etc.) */

:root[data-theme="medianoche"] .dropdown-menu .dropdown-header,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu .dropdown-header {
  background: #141E3F !important;
  color: rgb(56,189,248) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: 6px 10px !important;
  border-top: 1px solid rgba(56,189,248,.12) !important;
  border-bottom: 1px solid rgba(56,189,248,.12) !important;
}

/* Items con texto bajo contraste — forzar contraste alto */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a span.text {
  color: #E0EAFF !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.disabled > a,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.disabled > a * {
  color: #8A93A6 !important;
  opacity: .6 !important;
}

/* Mejorar contraste de tabs inactivos (estaban en text-3 = casi invisible) */

:root[data-theme="medianoche"] .nav-tabs > li > a {
  color: #8A93A6 !important;
}

:root[data-theme="medianoche"] .nav-tabs > li > a:hover,:root[data-theme="medianoche"] .nav-tabs > li > a:focus {
  color: #E0EAFF !important;
}

:root[data-theme="medianoche"] .nav-tabs > li.active > a {
  color: rgb(56,189,248) !important;
}

/* Botones "+" pequenos / icon-plus / btn-row-add poco visibles en dark */

:root[data-theme="medianoche"] .btn-add,:root[data-theme="medianoche"] a.btn-add,:root[data-theme="medianoche"] .icon.plus,:root[data-theme="medianoche"] .icon-plus,:root[data-theme="medianoche"] .btn[class*="plus"],:root[data-theme="medianoche"] .btn-row-add,:root[data-theme="medianoche"] .btn-add-row {
  background: rgba(56,189,248,.15) !important;
  border: 1px solid rgba(56,189,248,.40) !important;
  color: rgb(56,189,248) !important;
  border-radius: 6px !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all .12s !important;
}

:root[data-theme="medianoche"] .btn-add:hover,:root[data-theme="medianoche"] a.btn-add:hover,:root[data-theme="medianoche"] .icon.plus:hover,:root[data-theme="medianoche"] .icon-plus:hover {
  background: rgba(56,189,248,.25) !important;
  border-color: rgb(56,189,248) !important;
  color: #E0EAFF !important;
}

/* ════════════════════════════════════════════════════════════════
   FIX: contenedores blancos dentro de modales en dark theme
   (bootstrap-select inner, nav-tabs en modal, schedule grid)
   ════════════════════════════════════════════════════════════════ */

/* bootstrap-select .inner (lista scrollable de items multiselect) */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu > .inner,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu .inner,:root[data-theme="medianoche"] .bootstrap-select.multiexpand .dropdown-menu > .inner,:root[data-theme="medianoche"] .bootstrap-select.multiexpand .dropdown-menu .inner {
  background: #0F1730 !important;
  background-color: #0F1730 !important;
}

/* Items default state (no solo hover) */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu .inner li > a,:root[data-theme="medianoche"] .bootstrap-select.multiexpand .dropdown-menu li > a {
  background: transparent !important;
  background-color: transparent !important;
  color: #E0EAFF !important;
}

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a span.text,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li > a span:not(.check-mark) {
  color: #E0EAFF !important;
}

/* Items disabled (greyed out devices) */

:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.disabled > a,:root[data-theme="medianoche"] .bootstrap-select .dropdown-menu li.disabled > a * {
  color: #8A93A6 !important;
  opacity: .6 !important;
}

/* nav-tabs DENTRO del modal — fondo transparente para que herede el dark */

:root[data-theme="medianoche"] .modal .modal-body > .nav-tabs,:root[data-theme="medianoche"] .modal-body > .nav-tabs,:root[data-theme="medianoche"] .modal .nav.nav-tabs.nav-default {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(56,189,248,.15) !important;
}

:root[data-theme="medianoche"] .modal .modal-body > .nav-tabs > li > a,:root[data-theme="medianoche"] .modal-body > .nav-tabs > li > a {
  background: transparent !important;
  color: #8A93A6 !important;
}

:root[data-theme="medianoche"] .modal .modal-body > .nav-tabs > li > a:hover,:root[data-theme="medianoche"] .modal-body > .nav-tabs > li > a:hover {
  color: #E0EAFF !important;
}

:root[data-theme="medianoche"] .modal .modal-body > .nav-tabs > li.active > a,:root[data-theme="medianoche"] .modal-body > .nav-tabs > li.active > a {
  background: transparent !important;
  color: rgb(56,189,248) !important;
  border-bottom: 2px solid rgb(56,189,248) !important;
}

/* tab-content / tab-pane — bg transparente para heredar modal-body dark */

:root[data-theme="medianoche"] .modal .tab-content,:root[data-theme="medianoche"] .modal .tab-content > .tab-pane {
  background: transparent !important;
  background-color: transparent !important;
}

/* Schedule grid (alertas → tab Horario) — bg dark con borde primary-α */

:root[data-theme="medianoche"] .alerts-schedule-grid,:root[data-theme="medianoche"] .schedule-grid,:root[data-theme="medianoche"] .schedule-rows,:root[data-theme="medianoche"] [class*="schedule"]:not([class*="day"]) {
  background: #141E3F !important;
  border-color: rgba(56,189,248,.15) !important;
}

:root[data-theme="medianoche"] .schedule-grid td,:root[data-theme="medianoche"] .alerts-schedule-grid td {
  border-color: rgba(56,189,248,.10) !important;
  background: #0F1730 !important;
}

:root[data-theme="medianoche"] .schedule-grid td.selected,:root[data-theme="medianoche"] .schedule-grid td.active,:root[data-theme="medianoche"] .alerts-schedule-grid td.selected,:root[data-theme="medianoche"] .alerts-schedule-grid td.active {
  background: rgba(56,189,248,.30) !important;
}

/* ════════════════════════════════════════════════════════════════
   STACK SIDEBAR REFRESH (medianoche)
   Rail (#nav-icons + .nav-icon) → cards verticales con icon top + label bottom,   active solid primary + text-inv, STACK offset shadow.
   Sub-panel (#panel-devices) → header limpio, tabs underline, filtros chip,   group band oscuro contrastado, lista device como card row.
   Selectores con :root[data-theme="medianoche"] para ganar especificidad sobre
   las reglas legacy más arriba en el archivo.
   ════════════════════════════════════════════════════════════════ */

/* ─── Rail #nav-icons ─── */

:root[data-theme="medianoche"] #nav-icons {
  background: var(--s2) !important;
  width: 76px !important;
  min-width: 76px !important;
  padding: 8px 6px !important;
  gap: 6px !important;
  border-right: 1px solid var(--b1) !important;
  box-shadow: 2px 0 12px rgba(0,0,0,.06) !important;
}

/* Esconder los emojis ::before legacy — ya tenemos SVGs inline en el HTML */

:root[data-theme="medianoche"] #nav-icons .nav-icon::before {
  content: none !important;
  display: none !important;
}

/* Card del rail: icon arriba + label abajo, papel apilado */

:root[data-theme="medianoche"] #nav-icons .nav-icon,:root[data-theme="medianoche"] #nav-icons a.nav-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 56px !important;
  padding: 8px 4px !important;
  margin: 0 !important;
  background: var(--s1) !important;
  border: 1px solid var(--b2) !important;
  border-radius: 10px !important;
  color: var(--t1) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  box-shadow: 2px 2px 0 #0A1020 !important;
  transform: none !important;
  position: relative !important;
  overflow: visible !important;
}

:root[data-theme="medianoche"] #nav-icons .nav-icon:hover,:root[data-theme="medianoche"] #nav-icons a.nav-icon:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 #0A1020 !important;
  background: var(--s1) !important;
  color: var(--color-primary) !important;
}

:root[data-theme="medianoche"] #nav-icons .nav-icon.active,:root[data-theme="medianoche"] #nav-icons .nav-icon.selected,:root[data-theme="medianoche"] #nav-icons a.nav-icon.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary-dark) !important;
  color: var(--color-text-inv) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0 var(--color-primary-bg),    4px 4px 0 1px var(--color-primary-border) !important;
}

/* SVG icon adentro del rail */

:root[data-theme="medianoche"] #nav-icons .nav-icon .ni-svg {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  fill: none !important;
  flex-shrink: 0 !important;
  filter: none !important;
}

/* Label del rail */

:root[data-theme="medianoche"] #nav-icons .nav-icon .nav-label {
  display: block !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: inherit !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  max-width: 64px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ─── Sub-panel #nav-panel + .nav-panel-section ─── */

:root[data-theme="medianoche"] #nav-panel {
  left: 76px !important;
  background: transparent !important;
  border-right: 0 !important;
  box-shadow: none !important;
  padding: 8px 8px 0 8px !important;
}

:root[data-theme="medianoche"] #nav-panel.open {
  width: 380px !important;
}

:root[data-theme="medianoche"] #nav-panel .nav-panel-section {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.06) !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
}

/* ─── Header del panel: title + search + add ─── */

:root[data-theme="medianoche"] #panel-devices > .nav-panel-header,:root[data-theme="medianoche"] #panel-devices > #panel-devices-header {
  background: var(--s1) !important;
  border-bottom: 1px solid var(--b1) !important;
  padding: 12px 14px !important;
  height: auto !important;
  min-height: 0 !important;
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;
}

:root[data-theme="medianoche"] #panel-devices .panel-header-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--t1) !important;
  flex-shrink: 0 !important;
  margin-right: 4px !important;
}

:root[data-theme="medianoche"] .sidebar-search-input {
  flex: 1 !important;
  height: 32px !important;
  background: var(--s2) !important;
  border: 1px solid var(--b2) !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--t1) !important;
  outline: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

:root[data-theme="medianoche"] .sidebar-search-input::placeholder {
  color: var(--t3) !important;
}

:root[data-theme="medianoche"] .sidebar-search-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .12) !important;
  background: var(--s1) !important;
}

:root[data-theme="medianoche"] .panel-header-add-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: var(--s2) !important;
  border: 1px solid var(--b2) !important;
  color: var(--t1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all .15s ease !important;
  text-decoration: none !important;
}

:root[data-theme="medianoche"] .panel-header-add-btn:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary-dark) !important;
  color: var(--color-text-inv) !important;
}

:root[data-theme="medianoche"] .panel-header-add-btn .icon {
  font-size: 16px !important;
  color: inherit !important;
}

:root[data-theme="medianoche"] .panel-header-add-btn .icon::before {
  content: '+' !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* ─── Tabs (Dispositivos/Eventos/Historial) ─── */

:root[data-theme="medianoche"] #panel-devices .nav-tabs {
  background: var(--s1) !important;
  border-bottom: 1px solid var(--b1) !important;
  padding: 0 14px !important;
  display: flex !important;
  gap: 0 !important;
}

:root[data-theme="medianoche"] #panel-devices .nav-tabs > li {
  margin: 0 !important;
}

:root[data-theme="medianoche"] #panel-devices .nav-tabs > li > a {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--t3) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: color .15s ease, border-color .15s ease !important;
}

:root[data-theme="medianoche"] #panel-devices .nav-tabs > li > a:hover {
  color: var(--t1) !important;
  border-bottom-color: var(--b2) !important;
  background: transparent !important;
}

:root[data-theme="medianoche"] #panel-devices .nav-tabs > li.active > a,:root[data-theme="medianoche"] #panel-devices .nav-tabs > li.active > a:focus,:root[data-theme="medianoche"] #panel-devices .nav-tabs > li.active > a:hover {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
  background: transparent !important;
  font-weight: 700 !important;
}

/* ─── Chips de filtro #device-filter-bar ─── */

:root[data-theme="medianoche"] #device-filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 12px 14px !important;
  background: var(--s1) !important;
  border-bottom: 1px solid var(--b1) !important;
  margin: 0 !important;
}

:root[data-theme="medianoche"] #device-filter-bar .dfb-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  height: 26px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--t1) !important;
  background: var(--s1) !important;
  border: 1px solid var(--b2) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  outline: none !important;
}

:root[data-theme="medianoche"] #device-filter-bar .dfb-btn:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

:root[data-theme="medianoche"] #device-filter-bar .dfb-btn.dfb-active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-text-inv) !important;
}

:root[data-theme="medianoche"] #device-filter-bar .dfb-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* ─── Group heading: banda oscura ─── */

:root[data-theme="medianoche"] #ajax-items .group {
  margin-bottom: 0 !important;
  background: var(--s1) !important;
}

:root[data-theme="medianoche"] #ajax-items .group-heading {
  background: var(--color-primary) !important;
  color: var(--color-text-inv) !important;
  padding: 4px 14px !important;
  min-height: 0 !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  line-height: 1.2 !important;
}

:root[data-theme="medianoche"] #ajax-items .group-heading * {
  color: var(--color-text-inv) !important;
}

/* Ocultar el checkbox del grupo (no en la referencia) */

:root[data-theme="medianoche"] #ajax-items .group-heading > .checkbox {
  display: none !important;
}

/* Reset display: table-cell legacy → flex item normal.
   La base CSS pone max-width:1px en .group-title (que en table-layout se
   expande pero en flex layout se respeta y colapsa el texto). */

:root[data-theme="medianoche"] #ajax-items .group-heading > .group-title,:root[data-theme="medianoche"] #ajax-items .group-heading > .btn-group,:root[data-theme="medianoche"] #ajax-items .group-heading > .checkbox {
  display: block !important;
  width: auto !important;
}

:root[data-theme="medianoche"] #ajax-items .group-heading .group-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  cursor: pointer !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  position: relative !important;
}

/* Esconder el chevron ::after legacy (arrow del collapse) — el grupo se
   colapsa con click en el título igual */

:root[data-theme="medianoche"] #ajax-items .group-heading .group-title::after {
  display: none !important;
  content: none !important;
}

:root[data-theme="medianoche"] #ajax-items .group-heading .group-title .count {
  opacity: .85 !important;
  font-weight: 600 !important;
  margin-left: 2px !important;
}

/* Botón 3-dots del grupo: ir a la derecha del band, tamaño pequeño */

:root[data-theme="medianoche"] #ajax-items .group-heading > .btn-group {
  margin-left: auto !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  position: static !important;
  float: none !important;
  width: auto !important;
}

:root[data-theme="medianoche"] #ajax-items .group-heading .btn.icon.options,:root[data-theme="medianoche"] #ajax-items .group-heading .icon.options {
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  color: var(--color-text-inv) !important;
  opacity: .8 !important;
  transition: opacity .15s ease, background .15s ease !important;
}

:root[data-theme="medianoche"] #ajax-items .group-heading .btn.icon.options:hover,:root[data-theme="medianoche"] #ajax-items .group-heading .icon.options:hover {
  opacity: 1 !important;
  background: rgba(255,255,255,.12) !important;
}

/* ─── Lista de devices: card-row ─── */

:root[data-theme="medianoche"] #ajax-items ul.group-list,:root[data-theme="medianoche"] #ajax-items .group-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--s1) !important;
}

:root[data-theme="medianoche"] #ajax-items li[data-device-id] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  background: var(--s1) !important;
  border-bottom: 1px solid var(--b1) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  cursor: pointer !important;
  transition: background .15s ease !important;
}

:root[data-theme="medianoche"] #ajax-items li[data-device-id]:hover {
  background: var(--s2) !important;
}

:root[data-theme="medianoche"] #ajax-items li[data-device-id]:last-child {
  border-bottom: 0 !important;
}

:root[data-theme="medianoche"] #ajax-items li[data-device-id] .checkbox {
  display: none !important;
  /* checkbox a la izquierda no en la referencia */
}

:root[data-theme="medianoche"] #ajax-items li[data-device-id] .name {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

:root[data-theme="medianoche"] #ajax-items li[data-device-id] .name [data-device="name"] {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--t1) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

:root[data-theme="medianoche"] #ajax-items li[data-device-id] .name [data-device="time"] {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--t3) !important;
  font-variant-numeric: tabular-nums !important;
}

:root[data-theme="medianoche"] #ajax-items li[data-device-id] .details {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

:root[data-theme="medianoche"] #ajax-items li[data-device-id] .details [data-device="speed"] {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--t2) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Status dot: el span con bg color inline → hacerlo un dot 8px */

:root[data-theme="medianoche"] #ajax-items li[data-device-id] [data-device="status"] {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  flex-shrink: 0 !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Engine icon: pequeño, gris cuando off, primary cuando on */

:root[data-theme="medianoche"] #ajax-items li[data-device-id] [data-device="detect_engine"] {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  color: var(--t3) !important;
}

:root[data-theme="medianoche"] #ajax-items li[data-device-id] [data-device="detect_engine"].on {
  color: var(--color-primary) !important;
}

/* Botón options (3-dots) */

:root[data-theme="medianoche"] #ajax-items li[data-device-id] .btn-group .icon.options {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  color: var(--t3) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}

:root[data-theme="medianoche"] #ajax-items li[data-device-id] .btn-group .icon.options:hover {
  background: var(--s2) !important;
  color: var(--t1) !important;
}

/* /STACK SIDEBAR REFRESH (medianoche) */

/* ══════════════════════════════════════════════════════════════════════
   nav-sidebar.css — variables consumidas via var(--nav-primary,...) etc. */

:root[data-theme="medianoche"] {
  --nav-primary: #0A1020;
  --nav-on-primary: rgb(56,189,248);
  --nav-on-primary-muted: rgba(56,189,248,.65);
  --nav-icon-active-bg: rgba(56,189,248,.12);
  --panel-bg: #0A1020;
  --text-color: #E0EAFF;
  --text-muted: #8A93A6;
  --gray-text: #8A93A6;
  --muted-text: #6A7185;
  --nav-hover-bg: rgba(56,189,248,.12);
  --nav-hover-text: rgb(56,189,248);
}