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

/* 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;
}