/* ════════════════════════════════════════════════════════════════════════════
   FASEGA — Stack style (papel apilado)
   ════════════════════════════════════════════════════════════════════════════
   Aplica el lenguaje visual STACK a 3 zonas SIN tocar HTML/JS:
     1. Rail lateral del mapa  → #nav-icons .nav-icon
     2. Sub-paneles que se abren → .nav-panel-section
     3. Lista de dispositivos del widget panel → #arctic-dv-devicelist
   Compatible con los 8 themes (variables del theme activo + overrides
   específicos de sombra y color por theme).
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   ZONA 1 — RAIL LATERAL DEL MAPA  (#nav-icons .nav-icon)
   Cards apiladas verticalmente con sombra offset dura.
   Activo: doble offset + sombra con primary tint.
   ════════════════════════════════════════════════════════════════ */

/* IMPORTANT: usamos :root[data-theme] para empatar specificity (0,2,1) con
   las reglas de cada theme.css (que pisan #nav-icons con :root[data-theme="X"]).
   Como fasega-stack-style.css carga DESPUÉS de cada theme.css, ganamos
   con tie-break por load order. Sin esto, los themes ganaban por specificity
   y mis edits nunca aplicaban. */

:root[data-theme] #nav-icons {
  left: 6px !important;
  width: 60px !important;
  min-width: 60px !important;
  background: var(--color-surface-1) !important;
  border-right: 1px solid var(--color-border-1) !important;
  padding: 7px 5px 9px 5px !important;
  gap: 6px !important;
  box-shadow: none !important;
}

/* Cada item del rail = card */

:root[data-theme] #nav-icons .nav-icon,:root[data-theme] #nav-icons a.nav-icon {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 44px !important;
  padding: 5px 3px !important;
  background: var(--color-surface-1) !important;
  border: 1px solid var(--color-border-2) !important;
  border-radius: 5px !important;
  color: var(--color-text-2) !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  box-shadow: 1px 1px 0 var(--color-surface-3) !important;
  text-decoration: none !important;
}

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

:root[data-theme] #nav-icons .nav-icon.active,:root[data-theme] #nav-icons .nav-icon.selected,:root[data-theme] #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;
}

/* Iconos SVG lineales del rail (.ni-svg) — heredan currentColor del item */

:root[data-theme] #nav-icons .nav-icon .ni-svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  flex-shrink: 0 !important;
  color: inherit !important;
}

/* Compatibilidad con iconos legacy que pudieran quedar */

:root[data-theme] #nav-icons .nav-icon .icon,:root[data-theme] #nav-icons .nav-icon i.fa {
  font-size: 15px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Ocultar pseudo-elementos ::before / ::after que algunos themes ponen
   sobre las clases legacy (.icon devices, .icon alerts, etc.) — ahora
   usamos SVG lineal puro, sin emojis ni font-icons. */

:root[data-theme] #nav-icons .nav-icon .icon::before,:root[data-theme] #nav-icons .nav-icon .icon::after,:root[data-theme] #nav-icons .nav-icon i.fa::before,:root[data-theme] #nav-icons .nav-icon i.fa::after {
  display: none !important;
  content: none !important;
}

:root[data-theme] #nav-icons .nav-icon .nav-label {
  display: block !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  color: inherit !important;
  text-shadow: none !important;
}

:root[data-theme] #nav-icons .nav-icon.active .nav-label {
  font-weight: 700 !important;
  color: var(--color-text-inv) !important;
}

/* ════════════════════════════════════════════════════════════════
   ZONA 2 — SUB-PANELES (.nav-panel-section)
   Que se abren a la derecha del rail. Look "papel" con sombra
   suave hacia la derecha que sugiere que sale del rail.
   ════════════════════════════════════════════════════════════════ */

:root[data-theme] #nav-panel {
  left: 66px !important;
  /* rail at left:6 + width:60 = right edge 66px */
}

#nav-panel .nav-panel-section,#nav-panel .nav-panel-section.active {
  background: var(--color-surface-1) !important;
  border-right: 1px solid var(--color-border-1) !important;
  border-radius: 0 var(--radius-lg, 10px) var(--radius-lg, 10px) 0 !important;
  margin: 8px 0 0 -1px !important;
  box-shadow: 4px 0 16px rgba(0, 0, 0, .08),    2px 0 6px rgba(0, 0, 0, .04) !important;
}

/* Header del panel */

#nav-panel .nav-panel-header,#nav-panel #panel-devices-header {
  padding: 12px 14px 10px !important;
  border-bottom: 1px solid var(--color-border-1) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--color-text-1) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  background: var(--color-surface-1) !important;
}

/* Cards/items dentro del panel (links a settings, GPRS, etc.) */

#nav-panel .nav-panel-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 12px !important;
  margin: 6px 8px !important;
  background: var(--color-surface-1) !important;
  border: 1px solid var(--color-border-2) !important;
  border-radius: var(--radius-lg, 10px) !important;
  color: var(--color-text-1) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}

#nav-panel .nav-panel-link:hover {
  border-color: var(--color-primary-border) !important;
  background: var(--color-surface-2) !important;
  transform: translateX(2px) !important;
  text-decoration: none !important;
}

/* El icono del nav-panel-link toma look de tile primary-bg */

#nav-panel .nav-panel-link .npl-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--radius-md, 8px) !important;
  background: var(--color-primary-bg) !important;
  color: var(--color-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 18px !important;
}

#nav-panel .nav-panel-link .npl-text {
  flex: 1 !important;
  min-width: 0 !important;
}

#nav-panel .nav-panel-link .npl-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-text-1) !important;
  margin-bottom: 1px !important;
  display: block !important;
}

#nav-panel .nav-panel-link .npl-desc {
  font-size: 11px !important;
  color: var(--color-text-3) !important;
  display: block !important;
}

/* ════════════════════════════════════════════════════════════════
   ZONA 3 — DEVICE LIST (#arctic-dv-devicelist)
   Las reglas viven ahora en el source per-theme (arctic.css/carbon.css/etc.)
   bajo `:root[data-theme="X"] #arctic-dv-devicelist …` — no hace falta
   override aquí.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   AJUSTES PUNTUALES POR THEME — solo nav-icons (rail STACK)
   Las sombras del device list ya están en cada source theme.
   ════════════════════════════════════════════════════════════════ */

/* Themes oscuros: sombra más oscura para que se note el offset */

:root[data-theme="carbon"] #nav-icons .nav-icon {
  box-shadow: 2px 2px 0 #0D0D0D !important;
}

:root[data-theme="carbon"] #nav-icons .nav-icon:hover {
  box-shadow: 3px 3px 0 #0D0D0D !important;
}

:root[data-theme="carbon"] #nav-icons .nav-icon.active {
  box-shadow: 4px 4px 0 rgba(201,168,76,.18), 4px 4px 0 1px rgba(201,168,76,.30) !important;
}

:root[data-theme="grafito"] #nav-icons .nav-icon {
  box-shadow: 2px 2px 0 #16181D !important;
}

:root[data-theme="grafito"] #nav-icons .nav-icon:hover {
  box-shadow: 3px 3px 0 #16181D !important;
}

:root[data-theme="grafito"] #nav-icons .nav-icon.active {
  box-shadow: 4px 4px 0 rgba(203,213,225,.15), 4px 4px 0 1px rgba(203,213,225,.30) !important;
}

:root[data-theme="medianoche"] #nav-icons .nav-icon {
  box-shadow: 2px 2px 0 #0A1020 !important;
}

:root[data-theme="medianoche"] #nav-icons .nav-icon:hover {
  box-shadow: 3px 3px 0 #0A1020 !important;
}

:root[data-theme="medianoche"] #nav-icons .nav-icon.active {
  box-shadow: 4px 4px 0 rgba(56,189,248,.15), 4px 4px 0 1px rgba(56,189,248,.30) !important;
}

:root[data-theme="obsidiana"] #nav-icons .nav-icon {
  box-shadow: 2px 2px 0 #050607 !important;
}

:root[data-theme="obsidiana"] #nav-icons .nav-icon:hover {
  box-shadow: 3px 3px 0 #050607 !important;
}

:root[data-theme="obsidiana"] #nav-icons .nav-icon.active {
  box-shadow: 4px 4px 0 rgba(20,184,166,.15), 4px 4px 0 1px rgba(20,184,166,.30) !important;
}

/* Themes claros: sombras tintadas con su primary */

:root[data-theme="arctic"] #nav-icons .nav-icon.active {
  box-shadow: 4px 4px 0 rgba(24,73,214,.10), 4px 4px 0 1px rgba(24,73,214,.28) !important;
}

:root[data-theme="lino"] #nav-icons .nav-icon.active {
  box-shadow: 4px 4px 0 rgba(101,120,47,.10), 4px 4px 0 1px rgba(101,120,47,.28) !important;
}

:root[data-theme="lavanda"] #nav-icons .nav-icon.active {
  box-shadow: 4px 4px 0 rgba(124,58,237,.10), 4px 4px 0 1px rgba(124,58,237,.28) !important;
}

:root[data-theme="piedra"] #nav-icons .nav-icon.active {
  box-shadow: 4px 4px 0 rgba(87,83,78,.12), 4px 4px 0 1px rgba(87,83,78,.30) !important;
}

/* ════════════════════════════════════════════════════════════════
   ALERTAS — Tab "Tipo" → "Eventos personalizados" (multiselect)
   La lista del multiexpand quedaba visualmente colapsada cuando el
   <select> está vacío (sin dispositivos seleccionados todavía): sin
   contenido, sin borde claro, fondo blanco sobre fondo blanco. Damos
   altura mínima visible + borde distinguible al wrapper y a la lista
   interna, y mensaje guía cuando está vacía.
   ════════════════════════════════════════════════════════════════ */

:root[data-theme] #alerts-form-type .bootstrap-select.multiexpand:not(.bs-container) > .dropdown-menu {
  background: var(--color-surface-2, #f4f6fa) !important;
  border: 1px solid var(--color-border-2, rgba(0,0,0,.12)) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  min-height: 200px !important;
}

:root[data-theme] #alerts-form-type .bootstrap-select.multiexpand .dropdown-menu.inner {
  min-height: 160px !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  background: #fff !important;
  border: 1px dashed var(--color-border-2, rgba(0,0,0,.15)) !important;
  border-radius: 6px !important;
  padding: 6px !important;
}

/* ════════════════════════════════════════════════════════════════
   FIX GLOBAL — desorganización de listas multiexpand al seleccionar.
   Los <li> del multiexpand vienen con col-* FLOTADOS de light-navy-pro.css.
   Al marcar un ítem éste crece (negrita + fondo de selección) y los floats
   siguientes se traban contra él y saltan de posición ("la lista se
   desorganiza"). Grid: el alto de una celda no afecta la posición de las
   demás. Aplica a TODAS las listas multiexpand del frontend (alertas,   dispositivos, geocercas, grupos, sharing, plantillas, beacons, etc.). */

:root[data-theme] .bootstrap-select.multiexpand .dropdown-menu.inner {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  align-content: start !important;
  gap: 1px !important;
}

:root[data-theme] .bootstrap-select.multiexpand .dropdown-menu.inner > li {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Mensaje guía cuando la lista está vacía (sin dispositivos elegidos
   aún → no hay options en el <select>, el .inner no tiene <li>s). */

:root[data-theme] #alerts-form-type .bootstrap-select.multiexpand .dropdown-menu.inner:empty::before {
  content: 'Seleccione dispositivos en la pestaña "Dispositivos" para ver los eventos personalizados disponibles.';
  display: block;
  text-align: center;
  color: var(--color-text-3, #8a90a0);
  font-size: 12px;
  padding: 32px 16px;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════
   Estilo COMPACTO / DENSO para dropdowns con lista (bootstrap-select
   single-select: Protocolo de dispositivos, grupos, tipo, etc.). Más
   opciones visibles, divisores tenues y scrollbar fina. Los colores de
   hover/selección los sigue manejando cada tema. Se EXCLUYE .multiexpand
   (esos usan grid multi-columna, no lista densa). Aplica a todos los temas. */

:root[data-theme] .bootstrap-select:not(.multiexpand) .dropdown-menu.inner {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

:root[data-theme] .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li > a {
  padding: 5px 14px !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}

/* Divisor tenue entre ítems (border-top en todos menos el primero). */

:root[data-theme] .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li + li > a {
  border-top: 1px solid rgba(120,130,150,.14) !important;
}

/* Scrollbar fina (WebKit). */

:root[data-theme] .bootstrap-select:not(.multiexpand) .dropdown-menu.inner::-webkit-scrollbar {
  width: 8px !important;
}

:root[data-theme] .bootstrap-select:not(.multiexpand) .dropdown-menu.inner::-webkit-scrollbar-thumb {
  background: rgba(120,130,150,.45) !important;
  border-radius: 8px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}

:root[data-theme] .bootstrap-select:not(.multiexpand) .dropdown-menu.inner::-webkit-scrollbar-track {
  background: transparent !important;
}

/* Contenedor del dropdown más pulido: redondeado + sombra + borde limpio
   (todos los temas). Hace el cambio claramente visible respecto al look viejo. */

:root[data-theme] .bootstrap-select:not(.multiexpand) .dropdown-menu {
  border-radius: 12px !important;
  border: 1px solid rgba(15,30,60,.10) !important;
  box-shadow: 0 12px 34px rgba(15,30,60,.18) !important;
  /* OJO: NO forzar overflow acá — bootstrap-select pone overflow-y:auto inline
     en este contenedor para el scroll; un overflow:hidden !important lo mata. */
}

:root[data-theme] .bootstrap-select:not(.multiexpand) .dropdown-menu.inner {
  border-radius: 0 0 12px 12px !important;
}

/* Arctic: reemplaza el bloque azul SÓLIDO a todo el ancho del ítem
   seleccionado/resaltado por un "tinte" suave con barra de acento a la
   izquierda. Es lo que hacía que se viera igual que antes. Usa las variables
   del tema (--color-primary*) con fallback. */

:root[data-theme="arctic"] .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li > a:hover,:root[data-theme="arctic"] .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li > a:focus,:root[data-theme="arctic"] .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li.active > a,:root[data-theme="arctic"] .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li.selected > a {
  background: var(--color-primary-tint, #eef3ff) !important;
  color: var(--color-primary, #1849d6) !important;
}

:root[data-theme="arctic"] .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li > a:hover *,:root[data-theme="arctic"] .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li > a:focus *,:root[data-theme="arctic"] .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li.active > a *,:root[data-theme="arctic"] .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li.selected > a * {
  color: var(--color-primary, #1849d6) !important;
}

:root[data-theme="arctic"] .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li.selected > a {
  font-weight: 600 !important;
  position: relative !important;
}

:root[data-theme="arctic"] .bootstrap-select:not(.multiexpand) .dropdown-menu.inner > li.selected > a::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 6px !important;
  bottom: 6px !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: var(--color-primary, #1849d6) !important;
}

/* ════════════════════════════════════════════════════════════════
   PANEL ÚNICO DE GEOCERCAS — lista + formularios inline en la misma
   superficie (#panel-geofences). Reemplaza el modal + la sub-vista
   legacy. Los 3 panes (#geofencing_tab/_create/_edit) son un grupo de
   tabs bootstrap propio; se alterna list ↔ form vía openTab existente. */

#nav-panel #panel-geofences.active {
  position: fixed !important;
  left: 70px !important;
  top: 52px !important;
  bottom: 0 !important;
  width: 356px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 998 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.2) !important;
}

/* Ocultar las nav-tabs de bootstrap que sirven solo para control JS */

#nav-panel #panel-geofences .gf-tabs {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

#nav-panel #panel-geofences .gf-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}

#nav-panel #panel-geofences .tab-pane {
  display: none !important;
}

#nav-panel #panel-geofences .tab-pane.active {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* Cabecera azul: título + buscador + botón nueva */

.gf-head {
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  background: var(--nav-primary, #1849d6) !important;
}

.gf-title {
  flex: none !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

.gf-search {
  position: relative !important;
  flex: 1 !important;
}

.gf-search .gf-mag {
  position: absolute !important;
  left: 10px !important;
  top: 6px !important;
  color: rgba(255,255,255,.8) !important;
  font-size: 12px !important;
  pointer-events: none !important;
}

.gf-search input {
  width: 100% !important;
  height: 30px !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0 12px 0 28px !important;
  font-size: 12.5px !important;
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.gf-search input::placeholder {
  color: rgba(255,255,255,.7) !important;
}

.gf-add {
  flex: none !important;
  width: 30px !important;
  height: 30px !important;
  border: none !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--nav-primary, #1849d6) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 !important;
}

/* Cuerpo scrolleable con la lista (#ajax-geofences) */

.gf-body {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 0 !important;
  background: #fff !important;
}

/* Pie con importar/exportar */

.gf-foot {
  flex: none !important;
  border-top: 1px solid var(--color-border, #e6ebf3) !important;
  padding: 8px 12px !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  background: #fff !important;
}

.gf-foot .gf-fbtn {
  border: 1px solid var(--color-border-2, #d7deea) !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  color: var(--text-color, #1f2733) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.gf-foot .gf-fbtn:hover {
  border-color: var(--nav-primary, #1849d6) !important;
  color: var(--nav-primary, #1849d6) !important;
}

/* Formularios crear/editar: ocupan el panel y scrollean */

#geofencing_create,#geofencing_edit {
  padding: 12px !important;
  overflow-y: auto !important;
}