/* ============================================================================
   refined.css — Piel "elegante y pulida" para el panel LEGACY (GPSWOX/Tobuli)
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de assets/css/<template>.css en
   Tobuli/Views/Frontend/Layouts/partials/head.blade.php, así que gana a
   igualdad de especificidad. NO sustituye colores del template: define sus
   propias variables (--rf-*) y las aplica sólo a la ventana del mapa
   (rail izquierdo, panel de objetos, controles del mapa y dropdowns).

   El acento (--rf-accent) sigue al template en uso; el activo del servidor es
   dark-blue (#1b99bd). Si se cambia de plantilla, ajustar la línea de
   --rf-accent (o dejar que body.rf-light / body.rf-dark pongan los neutros).

   Todo lo que se toca es presentación: no se cambia ninguna clase ni el
   marcado que generan item.blade.php / groups.blade.php ni el JS de app.js.
   ==========================================================================*/

/* Neutros por defecto en <body>: así las variables SIEMPRE resuelven, incluso en
   las vistas que reutilizan #sidebar/#tools-sidebar sin pasar por loged.blade.php
   (Devices/follow_map y Layouts/sharing, que también cargan este partial head).
   El modo claro se activa con class="rf-light" en el <body>. */
body {
  /* --- acento (hereda del template dark-blue) --- */
  --rf-accent: #1b99bd;
  --rf-accent-ink: #ffffff;

  /* --- forma y profundidad --- */
  --rf-r-lg: 14px;
  --rf-r: 11px;
  --rf-r-sm: 8px;
  --rf-ease: cubic-bezier(.22, .61, .36, 1);
  --rf-shadow-panel: 0 22px 48px -22px rgba(0, 0, 0, .78), 0 2px 10px rgba(0, 0, 0, .32);
  --rf-shadow-float: 0 16px 34px -14px rgba(0, 0, 0, .72);
  --rf-shadow-btn: 0 6px 16px -9px rgba(0, 0, 0, .9);

  /* --- transiciones suaves en toda la ventana --- */
  --rf-tr: .16s var(--rf-ease);

  /* --- paleta oscura (plantillas dark-*) --- */
  --rf-surface: rgba(20, 24, 30, .93);
  --rf-surface-2: rgba(28, 33, 40, .92);
  --rf-rail: linear-gradient(180deg, #14181e 0%, #101419 100%);
  --rf-line: rgba(255, 255, 255, .075);
  --rf-line-soft: rgba(255, 255, 255, .045);
  --rf-text: #e7eef5;
  --rf-text-2: #b9c5d1;
  --rf-muted: #8695a4;
  --rf-hover: rgba(255, 255, 255, .05);
  --rf-field: rgba(255, 255, 255, .055);
  --rf-ink-on-accent: #ffffff;
}

/* Tema oscuro: idéntico al defecto, explícito por si se cambia el default. */
body.rf-dark {
  --rf-surface: rgba(20, 24, 30, .93);
  --rf-surface-2: rgba(28, 33, 40, .92);
  --rf-rail: linear-gradient(180deg, #14181e 0%, #101419 100%);
  --rf-line: rgba(255, 255, 255, .075);
  --rf-line-soft: rgba(255, 255, 255, .045);
  --rf-text: #e7eef5;
  --rf-text-2: #b9c5d1;
  --rf-muted: #8695a4;
  --rf-hover: rgba(255, 255, 255, .05);
  --rf-field: rgba(255, 255, 255, .055);
  --rf-ink-on-accent: #ffffff;
}

/* Tema claro (light-*): blancos suaves + filetes oscuros muy tenues. */
body.rf-light {
  --rf-surface: rgba(255, 255, 255, .95);
  --rf-surface-2: rgba(255, 255, 255, .92);
  --rf-rail: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);
  --rf-line: rgba(16, 24, 40, .1);
  --rf-line-soft: rgba(16, 24, 40, .06);
  --rf-text: #1f2a37;
  --rf-text-2: #3d4a5c;
  --rf-muted: #7b8794;
  --rf-hover: rgba(16, 24, 40, .04);
  --rf-field: rgba(16, 24, 40, .035);
  --rf-ink-on-accent: #ffffff;
}

/* Tintes derivados del acento. Valor estático primero (calculado sobre
   #1b99bd) y color-mix() por encima sólo si el navegador lo soporta: así,
   en navegadores viejos no se queda el panel sin los tintes de selección. */
body {
  --rf-accent-soft: rgba(27, 153, 189, .16);
  --rf-accent-line: rgba(27, 153, 189, .42);
  --rf-accent-fill: #1889a9;
  --rf-accent-glow: rgba(27, 153, 189, .26);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  body {
    --rf-accent-soft: color-mix(in srgb, var(--rf-accent) 16%, transparent);
    --rf-accent-line: color-mix(in srgb, var(--rf-accent) 42%, transparent);
    --rf-accent-fill: color-mix(in srgb, var(--rf-accent) 90%, #000);
    --rf-accent-glow: color-mix(in srgb, var(--rf-accent) 26%, transparent);
  }
}

/* ============================================================================
   1. RAIL IZQUIERDO (#tools-sidebar)
   ==========================================================================*/
#tools-sidebar {
  background: var(--rf-rail);
  border-right: 1px solid var(--rf-line);
  box-shadow: 6px 0 26px -18px rgba(0, 0, 0, .9);
}

#tools-sidebar ul li {
  padding: 5px 9px;
}

#tools-sidebar ul li a {
  position: relative;
  border-radius: var(--rf-r);
  padding: 10px 4px;
  color: var(--rf-muted);
  transition: background var(--rf-tr), color var(--rf-tr), box-shadow var(--rf-tr);
}

#tools-sidebar ul li a:hover,
#tools-sidebar ul li.active a {
  background: var(--rf-accent-soft);
  color: var(--rf-accent);
  box-shadow: inset 0 0 0 1px var(--rf-accent-line);
}

/* Marca de elemento activo: barrita de acento pegada al borde del rail. */
#tools-sidebar ul li.active a::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--rf-accent);
}

#tools-sidebar ul li a i,
#tools-sidebar ul li a span {
  transition: transform var(--rf-tr);
}

#tools-sidebar ul li a:hover i {
  transform: translateY(-1px);
}

/* ============================================================================
   2. PANEL DE OBJETOS (#sidebar)
   ==========================================================================*/
#sidebar .sidebar-content {
  background: var(--rf-surface);
  border-right: 1px solid var(--rf-line);
  border-radius: 0 var(--rf-r-lg) var(--rf-r-lg) 0;
  box-shadow: var(--rf-shadow-panel);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

/* Botón de colapsar el panel: pastilla redondeada en el borde. */
#sidebar .btn-collapse {
  top: 46%;
  right: -14px;
  width: 26px;
  height: 44px;
  border-radius: 0 10px 10px 0;
  background: var(--rf-surface-2);
  border: 1px solid var(--rf-line);
  border-left: 0;
  color: var(--rf-muted);
  box-shadow: var(--rf-shadow-btn);
  transition: color var(--rf-tr), background var(--rf-tr);
}

#sidebar .btn-collapse:hover {
  color: var(--rf-accent);
  background: var(--rf-accent-fill);
}

#sidebar .btn-collapse i {
  margin: 0;
  line-height: 42px;
}

/* ---- Pestañas Objetos / Eventos / Historial ----
   El tema ya las oculta (#sidebar .nav-tabs.nav-default li.tab-visible{display:none}:
   la navegación real es el rail izquierdo; los <li class="hidden"> sólo las usa el
   JS para cambiar de pane). Queda una franja vacía #222 sobre el panel, así que se
   oculta el contenedor. Se ataca al hijo directo para no tocar los .nav-default
   que usan las vistas AJAX cargadas dentro de .tab-content. */
#sidebar>.sidebar-content>.nav-tabs.nav-default {
  display: none;
}

#sidebar .nav-tabs {
  border-bottom: 1px solid var(--rf-line);
  padding: 9px 9px 0;
  background: transparent;
}

#sidebar .nav-tabs>li>a {
  border: 1px solid transparent;
  border-radius: var(--rf-r) var(--rf-r) 0 0;
  margin: 0 2px;
  padding: 8px 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--rf-muted);
  background: transparent;
  transition: color var(--rf-tr), background var(--rf-tr), border-color var(--rf-tr);
}

#sidebar .nav-tabs>li>a:hover {
  color: var(--rf-text);
  background: var(--rf-hover);
  border-color: transparent;
}

#sidebar .nav-tabs>li.active>a,
#sidebar .nav-tabs>li.active>a:focus,
#sidebar .nav-tabs>li.active>a:hover {
  color: var(--rf-accent);
  background: var(--rf-accent-soft);
  border: 1px solid transparent;
  border-bottom-color: transparent;
  cursor: default;
  box-shadow: inset 0 -2px 0 var(--rf-accent);
}

/* ---- Cabecera de pestaña: buscador + alta de objeto ---- */
#sidebar .tab-pane-header {
  padding: 12px 12px 8px;
}

#sidebar .tab-pane-header .form-control {
  height: 34px;
  padding: 6px 11px;
  font-size: 13px;
  color: var(--rf-text);
  background: var(--rf-field);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r) 0 0 var(--rf-r);
  box-shadow: none;
  transition: border-color var(--rf-tr), box-shadow var(--rf-tr), background var(--rf-tr);
}

#sidebar .tab-pane-header .form-control::placeholder {
  color: var(--rf-muted);
  opacity: .85;
}

/* La lupa del tema (.form-group.search:before) va pegada a la izquierda con
   32x32 y el input sólo trae 12px de padding: el glifo se montaba sobre el
   texto. Se le deja hueco y se le alinean altura y color. */
#sidebar .tab-pane-header .form-group.search .form-control {
  padding-left: 32px;
}

#sidebar .tab-pane-header .form-group.search:before {
  width: 32px;
  height: 34px;
  line-height: 34px;
  color: var(--rf-muted);
  opacity: .75;
}

#sidebar .tab-pane-header .form-control:focus {
  background: var(--rf-field);
  border-color: var(--rf-accent-line);
  box-shadow: 0 0 0 3px var(--rf-accent-glow);
  outline: none;
}

#sidebar .tab-pane-header .input-group-btn>.btn,
#sidebar .tab-pane-header .input-group-btn .btn-group>.btn {
  height: 34px;
  min-width: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  color: var(--rf-ink-on-accent);
  background: var(--rf-accent-fill);
  box-shadow: var(--rf-shadow-btn);
  transition: filter var(--rf-tr), transform var(--rf-tr);
}

#sidebar .tab-pane-header .input-group-btn>.btn {
  border-radius: 0 var(--rf-r) var(--rf-r) 0;
}

#sidebar .tab-pane-header .input-group-btn>.btn:first-child:not(:only-child) {
  border-radius: 0 var(--rf-r) var(--rf-r) 0;
}

#sidebar .tab-pane-header .input-group-btn .btn-group>.btn {
  border-radius: 0;
}

#sidebar .tab-pane-header .input-group-btn .btn-group>.btn:last-child {
  border-radius: 0 var(--rf-r) var(--rf-r) 0;
}

#sidebar .tab-pane-header .input-group-btn>.btn:hover,
#sidebar .tab-pane-header .input-group-btn .btn-group>.btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

#sidebar .tab-pane-header .btn-default {
  color: var(--rf-text-2);
  background: var(--rf-field);
  border-color: var(--rf-line);
}

/* ---- Cuerpo con scroll: barra fina ---- */
#sidebar .tab-pane-body {
  padding: 0 0 10px;
}

#sidebar .tab-pane-body::-webkit-scrollbar {
  width: 9px;
}

#sidebar .tab-pane-body::-webkit-scrollbar-track {
  background: transparent;
  border: 0;
}

#sidebar .tab-pane-body::-webkit-scrollbar-thumb {
  background: var(--rf-line);
  border: 0;
  border-radius: 8px;
}

#sidebar .tab-pane-body::-webkit-scrollbar-thumb:hover {
  background: var(--rf-accent-line);
}

/* ---- Tarjeta por grupo ---- */
#sidebar .group {
  margin: 0 8px 8px;
  background: var(--rf-hover);
  border: 1px solid var(--rf-line-soft);
  border-radius: var(--rf-r-lg);
}

#sidebar .group-heading {
  padding: 9px 11px;
  background: transparent;
  border-radius: var(--rf-r-lg) var(--rf-r-lg) 0 0;
  border-bottom: 1px solid var(--rf-line-soft);
  color: var(--rf-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
}

#sidebar .group:not(.open) .group-heading,
#sidebar .group .group-collapse:not(.in)+.group-heading {
  border-bottom-color: transparent;
}

#sidebar .group-heading>.group-title {
  padding-left: 7px;
  color: inherit;
}

#sidebar .group-heading>.group-title>.count {
  color: var(--rf-muted);
  font-weight: 600;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

#sidebar .group-heading>.group-title:after {
  color: var(--rf-muted);
  font-size: 13px;
  transition: color var(--rf-tr);
}

#sidebar .group-heading>.group-title:hover:after {
  color: var(--rf-accent);
}

#sidebar .group-heading>.checkbox {
  padding-left: 3px;
}

#sidebar .group-heading>.btn-group .btn.options:hover {
  background: var(--rf-accent-soft);
  color: var(--rf-accent);
}

/* ---- Filas de dispositivo ---- */
#sidebar .group-list>li {
  border-radius: 0;
  transition: background var(--rf-tr);
}

#sidebar .group-list>li>.checkbox {
  padding: 9px 0 9px 10px;
}

#sidebar .group-list>li>.name {
  padding: 9px 6px 9px 6px;
  font-size: 13px;
  line-height: 1.25;
}

#sidebar .group-list>li>.details {
  padding: 9px 2px 9px 5px;
  color: var(--rf-muted);
}

/* La columna .details es width:1%: cada píxel aquí se lo quita al nombre.
   Se aprieta el separador del tema (.details>*+*{margin-left:5px}) un punto. */
#sidebar .group-list>li>.details>*+* {
  margin-left: 4px;
}

/* Separador entre filas (se pinta en las celdas: los <li> son table-row). */
#sidebar .group-list>li>.checkbox,
#sidebar .group-list>li>.name,
#sidebar .group-list>li>.details {
  border-bottom: 1px solid var(--rf-line-soft);
}

#sidebar .group-list>li:last-child>.checkbox,
#sidebar .group-list>li:last-child>.name,
#sidebar .group-list>li:last-child>.details {
  border-bottom: 0;
}

#sidebar .group-list>li:hover {
  background: var(--rf-hover);
}

#sidebar .group-list>li>.name [data-device="name"] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--rf-text);
  font-weight: 600;
  letter-spacing: .1px;
}

#sidebar .group-list>li>.name [data-device=time] {
  font-size: 10.5px;
  letter-spacing: .2px;
  color: var(--rf-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

/* Fila seleccionada: tinte de acento + la barra lateral del tema (4px reservadas
   en .group-list>li>:last-child, sólo se cambia el color para no mover el layout). */
#sidebar .group-list>li.active {
  background: var(--rf-accent-soft);
}

#sidebar .group-list>li.active>.name [data-device="name"] {
  color: var(--rf-text);
}

#sidebar .group-list>li.active>:last-child {
  border-right-color: var(--rf-accent);
}

/* Velocidad: texto limpio, sin píldora. La columna .details es width:1% y el
   fondo+padding le robaban ~12px al nombre; los números tabulares evitan que
   la cifra baile entre refrescos. */
#sidebar .group-list>li>.details [data-device=speed] {
  font-size: 11px;
  font-weight: 600;
  color: var(--rf-text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Estado: el legacy lo pinta como punto de color (text-indent oculta el texto y
   el color viene por style="" en item.blade.php). Se respeta ese formato y sólo
   se pule: más redondo, sin borde gris y con un anillo sobre la superficie. */
#sidebar .group-list>li>.details [data-device=status] {
  width: 11px;
  height: 11px;
  border: 0;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .18), 0 1px 6px -1px rgba(0, 0, 0, .7);
}

#sidebar .group-list>li>.details [data-device=detect_engine].on {
  color: var(--rf-accent);
}

#sidebar .group-list>li>.details [data-device=time] {
  font-size: 9px;
  color: var(--rf-muted);
}

/* Botón ⋮ de cada fila: discreto, aparece al pasar por la fila. */
#sidebar .group-list>li .btn.options,
#sidebar .group-heading .btn.options {
  width: 24px;
  height: 24px;
  padding: 0;
  line-height: 24px;
  text-align: center;
  border-radius: var(--rf-r-sm);
  color: var(--rf-muted);
  background: transparent;
  opacity: .55;
  transition: opacity var(--rf-tr), background var(--rf-tr), color var(--rf-tr);
}

#sidebar .group-list>li:hover .btn.options,
#sidebar .group-list>li.active .btn.options,
#sidebar .group-heading .btn.options {
  opacity: 1;
}

#sidebar .group-list>li .btn.options:hover,
#sidebar .group-heading .btn.options:hover {
  opacity: 1;
  background: var(--rf-accent-soft);
  color: var(--rf-accent);
}

/* ============================================================================
   3. MENÚS DESPLEGABLES DEL PANEL
   ==========================================================================*/
#sidebar .dropdown-menu {
  padding: 6px;
  background: var(--rf-surface-2);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-lg);
  box-shadow: var(--rf-shadow-float);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  min-width: 230px;
}

#sidebar .dropdown-menu>li>a {
  padding: 7px 10px;
  border-radius: var(--rf-r-sm);
  color: var(--rf-text-2);
  font-size: 13px;
  transition: background var(--rf-tr), color var(--rf-tr);
}

#sidebar .dropdown-menu>li>a .icon {
  color: var(--rf-muted);
  margin-right: 4px;
  transition: color var(--rf-tr);
}

#sidebar .dropdown-menu>li>a:hover {
  background: var(--rf-accent-soft);
  color: var(--rf-accent);
}

#sidebar .dropdown-menu>li>a:hover .icon {
  color: var(--rf-accent);
}

#sidebar .dropdown-menu .divider {
  margin: 5px 7px;
  background: var(--rf-line);
}

#sidebar .dropdown-menu>li>a:focus {
  background: transparent;
  color: var(--rf-text-2);
}

/* ============================================================================
   4. CONTROLES SOBRE EL MAPA (#map-controls)
   ==========================================================================*/
#map-controls {
  top: 12px;
  right: 12px;
}

#map-controls .btn-group-vertical {
  margin-bottom: 8px;
}

#map-controls .btn {
  width: 34px;
  height: 34px;
  padding: 0;
  line-height: 33px;
  font-size: 15px;
  color: var(--rf-text-2);
  background: var(--rf-surface-2);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r);
  margin-bottom: 5px;
  box-shadow: var(--rf-shadow-btn);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background var(--rf-tr), color var(--rf-tr), transform var(--rf-tr), border-color var(--rf-tr);
}

#map-controls .btn+.btn {
  border-top: 1px solid var(--rf-line);
  margin-top: 0;
}

#map-controls .btn:hover {
  color: var(--rf-accent);
  background: var(--rf-surface-2);
  border-color: var(--rf-accent-line);
  transform: translateY(-1px);
}

#map-controls .btn.active,
#map-controls label.btn.active {
  color: var(--rf-ink-on-accent);
  background: var(--rf-accent-fill);
  border-color: transparent;
  box-shadow: 0 6px 16px -8px var(--rf-accent);
}

#map-controls .btn input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Selector de capas desplegado (Leaflet reutiliza las clases de bootstrap). */
.leaflet-control-layers-expanded {
  padding: 10px 12px;
  background: var(--rf-surface-2);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-lg);
  box-shadow: var(--rf-shadow-float);
  color: var(--rf-text-2);
}

/* ============================================================================
   5. BARRA SUPERIOR (#header)
   ----------------------------------------------------------------------------
   El legacy trae dos modos: plegado (#header.folded: el .navbar va transparente
   y son .navbar-brand / .navbar-nav los que llevan el fondo #333 con sus
   "cintas" diagonales) y desplegado. El fondo propio sólo se aplica en el modo
   desplegado para no pisar el diseño de cintas del plegado.
   ==========================================================================*/
#header:not(.folded) .main-navbar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--rf-accent) 7%, rgba(16, 20, 26, .94)) 0%, rgba(14, 18, 23, .9) 100%);
  border-bottom: 1px solid var(--rf-line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px -20px rgba(0, 0, 0, .95);
}

#header .navbar-nav>li>a {
  color: var(--rf-muted);
  transition: color var(--rf-tr), background var(--rf-tr);
}

#header .navbar-nav>li>a:hover {
  color: var(--rf-text);
  background: var(--rf-hover);
}

#header .navbar-nav>.open>a,
#header .navbar-nav>.open>a:focus,
#header .navbar-nav>.open>a:hover {
  color: var(--rf-accent);
  background: var(--rf-accent-soft);
}

/* Modo plegado: las "cintas" del logo y del menú van en #333 con sus triángulos
   de adorno. Se tiñen con la misma superficie del panel para que el encabezado
   y la ventana de objetos se lean como un solo material. */
#header.folded:before {
  background-color: var(--rf-surface-2);
}

#header.folded .navbar .navbar-brand,
#header.folded .navbar .navbar-nav {
  background-color: var(--rf-surface-2);
  border-bottom-color: var(--rf-line);
}

#header.folded .navbar .navbar-brand:after {
  border-left-color: var(--rf-surface-2);
}

#header.folded .navbar .navbar-nav:after {
  border-right-color: var(--rf-surface-2);
}

/* ============================================================================
   6. AVISOS / ESTADOS VACÍOS
   ==========================================================================*/
#sidebar .no-results,
#sidebar .text-center {
  color: var(--rf-muted);
  font-size: 12.5px;
  padding: 14px 12px;
}

#sidebar .btn-default {
  color: var(--rf-text-2);
  background: var(--rf-field);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-r-sm);
  transition: background var(--rf-tr), color var(--rf-tr), border-color var(--rf-tr);
}

#sidebar .btn-default:hover {
  color: var(--rf-accent);
  border-color: var(--rf-accent-line);
  background: var(--rf-accent-soft);
}

/* Respeta la preferencia de menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  #tools-sidebar *,
  #sidebar *,
  #map-controls * {
    transition: none !important;
  }
}