/* =========================================================
   v14_skins.css — V14 Modern Apple + Variantes (ULTRA)
   - Modern (Apple): gris iOS
   - Variantes: rojo / morado / azul / oscuro
   - Barras: superior + Dispositivos + Eventos + headers grid
   - Mantiene diseño (no cambia layout), solo color y selección visible
   ========================================================= */

/* ------------------------------
   VARIABLES BASE (Modern Apple)
   ------------------------------ */
html body.v14-skin {
  --v14-topbar-bg: rgba(246, 247, 249, 0.96);
  --v14-topbar-fg: #111111;

  --v14-sidebar-bar-bg: rgba(246, 247, 249, 0.96);
  --v14-sidebar-bar-fg: #111111;

  --v14-accent: #5a67d8;
  --v14-accent-weak: rgba(90, 103, 216, 0.16);
  --v14-accent-weak2: rgba(90, 103, 216, 0.10);

  --v14-sep: rgba(0,0,0,0.08);
  --v14-sep-strong: rgba(0,0,0,0.12);

  --v14-menu-active: rgba(0,0,0,0.06);
  --v14-menu-selected: rgba(0,0,0,0.10);
}

/* Classic: NO tocar */
html body.v14-skin.v14-skin-classic {}

/* Modern Apple base */
html body.v14-skin.v14-skin-modern {
  --v14-accent: #5a67d8;
  --v14-accent-weak: rgba(90, 103, 216, 0.16);
  --v14-accent-weak2: rgba(90, 103, 216, 0.10);
}

/* Variantes SOLO color */
html body.v14-skin.v14-skin-modern-red {
  --v14-accent: #e53935;
  --v14-accent-weak: rgba(229, 57, 53, 0.18);
  --v14-accent-weak2: rgba(229, 57, 53, 0.12);
}

html body.v14-skin.v14-skin-modern-purple {
  --v14-accent: #8e24aa;
  --v14-accent-weak: rgba(142, 36, 170, 0.18);
  --v14-accent-weak2: rgba(142, 36, 170, 0.12);
}

html body.v14-skin.v14-skin-modern-blue {
  --v14-accent: #1e88e5;
  --v14-accent-weak: rgba(30, 136, 229, 0.18);
  --v14-accent-weak2: rgba(30, 136, 229, 0.12);
}

/* Modern Dark (recuperado) */
html body.v14-skin.v14-skin-modern-dark {
  --v14-topbar-bg: rgba(18, 18, 20, 0.96);
  --v14-topbar-fg: #ffffff;

  --v14-sidebar-bar-bg: rgba(18, 18, 20, 0.96);
  --v14-sidebar-bar-fg: #ffffff;

  --v14-accent: #2ea8ff;
  --v14-accent-weak: rgba(46, 168, 255, 0.22);
  --v14-accent-weak2: rgba(46, 168, 255, 0.14);

  --v14-sep: rgba(255,255,255,0.10);
  --v14-sep-strong: rgba(255,255,255,0.16);

  --v14-menu-active: rgba(255,255,255,0.10);
  --v14-menu-selected: rgba(255,255,255,0.16);
}

/* =========================================================
   1) BARRA SUPERIOR (Mapa / Reportes / iconos)
   (Release móvil a veces NO usa toolbar-header-style)
   Cubrimos: toolbar-header-style + toolbars top
   ========================================================= */

/* toolbar clásica (si existe) */
html body.v14-skin:not(.v14-skin-classic) .x-toolbar.toolbar-header-style {
  background: var(--v14-topbar-bg) !important;
  color: var(--v14-topbar-fg) !important;
  border-bottom: 1px solid var(--v14-sep) !important;
}

/* fallback robusto: toolbars pegadas arriba */
html body.v14-skin:not(.v14-skin-classic) .x-toolbar.x-docked-top,
html body.v14-skin:not(.v14-skin-classic) .x-toolbar.x-toolbar-default.x-docked-top,
html body.v14-skin:not(.v14-skin-classic) .x-toolbar.x-toolbar.x-docked-top {
  background: var(--v14-topbar-bg) !important;
  color: var(--v14-topbar-fg) !important;
  border-bottom: 1px solid var(--v14-sep) !important;
}

/* textos/iconos dentro de la barra superior */
html body.v14-skin:not(.v14-skin-classic) .x-toolbar.x-docked-top *,
html body.v14-skin:not(.v14-skin-classic) .x-toolbar.toolbar-header-style * {
  color: var(--v14-topbar-fg) !important;
}

/* =========================================================
   2) DISPOSITIVOS / EVENTOS / REPORTES (barras laterales)
   Cubrimos headers de panel + grid headers + toolbars
   ========================================================= */

/* headers de panel (Dispositivos, Eventos, Reportes) */
html body.v14-skin:not(.v14-skin-classic) .x-panel-header,
html body.v14-skin:not(.v14-skin-classic) .x-panel-header-default,
html body.v14-skin:not(.v14-skin-classic) .x-panel-header.x-header {
  background: var(--v14-sidebar-bar-bg) !important;
  color: var(--v14-sidebar-bar-fg) !important;
  border-top: 1px solid var(--v14-sep) !important;
  border-bottom: 1px solid var(--v14-sep) !important;
}

/* grid headers (muy usado por Eventos/Reportes) */
html body.v14-skin:not(.v14-skin-classic) .x-grid-header-ct,
html body.v14-skin:not(.v14-skin-classic) .x-column-header,
html body.v14-skin:not(.v14-skin-classic) .x-grid-header-ct .x-column-header {
  background: var(--v14-sidebar-bar-bg) !important;
  color: var(--v14-sidebar-bar-fg) !important;
  border-bottom: 1px solid var(--v14-sep) !important;
}

/* toolbars internas (arriba de listas) */
html body.v14-skin:not(.v14-skin-classic) .x-toolbar.x-toolbar-default {
  /* no pintamos TODAS con topbar: solo las que forman parte de paneles */
  /* pero si tu build no distingue, esto ayuda a que Dispositivos/Eventos cambien */
  background: var(--v14-sidebar-bar-bg) !important;
  color: var(--v14-sidebar-bar-fg) !important;
}

/* texto en barras laterales */
html body.v14-skin:not(.v14-skin-classic) .x-panel-header *,
html body.v14-skin:not(.v14-skin-classic) .x-grid-header-ct *,
html body.v14-skin:not(.v14-skin-classic) .x-column-header *,
html body.v14-skin:not(.v14-skin-classic) .x-toolbar.x-toolbar-default * {
  color: var(--v14-sidebar-bar-fg) !important;
}

/* =========================================================
   3) SELECCIÓN VISIBLE (sin perder Apple style)
   - Menús (centrar mapa / geocerca / etc)
   - Listas / boundlist / combos
   ========================================================= */

html body.v14-skin:not(.v14-skin-classic) .x-menu-item-active > .x-menu-item-link,
html body.v14-skin:not(.v14-skin-classic) .x-boundlist-item-over {
  background: var(--v14-menu-active) !important;
}

html body.v14-skin:not(.v14-skin-classic) .x-menu-item-selected > .x-menu-item-link,
html body.v14-skin:not(.v14-skin-classic) .x-boundlist-selected {
  background: var(--v14-menu-selected) !important;
}

/* barra/acento a la izquierda para “se notó el click” */
html body.v14-skin:not(.v14-skin-classic) .x-menu-item-active > .x-menu-item-link,
html body.v14-skin:not(.v14-skin-classic) .x-menu-item-selected > .x-menu-item-link {
  box-shadow: inset 3px 0 0 var(--v14-accent) !important;
}

/* botones activos (si Ext marca pressed) */
html body.v14-skin:not(.v14-skin-classic) .x-btn-pressed,
html body.v14-skin:not(.v14-skin-classic) .x-btn.x-btn-pressed {
  background: var(--v14-accent-weak) !important;
  border-color: var(--v14-sep-strong) !important;
}

/* =========================================================
   4) ACENTO DE COLOR (sin cambiar diseño)
   - líneas pequeñas, indicadores, tabs activos
   ========================================================= */
html body.v14-skin:not(.v14-skin-classic) .x-tab.x-tab-active {
  box-shadow: inset 0 -2px 0 var(--v14-accent) !important;
}

/* =========================================================
   5) MODERNO OSCURO — contraste iconos
   Requisito: textos/iconos “blancos” ok, pero el “dibujo interior” negro.
   Aquí hacemos:
   - texto/label blanco
   - el svg/path/glyph interior negro (si existe)
   ========================================================= */

/* textos blancos en dark */
html body.v14-skin.v14-skin-modern-dark .x-panel-header *,
html body.v14-skin.v14-skin-modern-dark .x-grid-header-ct *,
html body.v14-skin.v14-skin-modern-dark .x-toolbar.x-docked-top *,
html body.v14-skin.v14-skin-modern-dark .x-toolbar.x-toolbar-default * {
  color: #fff !important;
}

/* “interior” negro: SVG y glyphs dentro de icon containers */
html body.v14-skin.v14-skin-modern-dark .x-btn-icon-el svg *,
html body.v14-skin.v14-skin-modern-dark .x-menu-item-icon svg *,
html body.v14-skin.v14-skin-modern-dark .x-tool-img svg * {
  fill: #000 !important;
  stroke: #000 !important;
}

/* si el ícono es font/glyph (no svg) */
html body.v14-skin.v14-skin-modern-dark .x-btn-icon-el,
html body.v14-skin.v14-skin-modern-dark .x-menu-item-icon {
  /* el “contenedor” puede ser blanco por el tema; NO lo forzamos a negro */
  /* solo aseguramos que no se pierda visibilidad */
  filter: none !important;
}