/* ══════════════════════════════════════════════════════════════════════════════
   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");

/* ══ DESIGN TOKENS / CSS VARIABLES ══ */
:root {
  /* Background surfaces */
  --color-bg:           #0D0D0D;
  --color-surface-1:    #141414;
  --color-surface-2:    #1C1C1C;
  --color-surface-3:    #222222;

  /* 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(255, 255, 255, .07);
  --color-border-2:     rgba(255, 255, 255, .14);
  --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:       #E8E0D0;
  --color-text-2:       #8C877E;
  --color-text-3:       #4A4844;
  /* 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:        201, 168, 76;
  --color-primary-dark-rgb:   138, 106, 30;
  --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:      #15803D;
  --color-success-bg:   rgba(21, 128, 61, .10);
  --color-warning:      #B45309;
  --color-warning-bg:   rgba(180, 83, 9, .10);
  --color-danger:       #DC2626;
  --color-danger-bg:    rgba(220, 38, 38, .10);
  --color-purple:       #6D28D9;
  --color-purple-bg:    rgba(109, 40, 217, .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: 'DM 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,
.fas,
.far,
.fal,
.fab,
.fad,
[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="carbon"] .checkbox,
:root[data-theme="carbon"] .checkboxes .checkbox,
:root[data-theme="carbon"] .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="carbon"] .checkbox::before,
:root[data-theme="carbon"] .checkbox::after {
  display: none !important;
  content: none !important;
}

/* INPUT = track + knob visual */
:root[data-theme="carbon"] .checkbox input[type="checkbox"],
:root[data-theme="carbon"] .checkboxes .checkbox input[type="checkbox"],
:root[data-theme="carbon"] .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="carbon"] .checkbox input[type="checkbox"]:checked,
:root[data-theme="carbon"] .checkboxes .checkbox input[type="checkbox"]:checked,
:root[data-theme="carbon"] .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="carbon"] .checkbox label,
:root[data-theme="carbon"] .checkboxes .checkbox label,
:root[data-theme="carbon"] .form-group .checkbox label {
  padding-left: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  font-size: 12.5px !important;
  color: rgba(232,224,208,.58) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  flex: 1 !important;
}
:root[data-theme="carbon"] .checkbox label::before,
:root[data-theme="carbon"] .checkbox label::after {
  display: none !important;
  content: none !important;
}

/* EXCEPCIÓN: dropdown-menu y tablas — checkbox normal */
:root[data-theme="carbon"] .dropdown-menu .checkbox input[type="checkbox"],
:root[data-theme="carbon"] .table .checkbox input[type="checkbox"],
:root[data-theme="carbon"] td input[type="checkbox"],
:root[data-theme="carbon"] 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 #1C1C1C, 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="carbon"] .form-control,
:root[data-theme="carbon"] 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="carbon"] select,
:root[data-theme="carbon"] 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="carbon"] .form-control:focus,
:root[data-theme="carbon"] 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="carbon"] select:focus,
:root[data-theme="carbon"] 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="carbon"] .form-control::placeholder,
:root[data-theme="carbon"] input::placeholder,
:root[data-theme="carbon"] textarea::placeholder {
  color: var(--input-placeholder) !important;
  opacity: 1 !important;
}

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

:root[data-theme="carbon"] select,
:root[data-theme="carbon"] 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="carbon"] 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="carbon"] 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="carbon"] input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0 !important;
  border-radius: 5px !important;
}
:root[data-theme="carbon"] input[type="color"]::-webkit-color-swatch {
  border: 1px solid var(--input-border) !important;
  border-radius: 5px !important;
}
:root[data-theme="carbon"] 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="carbon"] .bootstrap-select .btn.dropdown-toggle,
:root[data-theme="carbon"] .bootstrap-select button.dropdown-toggle,
:root[data-theme="carbon"] button.bootstrap-select-dropdown-toggle,
:root[data-theme="carbon"] .form-group .bootstrap-select > .btn,
:root[data-theme="carbon"] .form-group .bootstrap-select.btn-group > .btn,
:root[data-theme="carbon"] .modal .bootstrap-select > .btn,
:root[data-theme="carbon"] .modal .bootstrap-select.btn-group > .btn,
:root[data-theme="carbon"] .panel .bootstrap-select > .btn,
:root[data-theme="carbon"] .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="carbon"] .bootstrap-select.open .btn.dropdown-toggle,
:root[data-theme="carbon"] .bootstrap-select .btn.dropdown-toggle:hover,
:root[data-theme="carbon"] .bootstrap-select .btn.dropdown-toggle:focus,
:root[data-theme="carbon"] .form-group .bootstrap-select > .btn:hover,
:root[data-theme="carbon"] .form-group .bootstrap-select > .btn:focus,
:root[data-theme="carbon"] .modal .bootstrap-select > .btn:hover,
:root[data-theme="carbon"] .modal .bootstrap-select > .btn:focus,
:root[data-theme="carbon"] .panel .bootstrap-select > .btn:hover,
:root[data-theme="carbon"] .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="carbon"] .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="carbon"] div.input-group-addon {
  background: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(201,168,76,.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="carbon"] 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: #E8E0D0 !important;
  font-weight: 600 !important;
}
:root[data-theme="carbon"] 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="carbon"] div.input-group-addon label {
  margin: 0 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #E8E0D0 !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="carbon"] #widgets .widget-heading,
:root[data-theme="carbon"] #widgets .widget > .widget-heading,
:root[data-theme="carbon"] #widgetsbar #widgets .widget-heading {
  background-color: var(--color-primary) !important;
  color: #0D0D0D !important;
}
:root[data-theme="carbon"] #widgets .widget-heading *,
:root[data-theme="carbon"] #widgets .widget > .widget-heading *,
:root[data-theme="carbon"] #widgetsbar #widgets .widget-heading * {
  color: #0D0D0D !important;
}
:root[data-theme="carbon"] #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="carbon"] #widgets .widget-body {
  background: var(--s1) !important;
  color: var(--t1) !important;
}
:root[data-theme="carbon"] #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:#E8E0D0  --topbar-h:44px  --iconbar-w:72px  --panel-w:360px
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. MODULE BAR (#fdb-tabs) — barra superior completa estilo prototipo
   ───────────────────────────────────────────────────────────────────────────── */
:root[data-theme="carbon"] #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: #141414 !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="carbon"] .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="carbon"] .mb-mark { display: none !important; }
:root[data-theme="carbon"] .mb-name { display: none !important; }

/* Brand igual al admin (.aa-brand) */
:root[data-theme="carbon"] .mb-brand {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1 !important;
  gap: 3px !important;
}
:root[data-theme="carbon"] .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="carbon"] .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="carbon"] .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="carbon"] .fdb-tab-btn:hover {
  color: rgba(255,255,255,.85) !important;
  background: rgba(255,255,255,.05) !important;
  box-shadow: none !important;
}
:root[data-theme="carbon"] .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="carbon"] .fdb-tab-btn svg {
  width: 14px !important; height: 14px !important;
  opacity: .7 !important; flex-shrink: 0 !important;
}
:root[data-theme="carbon"] .fdb-tab-btn.fdb-tab-active svg { opacity: 1 !important; }

/* Parte derecha del module bar (usuario) */
:root[data-theme="carbon"] .mb-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
:root[data-theme="carbon"] .mb-icon-btn {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: rgba(255,255,255,.07);
  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="carbon"] .mb-icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
:root[data-theme="carbon"] .mb-icon-btn svg { width: 14px; height: 14px; }

/* Toggle de cinemática del mapa (topbar) */
:root[data-theme="carbon"] .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(255,255,255,.07) !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="carbon"] .mb-cinematic-toggle:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
:root[data-theme="carbon"] .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="carbon"] .mb-cinematic-toggle.on:hover { background: rgba(34,197,94,.25) !important; }
:root[data-theme="carbon"] .mb-cinematic-toggle.off {
  opacity: .55 !important;
}
:root[data-theme="carbon"] .mb-cinematic-toggle svg { flex-shrink: 0; }
@media (max-width: 900px) {
  :root[data-theme="carbon"] .mb-cinematic-toggle .mb-cinematic-label { display: none !important; }
  :root[data-theme="carbon"] .mb-cinematic-toggle { padding: 0 8px !important; }
}

:root[data-theme="carbon"] .mb-notif {
  position: absolute; top: -2px; right: -2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #DC2626; border: 2px solid #E8E0D0;
  font-size: 7px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
:root[data-theme="carbon"] .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="carbon"] .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;
}
:root[data-theme="carbon"] .mb-uname {
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,.75);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  max-width: 120px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. ICON BAR (#nav-icons) — 72px con etiquetas, #E8E0D0, debajo del module bar
   ───────────────────────────────────────────────────────────────────────────── */
:root[data-theme="carbon"] #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="carbon"] #nav-icons.nav-hidden {
  transform: translateX(-72px) !important;
}

/* Cada item es una "tarjeta" blanca con borde azul y icono+label centrados */
:root[data-theme="carbon"] .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="carbon"] .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="carbon"] .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="carbon"] .nav-icon > .icon,
:root[data-theme="carbon"] .nav-icon > i {
  display: none !important;
}
/* Mayor especificidad: agregamos #nav-icons al selector para ganar a la regla
   `:root[data-theme="carbon"] #nav-icons .nav-icon { color: rgba(255,255,255,.45) }`
   que estaba bajando la opacidad heredada del color a los emojis. */
:root[data-theme="carbon"] #nav-icons .nav-icon::before,
:root[data-theme="carbon"] #nav-icons .nav-icon:hover::before,
:root[data-theme="carbon"] #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="carbon"] .nav-icon[data-panel="devices"]::before    { content: '🚗'; }
:root[data-theme="carbon"] .nav-icon[data-panel="alerts"]::before     { content: '🔔'; }
:root[data-theme="carbon"] .nav-icon[data-panel="geofences"]::before  { content: '📍'; }
:root[data-theme="carbon"] .nav-icon[data-panel="events"]::before     { content: '⚡'; }
:root[data-theme="carbon"] .nav-icon[data-panel="gprs"]::before       { content: '📡'; }
:root[data-theme="carbon"] .nav-icon[data-modal="device_console"]::before { content: '💬'; }
:root[data-theme="carbon"] a.nav-icon[href*="admin"]::before          { content: '🛠️'; }
:root[data-theme="carbon"] .nav-icon[data-panel="settings"]::before   { content: '⚙️'; }
:root[data-theme="carbon"] .nav-icon[data-panel="account"]::before    { content: '👤'; }
:root[data-theme="carbon"] .nav-icon[data-panel="theme"]::before      { content: '🎨'; }
:root[data-theme="carbon"] .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="carbon"] #nav-icons .nav-icon:hover .nav-label,
:root[data-theme="carbon"] #nav-icons .nav-icon.active .nav-label {
  color: #FFFFFF !important;
  text-shadow: 0 0 8px rgba(201,168,76,.6), 0 1px 2px rgba(0,0,0,.6) !important;
}
/* Separador entre grupos del icon bar */
:root[data-theme="carbon"] .nav-icon-sep {
  width: 36px; height: 1px;
  background: var(--b1, rgba(201,168,76,.08)) !important;
  margin: 4px auto; flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. SIDE PANEL (#nav-panel) — top 44px, left 72px, 360px abierto
   ───────────────────────────────────────────────────────────────────────────── */
:root[data-theme="carbon"] #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="carbon"] #nav-panel.open { width: 360px !important; }

/* Animación fluida del panel desplegable al abrir/cerrar */
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #panel-devices > .nav-panel-header,
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #panel-devices .sidebar-content > .nav.nav-tabs {
  flex-shrink: 0 !important;
}
/* tab-content se ajusta al contenido */
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #nav-panel.nav-hidden { transform: translateX(-72px) !important; }

/* Panel header — estilo prototipo (fondo claro, texto oscuro) */
:root[data-theme="carbon"] .nav-panel-header {
  background: var(--s2, #1C1C1C) !important;
  color: #E8E0D0 !important;
  border-bottom: 1px solid rgba(201,168,76,.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="carbon"] .nav-panel-header * { color: #E8E0D0 !important; }

/* Nav tabs in panel */
:root[data-theme="carbon"] #nav-panel .nav-tabs {
  background: var(--s2) !important;
  border-bottom: 1px solid rgba(201,168,76,.08) !important;
}
:root[data-theme="carbon"] #nav-panel .nav-tabs > li > a {
  color: rgba(232,224,208,.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="carbon"] #nav-panel .nav-tabs > li.active > a,
:root[data-theme="carbon"] #nav-panel .nav-tabs > li.active > a:focus,
:root[data-theme="carbon"] #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="carbon"] .nav-panel-link {
  border-radius: 9px !important;
  background: var(--s2, #1C1C1C) !important;
  border: 1px solid rgba(201,168,76,.08) !important;
  margin-bottom: 7px !important;
  padding: 10px 12px !important;
  color: #E8E0D0 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
:root[data-theme="carbon"] .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="carbon"] #mapWrap  { top: 44px !important; }
:root[data-theme="carbon"] #map-controls { top: 52px !important; width: auto !important; align-items: flex-end !important; }
:root[data-theme="carbon"] #map-controls > div { width: auto !important; }
:root[data-theme="carbon"] #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="carbon"] #map-controls .btn-group-vertical {
  background: var(--s2) !important;
  border: 1px solid rgba(201,168,76,.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="carbon"] #map-controls button.btn,
:root[data-theme="carbon"] #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(232,224,208,.58) !important;
  border: none !important;
  border-bottom: 1px solid rgba(201,168,76,.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="carbon"] #map-controls button.btn:last-child,
:root[data-theme="carbon"] #map-controls label.btn:last-child {
  border-bottom: none !important;
}

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

/* Focus — sin ring visual */
:root[data-theme="carbon"] #map-controls button.btn:focus,
:root[data-theme="carbon"] #map-controls label.btn:focus {
  background: var(--s2) !important;
  color: rgba(232,224,208,.58) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Active (pulsado momentáneamente) */
:root[data-theme="carbon"] #map-controls button.btn:active,
:root[data-theme="carbon"] #map-controls label.btn:active {
  background: #0D0D0D !important;
  color: var(--color-primary) !important;
  box-shadow: none !important;
}

/* Activado permanente: clase .active (Bootstrap) o checkbox checked */
:root[data-theme="carbon"] #map-controls button.btn.active,
:root[data-theme="carbon"] #map-controls label.btn.active,
:root[data-theme="carbon"] #map-controls label.btn:has(input:checked) {
  background: #0D0D0D !important;
  color: var(--color-primary) !important;
  box-shadow: none !important;
}

/* Todo dentro del botón hereda el color del botón */
:root[data-theme="carbon"] #map-controls button.btn *,
:root[data-theme="carbon"] #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="carbon"] #map-controls .btn-group-vertical.open,
:root[data-theme="carbon"] #map-controls .btn-group-vertical.open button.btn,
:root[data-theme="carbon"] #map-controls .btn-group-vertical.open label.btn {
  background: var(--s2) !important;
  box-shadow: none !important;
}
:root[data-theme="carbon"] #map-controls .btn-group-vertical.open {
  border: 1px solid rgba(201,168,76,.16) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.10) !important;
}

/* Tooltips Bootstrap (data-placement="left") */
:root[data-theme="carbon"] #map-controls .tooltip.left .tooltip-arrow {
  border-left-color: #E8E0D0 !important;
}
:root[data-theme="carbon"] #map-controls .tooltip-inner {
  background: #1C1C1C !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="carbon"] #map-controls .layer-label {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: rgba(232,224,208,.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="carbon"] {
  --s1:#141414; --s2:#1C1C1C; --s3:#222222;
  --b1: rgba(255,255,255,.07);
  --b2: rgba(255,255,255,.14);
  --t1: #E8E0D0;
  --t2: #8C877E;
  --t3: #4A4844;
  --primary: #C9A84C;
  --primary-dk: #8A6A1E;
  --primary-bg: rgba(201,168,76,.12);
  --primary-ring: rgba(201,168,76,.22);
  --success: #4ADE80;
  --warning: #FBB724;
  --danger: #F87171;
  --panel-w: 360px;
  --topbar-h: 44px;
  --iconbar-w: 72px;
  --hover-bg: var(--s2);
  /* Carbon-specific */
  --bg: #0D0D0D;
  --ac: #C9A84C; --ac2: #8A6A1E; --acb: rgba(201,168,76,.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="carbon"] y afectas TODO.
   ══════════════════════════════════════════════════════════════════════ */
:root[data-theme="carbon"] .list-group-item:hover,
:root[data-theme="carbon"] a.list-group-item:hover,
:root[data-theme="carbon"] .dropdown-menu > li > a:hover,
:root[data-theme="carbon"] .dropdown-menu > li > a:focus,
:root[data-theme="carbon"] .dropdown-menu > li:hover > a,
:root[data-theme="carbon"] .btn-group .dropdown-menu > li > a:hover,
:root[data-theme="carbon"] .btn-group .dropdown-menu > li > a:focus,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu.inner > li > a:hover,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu.inner > li > a:focus,
:root[data-theme="carbon"] .device-item:hover,
:root[data-theme="carbon"] .object-item:hover,
:root[data-theme="carbon"] .item-row:hover,
:root[data-theme="carbon"] #object-list .list-group-item:hover,
:root[data-theme="carbon"] #panel-devices .list-group-item:hover,
:root[data-theme="carbon"] #objects_tab .object-item:hover,
:root[data-theme="carbon"] #objects_tab .item-row:hover,
:root[data-theme="carbon"] .group-list > li:hover,
:root[data-theme="carbon"] #panel-devices .group-list > li:hover,
:root[data-theme="carbon"] .table-hover > tbody > tr:hover,
:root[data-theme="carbon"] .table.table-list > tbody > tr:hover,
:root[data-theme="carbon"] .nav-panel-link:hover,
:root[data-theme="carbon"] #nav-panel .nav-panel-link:hover,
:root[data-theme="carbon"] #nav-panel .list-group-item:hover,
:root[data-theme="carbon"] #nav-panel .nav-panel-section .nav-panel-body .nav-panel-link:hover,
:root[data-theme="carbon"] #nav-panel a:hover,
:root[data-theme="carbon"] .ev-card:hover,
:root[data-theme="carbon"] #events_tab .ev-card:hover,
:root[data-theme="carbon"] .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="carbon"] .pagination > li > a:hover,
:root[data-theme="carbon"] .pagination > li > span:hover,
:root[data-theme="carbon"] .nav-tabs > li > a:hover,
:root[data-theme="carbon"] .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 #C9A84C
   cuando el alias no resuelve). */
:root[data-theme="carbon"] .table-hover > tbody > tr:hover > td,
:root[data-theme="carbon"] .table-hover > tbody > tr:hover > th,
:root[data-theme="carbon"] .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="carbon"] .list-group-item:hover *,
:root[data-theme="carbon"] .dropdown-menu > li > a:hover *,
:root[data-theme="carbon"] .btn-group .dropdown-menu > li > a:hover *,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu.inner > li > a:hover *,
:root[data-theme="carbon"] .group-list > li:hover *,
:root[data-theme="carbon"] #panel-devices .group-list > li:hover * {
  color: var(--t1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUDITORÍA HOVER — anula el azul oscuro del fallback var(--nav-hover-bg, #C9A84C)
   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="carbon"] .dropdown-menu > li > a:focus:not(.btn),
:root[data-theme="carbon"] .dropdown-menu > li > a:hover:not(.btn),
:root[data-theme="carbon"] .btn-group .dropdown-menu > li > a:focus:not(.btn),
:root[data-theme="carbon"] .btn-group .dropdown-menu > li > a:hover:not(.btn),
/* (2) bootstrap-select dropdown */
:root[data-theme="carbon"] .bootstrap-select.btn-group .dropdown-menu.inner > li > a:hover,
:root[data-theme="carbon"] .bootstrap-select.btn-group .dropdown-menu.inner > li > a:focus,
:root[data-theme="carbon"] .bootstrap-select.btn-group .dropdown-menu.inner > li.selected > a:hover,
:root[data-theme="carbon"] .bootstrap-select.btn-group .dropdown-menu.inner > li.selected > a:focus,
/* (3) #panel-devices dropdowns y bootstrap-select */
:root[data-theme="carbon"] #panel-devices .dropdown-menu.inner > li > a:hover,
:root[data-theme="carbon"] #panel-devices .dropdown-menu.inner > li:hover > a,
:root[data-theme="carbon"] #panel-devices .dropdown-menu.inner > li > a:focus,
:root[data-theme="carbon"] #panel-devices .dropdown-menu.inner > li:focus > a,
:root[data-theme="carbon"] #panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li > a:hover,
:root[data-theme="carbon"] #panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li:hover > a,
:root[data-theme="carbon"] #panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li > a:focus,
:root[data-theme="carbon"] #panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li:focus > a,
/* (4) #panel-devices .btn-group.droparrow */
:root[data-theme="carbon"] #panel-devices .btn-group.droparrow .dropdown-menu > li > a:focus,
:root[data-theme="carbon"] #panel-devices .btn-group.droparrow .dropdown-menu > li > a:hover,
/* (5) Listas .nav, .list-group-item, group-list celdas internas */
:root[data-theme="carbon"] .nav > li > a:focus:not(.btn),
:root[data-theme="carbon"] .nav > li > a:hover:not(.btn),
:root[data-theme="carbon"] .list-group-item:hover,
:root[data-theme="carbon"] #panel-devices .group-list > li:hover > .checkbox,
:root[data-theme="carbon"] #panel-devices .group-list > li:hover > .details,
:root[data-theme="carbon"] #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="carbon"] .dropdown-menu > li > a:focus:not(.btn) *,
:root[data-theme="carbon"] .dropdown-menu > li > a:hover:not(.btn) *,
:root[data-theme="carbon"] .btn-group .dropdown-menu > li > a:focus:not(.btn) *,
:root[data-theme="carbon"] .btn-group .dropdown-menu > li > a:hover:not(.btn) *,
:root[data-theme="carbon"] .bootstrap-select.btn-group .dropdown-menu.inner > li > a:hover *,
:root[data-theme="carbon"] .bootstrap-select.btn-group .dropdown-menu.inner > li > a:focus *,
:root[data-theme="carbon"] #panel-devices .dropdown-menu.inner > li > a:hover *,
:root[data-theme="carbon"] #panel-devices .dropdown-menu.inner > li:hover > a *,
:root[data-theme="carbon"] #panel-devices .dropdown-menu.inner > li > a:focus *,
:root[data-theme="carbon"] #panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li > a:hover *,
:root[data-theme="carbon"] #panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li:hover > a *,
:root[data-theme="carbon"] #panel-devices .bootstrap-select.btn-group .dropdown-menu.inner > li > a:focus *,
:root[data-theme="carbon"] #panel-devices .btn-group.droparrow .dropdown-menu > li > a:focus *,
:root[data-theme="carbon"] #panel-devices .btn-group.droparrow .dropdown-menu > li > a:hover *,
:root[data-theme="carbon"] .nav > li > a:focus:not(.btn) *,
:root[data-theme="carbon"] .nav > li > a:hover:not(.btn) *,
:root[data-theme="carbon"] .list-group-item:hover *,
:root[data-theme="carbon"] #panel-devices .group-list > li:hover > .checkbox *,
:root[data-theme="carbon"] #panel-devices .group-list > li:hover > .details *,
:root[data-theme="carbon"] #panel-devices .group-list > li:hover > .name * {
  color: var(--t1) !important;
}

/* ─── ICON BAR (#nav-icons .nav-icon) → .ib-item ─── */
:root[data-theme="carbon"] #nav-icons .nav-icon,
:root[data-theme="carbon"] #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="carbon"] #nav-icons .nav-icon:hover,
:root[data-theme="carbon"] #nav-icons a.nav-icon:hover {
  background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.85) !important;
}
:root[data-theme="carbon"] #nav-icons .nav-icon.open,
:root[data-theme="carbon"] #nav-icons .nav-icon.active {
  background: rgba(var(--color-primary-rgb), .3) !important; color: #fff !important;
}
:root[data-theme="carbon"] #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="carbon"] #nav-icons .nav-icon .icon,
:root[data-theme="carbon"] #nav-icons .nav-icon i.fa {
  display: none !important;
}

/* Separador entre íconos */
:root[data-theme="carbon"] #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="carbon"] #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 #E8E0D0 !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="carbon"] #nav-panel {
  background: transparent !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* ─── PANEL SECTION HEADER (.nav-panel-header) → .panel-hd ─── */
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #nav-panel .nav-tabs > li {
  float: none !important; flex: 1 !important; margin-bottom: 0 !important;
}
:root[data-theme="carbon"] #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="carbon"] #nav-panel .nav-tabs > li > a:hover {
  color: var(--t2) !important; background: transparent !important;
  border-color: transparent transparent var(--b2) !important;
}
:root[data-theme="carbon"] #nav-panel .nav-tabs > li.active > a,
:root[data-theme="carbon"] #nav-panel .nav-tabs > li.active > a:focus,
:root[data-theme="carbon"] #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="carbon"] #nav-panel .sidebar-content {
  background: var(--s1) !important;
  padding: 0 !important;
}
:root[data-theme="carbon"] #nav-panel .sidebar-content .tab-content {
  background: var(--s1) !important;
}

/* ─── PANEL BODY (nav-panel-body links) → .panel-links / .settings-list ─── */
:root[data-theme="carbon"] #nav-panel .nav-panel-body {
  padding: 10px !important;
  background: var(--s1) !important;
}
:root[data-theme="carbon"] #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="carbon"] #nav-panel .nav-panel-link .icon,
:root[data-theme="carbon"] #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="carbon"] #nav-panel #panel-account .nav-panel-link[href*="logout"],
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #nav-panel #panel-theme .nav-panel-body {
  padding: 6px !important;
  display: flex !important; flex-direction: column !important; gap: 3px !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #panel-theme .theme-option:hover {
  background-color: var(--theme-hover-bg) !important; color: var(--theme-hover-fg) !important;
}
:root[data-theme="carbon"] #panel-theme .theme-option:hover * {
  color: var(--theme-hover-fg) !important;
}
:root[data-theme="carbon"] #panel-theme .theme-option:hover .theme-dot {
  border-color: var(--theme-hover-bg) !important;
}


/* ── Panel header: DISPOSITIVOS + búsqueda fija ── */
:root[data-theme="carbon"] #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="carbon"] .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="carbon"] .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="carbon"] .sidebar-search-input::placeholder { color: var(--t3) !important; }
:root[data-theme="carbon"] .sidebar-search-input:focus {
  border-color: var(--primary) !important;
  background: rgba(255,255,255,.14) !important;
}

/* ── Botón añadir en panel header — misma estética que admin aa-modal-header-action ── */
:root[data-theme="carbon"] .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="carbon"] .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="carbon"] .panel-header-add-btn .icon {
  font-size: 12px !important;
  color: inherit !important;
}


/* ══ FILTROS DE ESTADO DE DISPOSITIVO (#device-filter-bar) ══ */
:root[data-theme="carbon"] #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(201,168,76,.08) !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
}
:root[data-theme="carbon"] .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(201,168,76,.14) !important;
  background: transparent !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(232,224,208,.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="carbon"] .dfb-btn:hover {
  border-color: rgba(201,168,76,.30) !important;
  color: #E8E0D0 !important;
  background: #1C1C1C !important;
}
:root[data-theme="carbon"] .dfb-btn.dfb-active {
  background: #0D0D0D !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
:root[data-theme="carbon"] .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="carbon"] .group-list > li > .checkbox,
:root[data-theme="carbon"] .group-heading > .checkbox {
  display: none !important;
}

/* Padding izquierdo al nombre al quedar sin el switch */
:root[data-theme="carbon"] .group-list > li > .name {
  padding-left: 12px !important;
}

/* 2. Nombre del dispositivo: negro */
:root[data-theme="carbon"] .group-list > li > .name [data-device="name"] {
  color: #E8E0D0 !important;
  font-weight: 600 !important;
}

/* 3. Fecha/hora: negro (misma familia tipográfica) */
:root[data-theme="carbon"] .group-list > li > .name [data-device="time"] {
  color: #E8E0D0 !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="carbon"] .group-list > li:hover > .name [data-device="name"],
:root[data-theme="carbon"] .group-list > li:hover > .name [data-device="time"] {
  color: #E8E0D0 !important;
}

/* 5. Botón de tres puntos: sin hover visual */
:root[data-theme="carbon"] .group-list > li .btn.icon.options {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: rgba(232,224,208,.40) !important;
}
:root[data-theme="carbon"] .group-list > li .btn.icon.options:hover,
:root[data-theme="carbon"] .group-list > li .btn.icon.options:focus,
:root[data-theme="carbon"] .group-list > li .btn.icon.options:active {
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(232,224,208,.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="carbon"] #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="carbon"] #panel-devices .group-list > li.dev-online   { border-left-color: #22C55E !important; }
:root[data-theme="carbon"] #panel-devices .group-list > li.dev-stopped  { border-left-color: #EAB308 !important; }
:root[data-theme="carbon"] #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="carbon"] #panel-devices .group-list > li[style*="display: none"],
:root[data-theme="carbon"] #panel-devices .group-list > li[style*="display:none"] {
  display: none !important;
}

/* Hijos como flex items en lugar de table-cells */
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #panel-devices .sidebar-content .tab-content {
  overflow: hidden !important;
}
:root[data-theme="carbon"] #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="carbon"] #panel-devices #objects_tab #device-filter-bar,
:root[data-theme="carbon"] #panel-devices #objects_tab .tab-pane-header {
  flex-shrink: 0 !important;
}
:root[data-theme="carbon"] #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="carbon"] #panel-devices #objects_tab.active {
  border-bottom-right-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}
:root[data-theme="carbon"] #panel-devices .sidebar-content {
  border-bottom-right-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
}
:root[data-theme="carbon"] #panel-devices #objects_tab #ajax-items,
:root[data-theme="carbon"] #panel-devices #objects_tab ul.group-list,
:root[data-theme="carbon"] #panel-devices #geofencing_tab ul.group-list,
:root[data-theme="carbon"] #panel-devices #routes_tab ul.group-list,
:root[data-theme="carbon"] #panel-devices #pois_tab ul.group-list,
:root[data-theme="carbon"] #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="carbon"] #panel-devices #geofencing_tab .group-list > li {
  background: var(--s2) !important;
  border-left-color: var(--color-primary) !important;
}

:root[data-theme="carbon"] #objects_tab .item-list,
:root[data-theme="carbon"] #objects_tab .device-list {
  padding: 4px !important; background: var(--s1) !important;
}
:root[data-theme="carbon"] #objects_tab .item-row,
:root[data-theme="carbon"] #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="carbon"] #panel-devices .group-list > li > .details [data-device="speed"] {
  color: var(--t1) !important;
  font-weight: 600 !important;
}

/* Device status badges */
:root[data-theme="carbon"] .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="carbon"] .ds-move { background: rgba(29,78,216,.1) !important; color: #1D4ED8 !important; }
:root[data-theme="carbon"] .ds-stop { background: rgba(180,83,9,.1) !important; color: var(--warning) !important; }
:root[data-theme="carbon"] .ds-off  { background: #F1F5F9 !important; color: #94A3B8 !important; }

/* ─── EVENTS TAB — search bar ─── */
:root[data-theme="carbon"] #events-header {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--b1) !important;
  background: var(--s1) !important;
}
:root[data-theme="carbon"] #events_tab .ev-search-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
:root[data-theme="carbon"] #events_tab .ev-search-wrap {
  flex: 1 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #events_tab .ev-icon-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: var(--primary-bg) !important;
}
:root[data-theme="carbon"] #events_tab .ev-icon-btn--danger:hover {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
  background: #FEF2F2 !important;
}

/* ─── EVENT CARDS ─── */
:root[data-theme="carbon"] #events_tab #ajax-events {
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
:root[data-theme="carbon"] #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="carbon"] #events_tab .ev-card.active {
  background: var(--primary-bg) !important;
}

/* Border colors por tipo */
:root[data-theme="carbon"] #events_tab .ev-speed { border-left-color: var(--danger)  !important; }
:root[data-theme="carbon"] #events_tab .ev-geo   { border-left-color: var(--primary) !important; }
:root[data-theme="carbon"] #events_tab .ev-idle  { border-left-color: var(--warning) !important; }
:root[data-theme="carbon"] #events_tab .ev-on    { border-left-color: var(--success) !important; }
:root[data-theme="carbon"] #events_tab .ev-off   { border-left-color: #94A3B8       !important; }

/* Card interior */
:root[data-theme="carbon"] #events_tab .ev-card-inner {
  flex: 1 !important;
  min-width: 0 !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #events_tab .ev-title--speed { color: var(--danger)  !important; }
:root[data-theme="carbon"] #events_tab .ev-title--geo   { color: var(--primary) !important; }
:root[data-theme="carbon"] #events_tab .ev-title--idle  { color: var(--warning) !important; }
:root[data-theme="carbon"] #events_tab .ev-title--on    { color: var(--success) !important; }
:root[data-theme="carbon"] #events_tab .ev-title--off   { color: #94A3B8        !important; }
:root[data-theme="carbon"] #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="carbon"] #events_tab .ev-card-actions {
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

/* Sin eventos */
:root[data-theme="carbon"] #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="carbon"] .modal-content {
  background: var(--s1) !important;
  border: 1px solid rgba(201,168,76,.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="carbon"] .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="carbon"] .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="carbon"] .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="carbon"] .modal-header .close,
:root[data-theme="carbon"] .modal-content .close,
:root[data-theme="carbon"] .modal .close {
  width: 28px !important; height: 28px !important; border-radius: 7px !important;
  background: var(--s2) !important; border: 1px solid rgba(255,255,255,.10) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: #E8E0D0 !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="carbon"] .modal-header .close *,
:root[data-theme="carbon"] .modal-header .close span,
:root[data-theme="carbon"] .modal-content .close span {
  color: #E8E0D0 !important; opacity: 1 !important;
}
:root[data-theme="carbon"] .modal-header .close:hover,
:root[data-theme="carbon"] .modal-content .close:hover {
  background: rgba(248,113,113,.15) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}
:root[data-theme="carbon"] .modal-header .close:hover *,
:root[data-theme="carbon"] .modal-content .close:hover span {
  color: var(--danger) !important;
}
:root[data-theme="carbon"] .modal-body {
  padding: 18px !important; overflow-y: auto !important;
}
:root[data-theme="carbon"] .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="carbon"] .modal .nav-tabs { padding: 0 18px !important; }
:root[data-theme="carbon"] .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="carbon"] .modal-footer .btn,
:root[data-theme="carbon"] .modal-footer button,
:root[data-theme="carbon"] .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="carbon"] .modal-footer .btn-primary,
:root[data-theme="carbon"] .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="carbon"] .modal-footer .btn-primary:hover { background: var(--primary-dk) !important; }
:root[data-theme="carbon"] .modal-footer .btn-default,
:root[data-theme="carbon"] .modal-body .btn-default {
  background: transparent !important; border: 1.5px solid var(--b2) !important; color: var(--t2) !important;
}
:root[data-theme="carbon"] .modal-footer .btn-default:hover { border-color: var(--primary) !important; color: var(--primary) !important; }

/* ─── FORMULARIOS EN MODALES → .fm-* ─── */
:root[data-theme="carbon"] .modal-body .form-group { margin-bottom: 13px !important; }
:root[data-theme="carbon"] .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="carbon"] .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="carbon"] .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="carbon"] .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="carbon"] .modal-body textarea.form-control {
  height: auto !important; padding: 8px 11px !important; resize: vertical !important; line-height: 1.5 !important;
}
:root[data-theme="carbon"] .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="carbon"] .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="carbon"] .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="carbon"] .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="carbon"] .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="carbon"] .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="carbon"] .b-muted { background: var(--s2)         !important; color: var(--t3)      !important; border: 1px solid var(--b1)         !important; }

/* ─── SCROLLBAR GLOBAL ─── */
:root[data-theme="carbon"] #nav-panel ::-webkit-scrollbar,
:root[data-theme="carbon"] .modal-body ::-webkit-scrollbar { width: 3px !important; height: 3px !important; }
:root[data-theme="carbon"] #nav-panel ::-webkit-scrollbar-thumb,
:root[data-theme="carbon"] .modal-body ::-webkit-scrollbar-thumb {
  background: var(--b2) !important; border-radius: 2px !important;
}

/* ─── PANEL SEARCH DENTRO DE PANEL HEADER ─── */
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #nav-panel .panel-search input::placeholder { color: var(--t3) !important; }

/* ─── WIDGET CARDS FLOTANTES → .widget-card / .wc-* ─── */
:root[data-theme="carbon"] .widget-card {
  background: rgba(20,20,20,.85) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(201,168,76,.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: #E8E0D0 !important;
}
:root[data-theme="carbon"] .wc-label {
  font-size: 8.5px !important; font-weight: 700 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
  color: #8C877E !important; margin-bottom: 3px !important;
  font-family: 'DM Mono', 'Space Grotesk', monospace !important;
}
:root[data-theme="carbon"] .wc-device {
  font-size: 9.5px !important; color: #C9A84C !important;
  font-weight: 600 !important; margin-bottom: 3px !important;
  font-family: 'DM Mono', 'Space Grotesk', monospace !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
:root[data-theme="carbon"] .wc-value {
  font-size: 18px !important; font-weight: 800 !important;
  color: #E8E0D0 !important; letter-spacing: -.03em !important;
  line-height: 1 !important; font-family: 'DM Mono', 'Space Grotesk', monospace !important;
}
:root[data-theme="carbon"] .wc-unit {
  font-size: 9px !important; color: #8C877E !important; font-weight: 600 !important;
  letter-spacing: .04em !important; text-transform: uppercase !important; margin-top: 1px !important;
}

/* ─── CONTEXT MENU (.ctx-menu) ─── */
:root[data-theme="carbon"] .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="carbon"] .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="carbon"] .ctx-sep { height: 1px !important; background: var(--b1) !important; margin: 3px 0 !important; }

/* ─── CONFIRM MODAL (centrado / overlay) ─── */
:root[data-theme="carbon"] .modal-backdrop { background: rgba(10,20,50,.5) !important; }
:root[data-theme="carbon"] .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="carbon"] #nav-panel #panel-devices .nav-panel-header,
:root[data-theme="carbon"] #nav-panel .nav-panel-section .nav-panel-header {
  height: 42px !important; background: #1C1C1C !important;
  border-bottom: 1px solid rgba(201,168,76,.08) !important;
  display: flex !important; align-items: center !important;
  padding: 0 12px !important; font-size: 11.5px !important;
  font-weight: 800 !important; color: #E8E0D0 !important;
  letter-spacing: -.01em !important; text-transform: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
:root[data-theme="carbon"] #nav-panel #panel-devices .nav-panel-header *,
:root[data-theme="carbon"] #nav-panel .nav-panel-section .nav-panel-header * {
  color: #E8E0D0 !important;
}

/* Nav tabs en panel-devices supera nav-sidebar */
:root[data-theme="carbon"] #panel-devices .nav-tabs > li > a,
:root[data-theme="carbon"] #panel-devices .nav-tabs > li > a:focus,
:root[data-theme="carbon"] #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(232,224,208,.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="carbon"] #panel-devices .nav-tabs > li.active > a,
:root[data-theme="carbon"] #panel-devices .nav-tabs > li.active > a:focus,
:root[data-theme="carbon"] #panel-devices .nav-tabs > li.active > a:hover {
  color: var(--color-primary) !important;
  border-bottom-color: var(--color-primary) !important;
}
:root[data-theme="carbon"] #panel-devices .nav-tabs {
  background: var(--s2) !important;
  border-bottom: 1px solid rgba(201,168,76,.08) !important;
}

/* Panel nav links supera nav-sidebar (.nav-panel-link) */
:root[data-theme="carbon"] #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: #1C1C1C !important; border: 1px solid rgba(201,168,76,.08) !important;
  margin-bottom: 7px !important; text-decoration: none !important;
  font-size: 12.5px !important; font-weight: 600 !important; color: #E8E0D0 !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="carbon"] .bootstrap-select.form-control:not(.bs-container),
:root[data-theme="carbon"] .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="carbon"] .bootstrap-select.form-control.multiexpand:not(.bs-container),
:root[data-theme="carbon"] .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="carbon"] .bootstrap-select.multiexpand:not(.bs-container) > .dropdown-toggle,
:root[data-theme="carbon"] .bootstrap-select.multiexpand:not(.bs-container) > .caret {
  display: none !important;
}
:root[data-theme="carbon"] .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="carbon"] select` (background/border)
   lo hace visible, inflando el contenedor visual ("sobre-contenedor"). */
:root[data-theme="carbon"] .bootstrap-select > select,
:root[data-theme="carbon"] .bootstrap-select > select.form-control,
:root[data-theme="carbon"] .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="carbon"] .bootstrap-select > .dropdown-toggle,
:root[data-theme="carbon"] .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="carbon"] .bootstrap-select > .dropdown-toggle:hover,
:root[data-theme="carbon"] .bootstrap-select > .dropdown-toggle:focus,
:root[data-theme="carbon"] .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="carbon"] .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="carbon"] .bootstrap-select .caret {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-top-color: rgba(232,224,208,.40) !important;
  border-width: 5px 4px 0 !important;
}
:root[data-theme="carbon"] .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="carbon"] .bootstrap-select:not(.bs-container) > .dropdown-menu,
:root[data-theme="carbon"] .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="carbon"] .bootstrap-select.dropup:not(.bs-container) > .dropdown-menu {
  top: 100% !important;
  bottom: auto !important;
}
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu {
  background: var(--s2) !important;
  border: 1px solid rgba(201,168,76,.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="carbon"] .bootstrap-select .dropdown-menu > li > a {
  font-size: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: rgba(232,224,208,.58) !important;
  padding: 7px 12px !important;
  border-radius: 7px !important;
  transition: all .1s !important;
}
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu > li > a:hover,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu > li.selected > a {
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
}
:root[data-theme="carbon"] .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="carbon"] .bootstrap-select .bs-searchbox {
  padding: 4px 6px !important;
  border-bottom: 1px solid rgba(201,168,76,.08) !important;
  margin-bottom: 4px !important;
}
:root[data-theme="carbon"] .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="carbon"] .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="carbon"] #widgetsbar {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ARCTIC WIDGET BAR (#arctic-wb) — Fase 1 estructura base
   ══════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="carbon"] #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="carbon"] #arctic-wb.open {
  display: flex !important;
}
:root[data-theme="carbon"] #nav-panel.open ~ #arctic-wb {
  left: 432px !important;
}

/* Header del bar */
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #arctic-wb .arctic-wb-btn svg {
  width: 11px !important; height: 11px !important;
}
:root[data-theme="carbon"] #arctic-wb .arctic-wb-btn:hover {
  background: var(--hover-bg) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
:root[data-theme="carbon"] #arctic-wb.collapsed .arctic-wb-collapse svg {
  transform: rotate(180deg) !important;
}

/* Body del bar — scroll horizontal de cards */
:root[data-theme="carbon"] #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="carbon"] #arctic-wb.collapsed .arctic-wb-body {
  display: none !important;
}
:root[data-theme="carbon"] #arctic-wb .arctic-wb-body::-webkit-scrollbar { height: 4px !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-body::-webkit-scrollbar-thumb {
  background: var(--b2) !important; border-radius: 2px !important;
}

:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #arctic-wb .arctic-wb-card.dragging {
  opacity: .4 !important;
}
:root[data-theme="carbon"] #arctic-wb .arctic-wb-card.drag-over {
  border-left: 3px solid var(--primary) !important;
}

/* Card header */
:root[data-theme="carbon"] #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="carbon"] #arctic-wb .arctic-wb-cardhead:active { cursor: grabbing !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-cardicon {
  font-size: 13px !important;
  flex-shrink: 0 !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #arctic-wb .arctic-wb-cardx:hover {
  background: rgba(220,38,38,.1) !important;
  color: var(--danger) !important;
}
:root[data-theme="carbon"] #arctic-wb .arctic-wb-cardx svg {
  width: 9px !important; height: 9px !important;
}

/* Indicador de color por tipo (border-left del card) */
:root[data-theme="carbon"] #arctic-wb .arctic-wb-card-primary  { border-left: 3px solid var(--primary)  !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-card-success  { border-left: 3px solid var(--success)  !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-card-warning  { border-left: 3px solid var(--warning)  !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-card-danger   { border-left: 3px solid var(--danger)   !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-card-cyan     { border-left: 3px solid #0891B2          !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-card-indigo   { border-left: 3px solid #4F46E5          !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-card-gray     { border-left: 3px solid #94A3B8          !important; }

/* Card body */
:root[data-theme="carbon"] #arctic-wb .arctic-wb-cardbody {
  padding: 8px 10px !important;
  overflow-y: auto !important;
  flex: 1 !important;
  min-height: 0 !important;
}
:root[data-theme="carbon"] #arctic-wb .arctic-wb-cardbody::-webkit-scrollbar { width: 3px !important; }
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"].arctic-dv-active #nav-panel,
:root[data-theme="carbon"].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="carbon"].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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #arctic-dv-devicelist .arctic-dv-dl-back svg { width: 14px !important; height: 14px !important; }
:root[data-theme="carbon"] #arctic-dv-devicelist .arctic-dv-dl-back:hover {
  background: rgba(var(--color-primary-rgb), .08) !important;
  color: var(--color-primary) !important;
}

:root[data-theme="carbon"] #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="carbon"] #arctic-dv-devicelist .arctic-dv-dl-list::-webkit-scrollbar { width: 3px !important; }
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #arctic-dv-devicelist .arctic-dv-dl-item:active {
  transform: scale(.97) !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #arctic-dv-devicelist .arctic-dv-dl-item .arctic-dv-dl-name,
:root[data-theme="carbon"] #arctic-dv-devicelist .arctic-dv-dl-name,
:root[data-theme="carbon"] #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="carbon"] #arctic-dv-devicelist .arctic-dv-dl-item.active .arctic-dv-dl-name,
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #arctic-dv .arctic-dv-acc { pointer-events: auto !important; }
:root[data-theme="carbon"] #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="carbon"] #arctic-dv .arctic-dv-widgets.switching {
  opacity: 0 !important;
  transform: translateY(-4px) !important;
}
:root[data-theme="carbon"] #arctic-dv.open { display: flex !important; }
:root[data-theme="carbon"].arctic-dv-focus #arctic-dv { display: none !important; }

:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #arctic-dv .arctic-dv-iconbtn {
  width: 24px !important; height: 24px !important;
  border-radius: 5px !important;
  background: transparent !important;
  border: 1px solid var(--b2) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important;
  color: var(--t2) !important;
  transition: all .12s !important;
}
:root[data-theme="carbon"] #arctic-dv .arctic-dv-iconbtn svg { width: 11px !important; height: 11px !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-dv-iconbtn:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: var(--color-primary-bg-soft) !important;
}

:root[data-theme="carbon"] #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="carbon"] #arctic-dv .arctic-dv-widgets::-webkit-scrollbar { width: 4px !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-dv-widgets::-webkit-scrollbar-thumb {
  background: var(--b2) !important; border-radius: 2px !important;
}

/* Acordeones */
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #arctic-dv .arctic-dv-acc-streetview .arctic-dv-acc-body {
  padding: 0 !important;
}
:root[data-theme="carbon"] #arctic-dv .arctic-dv-acc[open] {
  box-shadow: 0 4px 14px rgba(0,0,0,.08) !important;
}
:root[data-theme="carbon"] #arctic-dv .arctic-dv-acc-blue    { border-left-color: var(--color-primary) !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-dv-acc-success { border-left-color: #15803D !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-dv-acc-warning { border-left-color: #D97706 !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-dv-acc-danger  { border-left-color: #DC2626 !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-dv-acc-cyan    { border-left-color: #0891B2 !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-dv-acc-indigo  { border-left-color: #6D28D9 !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-dv-acc-primary { border-left-color: var(--color-primary) !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-dv-acc-gray    { border-left-color: #64748B !important; }

:root[data-theme="carbon"] #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="carbon"] #arctic-dv .arctic-dv-acc-summary::-webkit-details-marker { display: none !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-dv-acc-summary::marker                 { display: none !important; content: '' !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-dv-acc-summary:hover { background: var(--s2) !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-dv-acc-icon {
  width: 14px !important;
  text-align: center !important;
  color: var(--t3) !important;
  font-size: 13px !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #arctic-dv .arctic-dv-acc-chev {
  width: 12px !important;
  height: 12px !important;
  color: var(--t3) !important;
  transition: transform .15s !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #arctic-dv .arctic-dv-acc-manage svg {
  width: 11px !important;
  height: 11px !important;
  display: block !important;
}
:root[data-theme="carbon"] #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="carbon"] #arctic-dv .arctic-dv-acc-manage:active {
  transform: scale(.96) !important;
}

:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] .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="carbon"] .arctic-dv-focus-restore svg { width: 14px !important; height: 14px !important; }
:root[data-theme="carbon"].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="carbon"] #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="carbon"] #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="carbon"] #arctic-wb .arctic-wb-srow-icon .icon {
  color: var(--t3) !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #arctic-wb .arctic-wb-rows .arctic-wb-srow-icon .icon.address       { color: var(--color-primary) !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-rows .arctic-wb-srow-icon .icon.time          { color: #475569 !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-rows .arctic-wb-srow-icon .icon.idle          { color: #B45309 !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-rows .arctic-wb-srow-icon .icon.driver        { color: #7C3AED !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-rows .arctic-wb-srow-icon .icon.engine_hours  { color: #059669 !important; }
:root[data-theme="carbon"] #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="carbon"] #arctic-wb .arctic-wb-srow.is-address {
  align-items: flex-start !important;
  padding-top: 3px !important;
}
:root[data-theme="carbon"] #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="carbon"] #arctic-wb .arctic-wb-srow-icon .icon.engine,
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow-icon .icon.ignition         { color: var(--color-primary) !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow-icon .icon.fuel_tank,
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow-icon .icon.fuel_consumption { color: #F97316 !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow-icon .icon.temperature      { color: #DC2626 !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow-icon .icon.battery,
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow-icon .icon.battery_external { color: #EAB308 !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow-icon .icon.tachometer       { color: #7C3AED !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow-icon .icon.satellites       { color: #16A34A !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow-icon .icon.gsm              { color: #0891B2 !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow-icon .icon.door             { color: #B45309 !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow-icon .icon.seatbelt         { color: #DC2626 !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow-icon .icon.rfid             { color: #7C3AED !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow-icon .icon.odometer,
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow-icon .icon.engine_hours     { color: #475569 !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow-icon .icon.harsh_acceleration,
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow-icon .icon.harsh_breaking,
:root[data-theme="carbon"] #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="carbon"] #arctic-wb .arctic-wb-srow.is-on .arctic-wb-srow-icon .icon,
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow.is-on .arctic-wb-srow-val   { color: #16A34A !important; }
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow.is-off .arctic-wb-srow-icon .icon,
:root[data-theme="carbon"] #arctic-wb .arctic-wb-srow.is-off .arctic-wb-srow-val  { color: #DC2626 !important; }

/* ── Velocímetro ── */
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #arctic-wb .arctic-wb-speedo-svg .sp-needle line {
  transition: stroke .3s ease !important;
}
:root[data-theme="carbon"] #arctic-wb .arctic-wb-speedo-svg .sp-pivot {
  transition: fill .3s ease !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #arctic-wb-modal .arctic-wb-modal-item.active {
  border-color: var(--success) !important;
  background: rgba(21,128,61,.08) !important;
}
:root[data-theme="carbon"] #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="carbon"] #arctic-wb-modal .arctic-wb-modal-icon {
  font-size: 20px !important;
  color: var(--primary) !important;
}
:root[data-theme="carbon"] #arctic-wb-modal .arctic-wb-modal-name {
  font-size: 11.5px !important; font-weight: 700 !important;
  color: var(--t1) !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #arctic-wb-modal .arctic-wb-modal-footinfo-dirty {
  color: var(--primary) !important;
}
:root[data-theme="carbon"] #arctic-wb-modal .arctic-wb-modal-footbtns {
  display: flex !important;
  gap: 8px !important;
}
:root[data-theme="carbon"] #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="carbon"] #arctic-wb-modal .arctic-wb-modal-btn-cancel {
  background: var(--s2) !important;
  border-color: var(--b1) !important;
  color: var(--t2) !important;
}
:root[data-theme="carbon"] #arctic-wb-modal .arctic-wb-modal-btn-cancel:hover {
  background: var(--b1) !important;
  color: var(--t1) !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #arctic-wb-modal .arctic-wb-modal-btn-save:active:not(:disabled) {
  transform: translateY(0) !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #arctic-dv .arctic-wb-srow:last-child {
  border-bottom: 0 !important;
}
:root[data-theme="carbon"] #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="carbon"] #arctic-dv .arctic-wb-srow-icon .icon {
  color: var(--t3) !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #arctic-dv .arctic-wb-rows .arctic-wb-srow-icon .icon.address       { color: var(--color-primary) !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-rows .arctic-wb-srow-icon .icon.time          { color: #475569 !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-rows .arctic-wb-srow-icon .icon.idle          { color: #B45309 !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-rows .arctic-wb-srow-icon .icon.driver        { color: #7C3AED !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-rows .arctic-wb-srow-icon .icon.engine_hours  { color: #059669 !important; }
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #arctic-dv .arctic-wb-srow.is-address .arctic-wb-srow-icon {
  margin-top: 2px !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #arctic-dv .arctic-wb-addr-link:hover {
  color: var(--color-primary-dark) !important;
  border-bottom-color: var(--color-primary) !important;
}
:root[data-theme="carbon"] #arctic-dv .arctic-wb-addr-link span[data-device="address"] {
  color: inherit !important;
}

/* Iconos coloreados por tipo de sensor */
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.engine,
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.ignition         { color: var(--color-primary) !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.fuel_tank,
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.fuel_consumption { color: #F97316 !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.temperature      { color: #DC2626 !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.battery,
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.battery_external { color: #EAB308 !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.tachometer       { color: #7C3AED !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.satellites       { color: #16A34A !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.gsm              { color: #0891B2 !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.door             { color: #B45309 !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.seatbelt         { color: #DC2626 !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.rfid             { color: #7C3AED !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.odometer,
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.engine_hours     { color: #475569 !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.harsh_acceleration,
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.harsh_breaking,
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow-icon .icon.harsh_turning    { color: #DC2626 !important; }

/* Estados on/off */
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow.is-on .arctic-wb-srow-icon .icon,
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow.is-on .arctic-wb-srow-val   { color: #16A34A !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-srow.is-off .arctic-wb-srow-icon .icon,
:root[data-theme="carbon"] #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="carbon"] #arctic-dv .arctic-wb-sensors {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 0 !important;
}
:root[data-theme="carbon"] #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="carbon"] #arctic-dv .arctic-wb-speedo-svg {
  width: 90px !important;
  max-width: 90px !important;
  height: auto !important;
}
:root[data-theme="carbon"] #arctic-dv .arctic-wb-speedo-svg .sp-zone {
  transition: stroke-dasharray .8s cubic-bezier(.4,0,.2,1) !important;
}
:root[data-theme="carbon"] #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="carbon"] #arctic-dv .arctic-wb-speedo-svg .sp-needle line {
  transition: stroke .3s ease !important;
}
:root[data-theme="carbon"] #arctic-dv .arctic-wb-speedo-svg .sp-pivot {
  transition: fill .3s ease !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #arctic-dv .arctic-dv-acc-body {
  min-width: 280px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   WIDGET CONDUCTOR
   ══════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="carbon"] #arctic-dv .arctic-wb-driver {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 4px 0 !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #arctic-dv .arctic-wb-driver-row .icon {
  color: var(--t3) !important;
  font-size: 12px !important;
}
:root[data-theme="carbon"] #arctic-dv .arctic-wb-driver-row a {
  color: var(--color-primary) !important;
  text-decoration: none !important;
}
:root[data-theme="carbon"] #arctic-dv .arctic-wb-driver-row a:hover {
  text-decoration: underline !important;
}
:root[data-theme="carbon"] #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="carbon"] #arctic-dv .arctic-wb-svcs {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
:root[data-theme="carbon"] #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="carbon"] #arctic-dv .arctic-wb-svc-ok      { border-left-color: #16A34A !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-svc-warning { border-left-color: #F59E0B !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-svc-danger  {
  border-left-color: #DC2626 !important;
  background: rgba(220,38,38,.06) !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #arctic-dv .arctic-wb-svc-danger .arctic-wb-svc-left {
  color: #DC2626 !important;
}
:root[data-theme="carbon"] #arctic-dv .arctic-wb-svc-warning .arctic-wb-svc-left {
  color: #B45309 !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #arctic-dv .arctic-wb-svc-warning .arctic-wb-svc-fill { background: #F59E0B !important; }
:root[data-theme="carbon"] #arctic-dv .arctic-wb-svc-danger  .arctic-wb-svc-fill { background: #DC2626 !important; }
:root[data-theme="carbon"] #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="carbon"] .modal-content .modal-header {
  background: var(--s2) !important;
  border-bottom: 1px solid rgba(201,168,76,.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="carbon"] .modal-content .modal-header,
:root[data-theme="carbon"] .modal-content .modal-header * {
  color: #E8E0D0 !important;
}

/* Título consola de comandos (.cc-modal-*) */
:root[data-theme="carbon"] .modal-content .modal-header .cc-modal-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 !important;
}
:root[data-theme="carbon"] .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="carbon"] .modal-content .modal-header .cc-modal-texts {
  display: flex !important; flex-direction: column !important;
  gap: 2px !important; line-height: 1 !important;
}
:root[data-theme="carbon"] .modal-content .modal-header .cc-modal-name {
  font-size: 15px !important; font-weight: 800 !important;
  color: #E8E0D0 !important; letter-spacing: -.01em !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
:root[data-theme="carbon"] .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="carbon"] .modal-content .modal-header .close {
  width: 28px !important; height: 28px !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  color: #E8E0D0 !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="carbon"] .modal-content .modal-header .close span {
  color: #E8E0D0 !important; opacity: 1 !important;
}
:root[data-theme="carbon"] .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="carbon"] .modal-content .modal-header .close:hover span {
  color: var(--danger) !important;
}

/* Título genérico (modales sin .cc-modal-title) */
:root[data-theme="carbon"] .modal-content .modal-header .modal-title {
  color: #E8E0D0 !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="carbon"] .bootstrap-select .dropdown-menu {
  max-height: 220px !important;
  overflow-y: auto !important;
}
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li > a,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li > a span,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li > a * {
  color: #E8E0D0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12.5px !important;
}
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li > a:hover,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li > a:hover * {
  color: var(--color-primary) !important;
  background: var(--input-bg) !important;
}
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li.selected > a,
:root[data-theme="carbon"] .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="carbon"] .bootstrap-select .dropdown-menu li:first-child > a,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li:first-child > a * {
  color: rgba(232,224,208,.40) !important;
  font-style: italic !important;
}
/* Scrollbar del dropdown */
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu::-webkit-scrollbar { width: 4px !important; }
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(201,168,76,.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="carbon"] #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="carbon"] #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(201,168,76,.08) !important;
  cursor: pointer !important;
  transition: all .15s !important;
  text-decoration: none !important;
  margin: 0 !important;
  color: #E8E0D0 !important;
  letter-spacing: 0 !important;
}

/* Ícono */
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #nav-panel .nav-panel-link .npl-name {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #E8E0D0 !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="carbon"] #nav-panel .nav-panel-link .npl-desc {
  font-size: 10.5px !important;
  color: rgba(232,224,208,.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="carbon"] #nav-panel .nav-panel-link .npl-arrow {
  color: #CBD5E1 !important;
  flex-shrink: 0 !important;
  transition: color .15s, transform .15s !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #nav-panel .nav-panel-link.npl-danger .npl-name {
  color: #DC2626 !important;
}
:root[data-theme="carbon"] #nav-panel .nav-panel-link.npl-danger .npl-desc {
  color: rgba(220,38,38,.6) !important;
}
:root[data-theme="carbon"] #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="carbon"] #nav-panel .nav-panel-link > .icon,
:root[data-theme="carbon"] #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="carbon"] .dropdown-menu {
  max-height: 260px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 1px solid rgba(201,168,76,.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="carbon"] .dropdown-menu:not(.bootstrap-select .dropdown-menu):not(.inner) {
  width: auto !important;
  min-width: 160px !important;
  max-width: 300px !important;
}
:root[data-theme="carbon"] .dropdown-menu::-webkit-scrollbar { width: 4px !important; }
:root[data-theme="carbon"] .dropdown-menu::-webkit-scrollbar-thumb {
  background: var(--color-primary-tint-strong) !important; border-radius: 2px !important;
}
:root[data-theme="carbon"] .dropdown-menu > li > a {
  border-radius: 7px !important;
  color: #E8E0D0 !important;
  font-size: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  padding: 7px 11px !important;
  transition: background .1s !important;
}
:root[data-theme="carbon"] .dropdown-menu > li > a:hover,
:root[data-theme="carbon"] .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="carbon"] .bootstrap-select,
:root[data-theme="carbon"] div.bootstrap-select,
:root[data-theme="carbon"] .bootstrap-select.form-control,
:root[data-theme="carbon"] .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="carbon"] .bootstrap-select > .dropdown-toggle,
:root[data-theme="carbon"] .bootstrap-select > .dropdown-toggle.btn-default,
:root[data-theme="carbon"] .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="carbon"] .bootstrap-select > .dropdown-toggle:hover,
:root[data-theme="carbon"] .bootstrap-select > .dropdown-toggle:focus,
:root[data-theme="carbon"] .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="carbon"] .bootstrap-select .dropdown-menu {
  max-height: 220px !important; overflow-y: auto !important;
}
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu > li > a,
:root[data-theme="carbon"] .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="carbon"] .bootstrap-select .dropdown-menu li:not(.dropdown-header) input[type="checkbox"],
:root[data-theme="carbon"] .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="carbon"] .bootstrap-select .dropdown-menu li:not(.dropdown-header) .check-mark { display: none !important; }
:root[data-theme="carbon"] .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="carbon"] .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="carbon"] .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="carbon"] .bootstrap-select .dropdown-menu li.dropdown-header .check-mark,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li.dropdown-header::before,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li.dropdown-header::after,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li.dropdown-header label::before,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li.dropdown-header label::after {
  display: none !important;
  content: none !important;
}

/* ── 4. SELECT NATIVO con flecha Arctic ── */
:root[data-theme="carbon"] 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="carbon"] 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="carbon"] .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="carbon"] .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="carbon"] .dropdown-menu[style*="position: fixed"],
:root[data-theme="carbon"] .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="carbon"] .dropdown-menu > li > a:hover,
:root[data-theme="carbon"] .dropdown-menu > li > a:focus,
:root[data-theme="carbon"] .dropdown-menu > li.active > a,
:root[data-theme="carbon"] .dropdown-menu > li.active > a:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}
:root[data-theme="carbon"] .dropdown-menu > li > a:hover *,
:root[data-theme="carbon"] .dropdown-menu > li > a:focus *,
:root[data-theme="carbon"] .dropdown-menu > li.active > a * {
  color: #fff !important;
}

/* Bootstrap-select: hover blanco */
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li > a:hover,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li > a:focus,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu > li > a:hover,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu > li > a:focus {
  background: var(--color-primary) !important;
  color: #fff !important;
}
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li > a:hover *,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li > a:hover span,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu > li > a:hover * {
  color: #fff !important;
}

/* ── SELECCIONADO: hover permanente (azul + blanco) ── */
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li.selected > a,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li.selected > a:hover,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu > li.selected > a {
  background: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li.selected > a *,
:root[data-theme="carbon"] .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="carbon"] .modal-body {
  overflow-x: visible !important;
  overflow-y: auto !important;
}
/* El modal-dialog sí contiene el overflow horizontal */
:root[data-theme="carbon"] .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="carbon"] .modal-body select[multiple] option:checked,
:root[data-theme="carbon"] .modal-body select.multiexpand option:checked,
:root[data-theme="carbon"] 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="carbon"] select[multiple].form-control option {
  padding: 5px 8px !important;
  color: #E8E0D0 !important;
  border-radius: 5px !important;
}
:root[data-theme="carbon"] 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="carbon"] .alert-form .bootstrap-select .dropdown-menu li.selected > a,
:root[data-theme="carbon"] .bootstrap-select[data-original-title] .dropdown-menu li.selected > a,
:root[data-theme="carbon"] .modal-body .bootstrap-select .dropdown-menu li.selected > a {
  background: var(--color-primary) !important;
  color: #fff !important;
}
:root[data-theme="carbon"] .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="carbon"] .bootstrap-select .dropdown-menu,
:root[data-theme="carbon"] .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="carbon"] .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="carbon"] body > .dropdown-menu {
  max-height: 220px !important;
  overflow-y: auto !important;
  border: 1px solid rgba(201,168,76,.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="carbon"] .bootstrap-select .dropdown-menu li > a,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu .inner li > a,
:root[data-theme="carbon"] body > .dropdown-menu li > a {
  color: #E8E0D0 !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="carbon"] .bootstrap-select .dropdown-menu li > a .text,
:root[data-theme="carbon"] 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="carbon"] .bootstrap-select .dropdown-menu li .check-mark,
:root[data-theme="carbon"] body > .dropdown-menu li .check-mark,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu .check-mark,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu .glyphicon {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ── 4. HOVER: azul + blanco SIN cuadro visible ── */
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li > a:hover,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu .inner li > a:hover,
:root[data-theme="carbon"] 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="carbon"] .bootstrap-select .dropdown-menu li > a:hover *,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li > a:hover span,
:root[data-theme="carbon"] body > .dropdown-menu li > a:hover *,
:root[data-theme="carbon"] body > .dropdown-menu li > a:hover span {
  color: #fff !important;
  background: transparent !important;
}

/* ── 5. SELECCIONADO: hover permanente ── */
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li.selected > a,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu .inner li.selected > a,
:root[data-theme="carbon"] body > .dropdown-menu li.selected > a {
  background: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li.selected > a *,
:root[data-theme="carbon"] body > .dropdown-menu li.selected > a * {
  color: #fff !important;
  background: transparent !important;
}

/* ── 6. INNER ul de bootstrap-select: altura y scroll ── */
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu .inner,
:root[data-theme="carbon"] body > .dropdown-menu .inner {
  max-height: 200px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar,
:root[data-theme="carbon"] body > .dropdown-menu .inner::-webkit-scrollbar { width: 4px !important; }
:root[data-theme="carbon"] .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="carbon"] .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="carbon"] #nav-panel .bootstrap-select .dropdown-menu li > a,
:root[data-theme="carbon"] #nav-panel .bootstrap-select .dropdown-menu li > a:not(.btn) {
  color: #E8E0D0 !important;
  background: transparent !important;
}
:root[data-theme="carbon"] #nav-panel .bootstrap-select .dropdown-menu li > a:hover,
:root[data-theme="carbon"] #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="carbon"] body > .bs-container,
:root[data-theme="carbon"] .bootstrap-select.btn-group.bs-container {
  position: fixed !important;
  height: 0 !important;
  z-index: 9998 !important;
  pointer-events: none !important;
}
:root[data-theme="carbon"] body > .bs-container .dropdown-menu,
:root[data-theme="carbon"] .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="carbon"] .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="carbon"] #alerts_create .nav-tabs.nav-default,
:root[data-theme="carbon"] #alerts_edit .nav-tabs.nav-default {
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 0 8px !important;
  background: var(--s2, #1C1C1C) !important;
}
:root[data-theme="carbon"] #alerts_create .nav-tabs.nav-default > li,
:root[data-theme="carbon"] #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="carbon"] #alerts_create .nav-tabs.nav-default > li > a,
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #alerts-form-notifications .form-group {
  display: flex !important;
  align-items: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
:root[data-theme="carbon"] #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="carbon"] #alerts-form-notifications .form-group > .col-xs-11 {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
}
:root[data-theme="carbon"] #alerts-form-notifications .form-group .checkbox {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-height: unset !important;
}
:root[data-theme="carbon"] #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="carbon"] #history_tab .tab-pane-header {
  padding: 12px !important;
  background: var(--s1) !important;
}
:root[data-theme="carbon"] #history_tab .hp-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
:root[data-theme="carbon"] #history_tab .hp-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
:root[data-theme="carbon"] #history_tab .hp-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--t3, rgba(232,224,208,.40)) !important;
  font-family: 'Space Grotesk', monospace !important;
  margin: 0 !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #history_tab .hp-shortcuts {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
:root[data-theme="carbon"] #history_tab .hp-chip {
  height: 32px !important;
  background: var(--s2) !important;
  border: 1.5px solid rgba(201,168,76,.18) !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--t2, rgba(232,224,208,.58)) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  cursor: pointer !important;
  transition: all .13s !important;
  padding: 0 10px !important;
}
:root[data-theme="carbon"] #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="carbon"] #history_tab .hp-chip:active,
:root[data-theme="carbon"] #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="carbon"] #history_tab .hp-custom {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 10px !important;
  background: var(--s2, #1C1C1C) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(201,168,76,.08) !important;
}
:root[data-theme="carbon"] #history_tab .hp-row {
  display: flex !important;
  gap: 6px !important;
}
:root[data-theme="carbon"] #history_tab .hp-row > .hp-input {
  flex: 1 !important;
}

/* Botón primario — colores centralizados (cambiar las vars en :root) */
:root[data-theme="carbon"] #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="carbon"] #history_tab .hp-btn-primary:hover {
  background: var(--color-primary-dark) !important;
}

/* Hint */
:root[data-theme="carbon"] #history_tab .hp-hint {
  font-size: 10.5px !important;
  color: var(--t3, rgba(232,224,208,.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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #device-form-image .dev-image-placeholder .icon { font-size: 32px !important; opacity: .55 !important; }
:root[data-theme="carbon"] #device-form-image .dev-image-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
:root[data-theme="carbon"] #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="carbon"] .modal .btn-group.dropdown:not(.bootstrap-select) > .dropdown-menu,
:root[data-theme="carbon"] .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="carbon"] .modal .btn-group.dropdown:not(.bootstrap-select) > .dropdown-menu > li,
:root[data-theme="carbon"] .modal .btn-group.dropleft:not(.bootstrap-select) > .dropdown-menu > li,
:root[data-theme="carbon"] .modal .btn-group.dropdown:not(.bootstrap-select) > .dropdown-menu > li > a,
:root[data-theme="carbon"] .modal .btn-group.dropleft:not(.bootstrap-select) > .dropdown-menu > li > a {
  list-style: none !important;
}
:root[data-theme="carbon"] .modal .btn-group.dropdown:not(.bootstrap-select) > .dropdown-menu > li > a,
:root[data-theme="carbon"] .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="carbon"] .modal .btn-group.dropdown:not(.bootstrap-select) > .dropdown-menu > li > a:hover,
:root[data-theme="carbon"] .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="carbon"] #geofences_modal .modal-body,
:root[data-theme="carbon"] .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="carbon"] #panel-devices.sub-view-active #geofencing_tab > .tab-pane-header .form-group.search,
:root[data-theme="carbon"] #panel-devices.sub-view-active #routes_tab > .tab-pane-header .form-group.search,
:root[data-theme="carbon"] #panel-devices.sub-view-active #pois_tab > .tab-pane-header .form-group.search {
  display: none !important;
}
:root[data-theme="carbon"] #panel-devices.sub-view-active #geofencing_tab > .tab-pane-header .input-group-btn .btn-primary,
:root[data-theme="carbon"] #panel-devices.sub-view-active #routes_tab > .tab-pane-header .input-group-btn .btn-primary,
:root[data-theme="carbon"] #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="carbon"] .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="carbon"] .buttons.text-center {
  justify-content: center !important;
}
:root[data-theme="carbon"] .buttons > .btn,
:root[data-theme="carbon"] .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="carbon"] label.radio-inline,
:root[data-theme="carbon"] .form-group label.radio-inline,
:root[data-theme="carbon"] div.radio-inline,
:root[data-theme="carbon"] .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="carbon"] .radio-inline input[type="radio"],
:root[data-theme="carbon"] .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="carbon"] .pwd-eye-wrap {
  position: relative !important;
  display: block !important;
}
:root[data-theme="carbon"] .pwd-eye-wrap > input[type="password"],
:root[data-theme="carbon"] .pwd-eye-wrap > input[type="text"] {
  padding-right: 38px !important;
}
:root[data-theme="carbon"] .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="carbon"] .pwd-eye-btn:hover {
  color: var(--color-primary) !important;
  background: var(--color-primary-bg) !important;
}
:root[data-theme="carbon"] .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="carbon"] .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="carbon"] .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="carbon"] .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="carbon"] .subuser-device-row span {
  flex: 1 !important;
  line-height: 1.3 !important;
}
:root[data-theme="carbon"] .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="carbon"] .btn.icon,
:root[data-theme="carbon"] a.btn.icon,
:root[data-theme="carbon"] .table .btn.icon,
:root[data-theme="carbon"] .table-list .btn.icon,
:root[data-theme="carbon"] td.actions .btn.icon,
:root[data-theme="carbon"] 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="carbon"] .btn.icon.edit:hover,
:root[data-theme="carbon"] 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="carbon"] .btn.icon.delete,
:root[data-theme="carbon"] .btn.icon.trash,
:root[data-theme="carbon"] td.actions .btn.icon.delete,
:root[data-theme="carbon"] td.actions .btn.icon.trash {
  color: var(--color-danger) !important;
}
:root[data-theme="carbon"] .btn.icon.delete:hover,
:root[data-theme="carbon"] .btn.icon.trash:hover,
:root[data-theme="carbon"] td.actions .btn.icon.delete:hover,
:root[data-theme="carbon"] 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="carbon"] .btn-action,
:root[data-theme="carbon"] a.btn-action,
:root[data-theme="carbon"] button.btn-action,
:root[data-theme="carbon"] .btn.btn-action,
:root[data-theme="carbon"] .btn-side,
:root[data-theme="carbon"] .btn-save,
:root[data-theme="carbon"] .btn-done,
:root[data-theme="carbon"] .days-mode-btn.active,
:root[data-theme="carbon"] .action-btn.btn-blue,
:root[data-theme="carbon"] .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="carbon"] .btn-action:hover,
:root[data-theme="carbon"] .btn-action:focus,
:root[data-theme="carbon"] .btn-action:active,
:root[data-theme="carbon"] .btn-action.active,
:root[data-theme="carbon"] .btn.btn-action:hover,
:root[data-theme="carbon"] .btn.btn-action:focus,
:root[data-theme="carbon"] .btn-side:hover,
:root[data-theme="carbon"] .btn-side:focus,
:root[data-theme="carbon"] .btn-save:hover,
:root[data-theme="carbon"] .btn-save:focus,
:root[data-theme="carbon"] .btn-done:hover,
:root[data-theme="carbon"] .btn-done:focus,
:root[data-theme="carbon"] .days-mode-btn.active:hover,
:root[data-theme="carbon"] .action-btn.btn-blue:hover,
:root[data-theme="carbon"] .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="carbon"] .btn-action[disabled],
:root[data-theme="carbon"] .btn-action.disabled,
:root[data-theme="carbon"] .btn-side[disabled],
:root[data-theme="carbon"] .btn-save[disabled],
:root[data-theme="carbon"] .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="carbon"] #devices_create .modal-dialog,
:root[data-theme="carbon"] #devices_edit .modal-dialog,
:root[data-theme="carbon"] #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="carbon"] #devices_create .modal-content,
:root[data-theme="carbon"] #devices_edit .modal-content,
:root[data-theme="carbon"] #devices_update .modal-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
}

:root[data-theme="carbon"] #devices_create .modal-header,
:root[data-theme="carbon"] #devices_edit .modal-header,
:root[data-theme="carbon"] #devices_update .modal-header,
:root[data-theme="carbon"] #devices_create .modal-footer,
:root[data-theme="carbon"] #devices_edit .modal-footer,
:root[data-theme="carbon"] #devices_update .modal-footer {
  flex: 0 0 auto !important;
}

:root[data-theme="carbon"] #devices_create .modal-body,
:root[data-theme="carbon"] #devices_edit .modal-body,
:root[data-theme="carbon"] #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="carbon"] #devices_create .multiexpand .dropdown-menu,
:root[data-theme="carbon"] #devices_edit .multiexpand .dropdown-menu,
:root[data-theme="carbon"] #devices_update .multiexpand .dropdown-menu,
:root[data-theme="carbon"] #devices_create .bootstrap-select.multiexpand .inner,
:root[data-theme="carbon"] #devices_edit .bootstrap-select.multiexpand .inner,
:root[data-theme="carbon"] #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="carbon"] .modal .btn-primary,
:root[data-theme="carbon"] .panel .btn-primary,
:root[data-theme="carbon"] form .btn-primary,
:root[data-theme="carbon"] .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="carbon"] .modal .btn-primary:hover,
:root[data-theme="carbon"] .panel .btn-primary:hover,
:root[data-theme="carbon"] form .btn-primary:hover,
:root[data-theme="carbon"] .btn.btn-primary:hover,
:root[data-theme="carbon"] .modal .btn-primary:focus,
:root[data-theme="carbon"] .btn.btn-primary:focus,
:root[data-theme="carbon"] .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="carbon"] .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="carbon"] .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="carbon"] #panel-devices .dropdown-menu > li > a {
  color: #E8E0D0 !important;
  background: transparent !important;
}
:root[data-theme="carbon"] #panel-devices .dropdown-menu > li > a:hover {
  background: rgba(201,168,76,.12) !important;
  color: #C9A84C !important;
}

/* ════════════════════════════════════════════════════════════════
   FIX: actionsbox (Seleccionar/Deseleccionar todo) + dropdown-header
   en multiselect bootstrap-select. Por defecto venian con bg blanco.
   ════════════════════════════════════════════════════════════════ */
:root[data-theme="carbon"] .bootstrap-select .bs-actionsbox {
  padding: 4px 6px !important;
  background: #1C1C1C !important;
  border-bottom: 1px solid rgba(201,168,76,.18) !important;
}
:root[data-theme="carbon"] .bootstrap-select .bs-actionsbox .btn-group {
  display: flex !important;
  gap: 4px !important;
  width: 100% !important;
}
:root[data-theme="carbon"] .bootstrap-select .bs-actionsbox .btn-group .actions-btn,
:root[data-theme="carbon"] .bootstrap-select .bs-actionsbox .btn-group button {
  flex: 1 !important;
  background: #141414 !important;
  background-color: #141414 !important;
  border: 1px solid rgba(201,168,76,.18) !important;
  color: #E8E0D0 !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="carbon"] .bootstrap-select .bs-actionsbox .btn-group .actions-btn:hover,
:root[data-theme="carbon"] .bootstrap-select .bs-actionsbox .btn-group button:hover {
  background: rgba(201,168,76,.12) !important;
  background-color: rgba(201,168,76,.12) !important;
  border-color: rgba(201,168,76,.40) !important;
  color: rgb(201,168,76) !important;
}

/* Dropdown header (separador de grupos: "SIN GRUPO", "CAMIONES", etc.) */
:root[data-theme="carbon"] .dropdown-menu .dropdown-header,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu .dropdown-header {
  background: #1C1C1C !important;
  color: rgb(201,168,76) !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(201,168,76,.12) !important;
  border-bottom: 1px solid rgba(201,168,76,.12) !important;
}

/* Items con texto bajo contraste — forzar contraste alto */
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li > a,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li > a span.text {
  color: #E8E0D0 !important;
}
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li.disabled > a,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li.disabled > a * {
  color: #8C877E !important;
  opacity: .6 !important;
}

/* Mejorar contraste de tabs inactivos (estaban en text-3 = casi invisible) */
:root[data-theme="carbon"] .nav-tabs > li > a {
  color: #8C877E !important;
}
:root[data-theme="carbon"] .nav-tabs > li > a:hover,
:root[data-theme="carbon"] .nav-tabs > li > a:focus {
  color: #E8E0D0 !important;
}
:root[data-theme="carbon"] .nav-tabs > li.active > a {
  color: rgb(201,168,76) !important;
}

/* Botones "+" pequenos / icon-plus / btn-row-add poco visibles en dark */
:root[data-theme="carbon"] .btn-add,
:root[data-theme="carbon"] a.btn-add,
:root[data-theme="carbon"] .icon.plus,
:root[data-theme="carbon"] .icon-plus,
:root[data-theme="carbon"] .btn[class*="plus"],
:root[data-theme="carbon"] .btn-row-add,
:root[data-theme="carbon"] .btn-add-row {
  background: rgba(201,168,76,.15) !important;
  border: 1px solid rgba(201,168,76,.40) !important;
  color: rgb(201,168,76) !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="carbon"] .btn-add:hover,
:root[data-theme="carbon"] a.btn-add:hover,
:root[data-theme="carbon"] .icon.plus:hover,
:root[data-theme="carbon"] .icon-plus:hover {
  background: rgba(201,168,76,.25) !important;
  border-color: rgb(201,168,76) !important;
  color: #E8E0D0 !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="carbon"] .bootstrap-select .dropdown-menu > .inner,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu .inner,
:root[data-theme="carbon"] .bootstrap-select.multiexpand .dropdown-menu > .inner,
:root[data-theme="carbon"] .bootstrap-select.multiexpand .dropdown-menu .inner {
  background: #141414 !important;
  background-color: #141414 !important;
}
/* Items default state (no solo hover) */
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li > a,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu .inner li > a,
:root[data-theme="carbon"] .bootstrap-select.multiexpand .dropdown-menu li > a {
  background: transparent !important;
  background-color: transparent !important;
  color: #E8E0D0 !important;
}
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li > a span.text,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li > a span:not(.check-mark) {
  color: #E8E0D0 !important;
}
/* Items disabled (greyed out devices) */
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li.disabled > a,
:root[data-theme="carbon"] .bootstrap-select .dropdown-menu li.disabled > a * {
  color: #8C877E !important;
  opacity: .6 !important;
}

/* nav-tabs DENTRO del modal — fondo transparente para que herede el dark */
:root[data-theme="carbon"] .modal .modal-body > .nav-tabs,
:root[data-theme="carbon"] .modal-body > .nav-tabs,
:root[data-theme="carbon"] .modal .nav.nav-tabs.nav-default {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(201,168,76,.15) !important;
}
:root[data-theme="carbon"] .modal .modal-body > .nav-tabs > li > a,
:root[data-theme="carbon"] .modal-body > .nav-tabs > li > a {
  background: transparent !important;
  color: #8C877E !important;
}
:root[data-theme="carbon"] .modal .modal-body > .nav-tabs > li > a:hover,
:root[data-theme="carbon"] .modal-body > .nav-tabs > li > a:hover {
  color: #E8E0D0 !important;
}
:root[data-theme="carbon"] .modal .modal-body > .nav-tabs > li.active > a,
:root[data-theme="carbon"] .modal-body > .nav-tabs > li.active > a {
  background: transparent !important;
  color: rgb(201,168,76) !important;
  border-bottom: 2px solid rgb(201,168,76) !important;
}

/* tab-content / tab-pane — bg transparente para heredar modal-body dark */
:root[data-theme="carbon"] .modal .tab-content,
:root[data-theme="carbon"] .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="carbon"] .alerts-schedule-grid,
:root[data-theme="carbon"] .schedule-grid,
:root[data-theme="carbon"] .schedule-rows,
:root[data-theme="carbon"] [class*="schedule"]:not([class*="day"]) {
  background: #1C1C1C !important;
  border-color: rgba(201,168,76,.15) !important;
}
:root[data-theme="carbon"] .schedule-grid td,
:root[data-theme="carbon"] .alerts-schedule-grid td {
  border-color: rgba(201,168,76,.10) !important;
  background: #141414 !important;
}
:root[data-theme="carbon"] .schedule-grid td.selected,
:root[data-theme="carbon"] .schedule-grid td.active,
:root[data-theme="carbon"] .alerts-schedule-grid td.selected,
:root[data-theme="carbon"] .alerts-schedule-grid td.active {
  background: rgba(201,168,76,.30) !important;
}

/* ════════════════════════════════════════════════════════════════
   STACK SIDEBAR REFRESH (carbon)
   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="carbon"] para ganar especificidad sobre
   las reglas legacy más arriba en el archivo.
   ════════════════════════════════════════════════════════════════ */

/* ─── Rail #nav-icons ─── */
:root[data-theme="carbon"] #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="carbon"] #nav-icons .nav-icon::before {
  content: none !important;
  display: none !important;
}

/* Card del rail: icon arriba + label abajo, papel apilado */
:root[data-theme="carbon"] #nav-icons .nav-icon,
:root[data-theme="carbon"] #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 #0D0D0D !important;
  transform: none !important;
  position: relative !important;
  overflow: visible !important;
}

:root[data-theme="carbon"] #nav-icons .nav-icon:hover,
:root[data-theme="carbon"] #nav-icons a.nav-icon:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 #0D0D0D !important;
  background: var(--s1) !important;
  color: var(--color-primary) !important;
}

:root[data-theme="carbon"] #nav-icons .nav-icon.active,
:root[data-theme="carbon"] #nav-icons .nav-icon.selected,
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #nav-panel.open { width: 380px !important; }

:root[data-theme="carbon"] #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="carbon"] #panel-devices > .nav-panel-header,
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] .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="carbon"] .sidebar-search-input::placeholder {
  color: var(--t3) !important;
}
:root[data-theme="carbon"] .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="carbon"] .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="carbon"] .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="carbon"] .panel-header-add-btn .icon {
  font-size: 16px !important;
  color: inherit !important;
}
:root[data-theme="carbon"] .panel-header-add-btn .icon::before {
  content: '+' !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* ─── Tabs (Dispositivos/Eventos/Historial) ─── */
:root[data-theme="carbon"] #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="carbon"] #panel-devices .nav-tabs > li {
  margin: 0 !important;
}
:root[data-theme="carbon"] #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="carbon"] #panel-devices .nav-tabs > li > a:hover {
  color: var(--t1) !important;
  border-bottom-color: var(--b2) !important;
  background: transparent !important;
}
:root[data-theme="carbon"] #panel-devices .nav-tabs > li.active > a,
:root[data-theme="carbon"] #panel-devices .nav-tabs > li.active > a:focus,
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #device-filter-bar .dfb-btn:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #ajax-items .group {
  margin-bottom: 0 !important;
  background: var(--s1) !important;
}
:root[data-theme="carbon"] #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="carbon"] #ajax-items .group-heading * {
  color: var(--color-text-inv) !important;
}
/* Ocultar el checkbox del grupo (no en la referencia) */
:root[data-theme="carbon"] #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="carbon"] #ajax-items .group-heading > .group-title,
:root[data-theme="carbon"] #ajax-items .group-heading > .btn-group,
:root[data-theme="carbon"] #ajax-items .group-heading > .checkbox {
  display: block !important;
  width: auto !important;
}
:root[data-theme="carbon"] #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="carbon"] #ajax-items .group-heading .group-title::after {
  display: none !important;
  content: none !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #ajax-items .group-heading .btn.icon.options,
:root[data-theme="carbon"] #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="carbon"] #ajax-items .group-heading .btn.icon.options:hover,
:root[data-theme="carbon"] #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="carbon"] #ajax-items ul.group-list,
:root[data-theme="carbon"] #ajax-items .group-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--s1) !important;
}
:root[data-theme="carbon"] #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="carbon"] #ajax-items li[data-device-id]:hover {
  background: var(--s2) !important;
}
:root[data-theme="carbon"] #ajax-items li[data-device-id]:last-child {
  border-bottom: 0 !important;
}
:root[data-theme="carbon"] #ajax-items li[data-device-id] .checkbox {
  display: none !important;  /* checkbox a la izquierda no en la referencia */
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #ajax-items li[data-device-id] .details {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
:root[data-theme="carbon"] #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="carbon"] #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="carbon"] #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="carbon"] #ajax-items li[data-device-id] [data-device="detect_engine"].on {
  color: var(--color-primary) !important;
}

/* Botón options (3-dots) */
:root[data-theme="carbon"] #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="carbon"] #ajax-items li[data-device-id] .btn-group .icon.options:hover {
  background: var(--s2) !important;
  color: var(--t1) !important;
}

/* /STACK SIDEBAR REFRESH (carbon) */

/* ══════════════════════════════════════════════════════════════════════
   nav-sidebar.css — variables consumidas via var(--nav-primary,...) etc.
   Sin este bloque, nav-sidebar usa los fallbacks hardcoded (azul Google
   y blancos) y el theme NO se refleja en el panel lateral del mapa. */
:root[data-theme="carbon"] {
  --nav-primary:          #1C1C1C;
  --nav-on-primary:       #C9A84C;
  --nav-on-primary-muted: rgba(201,168,76,.6);
  --nav-icon-active-bg:   rgba(201,168,76,.15);
  --panel-bg:             #1C1C1C;
  --text-color:           #E8E0D0;
  --text-muted:           #B8B0A0;
  --gray-text:            #B8B0A0;
  --muted-text:           #8C877E;
  --nav-hover-bg:         rgba(201,168,76,.12);
  --nav-hover-text:       #C9A84C;
}