/* =====================================================
   GPSWOX — Glass Granulado Real
   public/assets/custom/css.css
   Tema: Light Win10 Blue  |  #2c82d8
   ===================================================== */

:root {
  --g-accent:      #2c82d8;
  --g-accent-dark: #1e5fa8;
  --g-radius:      12px;
  --g-radius-sm:   7px;
  --g-shadow-sm:   0 2px 14px rgba(0,0,0,0.10);
  --g-shadow-md:   0 6px 28px rgba(0,0,0,0.14);
  --g-shadow-lg:   0 16px 48px rgba(0,0,0,0.18);
  /* Grano sutil — 5% opacidad */
  --g-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════
   SIDEBAR — glass real via ::before
   El sidebar es position:absolute sobre el mapa.
   Usamos ::before con backdrop-filter para que
   el mapa se vea borroso detrás sin romper los
   dropdowns con position:fixed del interior.
   ══════════════════════════════════════════════ */
#sidebar {
  background: transparent !important;
  position: absolute !important;
}

#sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  background-color: rgba(255, 255, 255, 0.58);
  background-image: var(--g-grain);
  pointer-events: none;
  border-right: 1px solid rgba(255,255,255,0.30);
  box-shadow: 4px 0 24px rgba(0,0,0,0.10);
}

.sidebar > .btn-collapse {
  background-color: rgba(255,255,255,0.60) !important;
  background-image: var(--g-grain) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: 0 8px 8px 0 !important;
  box-shadow: 2px 0 10px rgba(0,0,0,0.10) !important;
}

/* Tabs */
#sidebar .nav-tabs {
  background-color: rgba(255,255,255,0.45) !important;
  background-image: var(--g-grain) !important;
  border-bottom: 1px solid rgba(44,130,216,0.15) !important;
}
#sidebar .nav-tabs > li > a {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  padding: 9px 13px !important;
  transition: all 0.14s ease;
}
#sidebar .nav-tabs > li > a:hover {
  background: rgba(44,130,216,0.08) !important;
  color: var(--g-accent) !important;
  border-bottom-color: rgba(44,130,216,0.28) !important;
}
#sidebar .nav-tabs > li.active > a,
#sidebar .nav-tabs > li.active > a:hover,
#sidebar .nav-tabs > li.active > a:focus {
  background: rgba(44,130,216,0.10) !important;
  color: var(--g-accent) !important;
  border-bottom: 2px solid var(--g-accent) !important;
  font-weight: 600 !important;
}

/* Fondo del contenido del sidebar */
#sidebar .sidebar-content {
  background-color: rgba(255,255,255,0.30) !important;
  background-image: var(--g-grain) !important;
}

/* Barra de búsqueda */
#sidebar .form-control,
#sidebar input[type="search"],
#sidebar input[type="text"] {
  border-radius: var(--g-radius-sm) !important;
  border-color: rgba(44,130,216,0.22) !important;
  background: rgba(255,255,255,0.70) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Lista de dispositivos */
[id^="list-device-"] {
  border-left: 3px solid transparent !important;
  background: rgba(255,255,255,0.20) !important;
  transition: background 0.12s ease, border-color 0.12s ease !important;
}
[id^="list-device-"]:hover {
  background: rgba(44,130,216,0.10) !important;
  border-left-color: var(--g-accent) !important;
}
[id^="list-device-"].active {
  background: rgba(44,130,216,0.13) !important;
  border-left-color: var(--g-accent) !important;
}

/* ══════════════════════════════════════════════
   CONTROLES DEL MAPA — glass visible sobre mapa
   ══════════════════════════════════════════════ */
.map-controls .btn-group-vertical {
  border-radius: var(--g-radius) !important;
  background-color: rgba(255,255,255,0.62) !important;
  background-image: var(--g-grain) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--g-shadow-md), 0 0 0 1px rgba(255,255,255,0.28);
  margin-bottom: 7px !important;
}
.map-controls .btn-group-vertical > .btn:first-child,
.map-controls .btn-group-vertical > label.btn:first-child {
  border-radius: var(--g-radius) var(--g-radius) 0 0 !important;
}
.map-controls .btn-group-vertical > .btn:last-child,
.map-controls .btn-group-vertical > label.btn:last-child,
.map-controls .btn-group-vertical > div.dropdown:last-child > .btn {
  border-radius: 0 0 var(--g-radius) var(--g-radius) !important;
}
.map-controls .btn {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  color: #374151 !important;
  transition: background 0.13s ease, color 0.13s ease !important;
}
.map-controls .btn:last-child,
.map-controls .btn-group-vertical > label.btn:last-child { border-bottom: none !important; }
.map-controls .btn:hover { background: rgba(44,130,216,0.12) !important; color: var(--g-accent) !important; }
.map-controls label.btn.active,
.map-controls .btn.active { background: rgba(44,130,216,0.18) !important; color: var(--g-accent) !important; }

/* ══════════════════════════════════════════════
   SELECTOR DE CAPAS DE LEAFLET
   ══════════════════════════════════════════════ */
.leaflet-control-layers:not(.leaflet-control-layers-expanded) {
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background: transparent !important;
}
.leaflet-control-layers-expanded {
  opacity: 1 !important;
  pointer-events: auto !important;
  width: auto !important; height: auto !important;
  overflow: visible !important;
  border-radius: var(--g-radius) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow: var(--g-shadow-md) !important;
  background-color: rgba(255,255,255,0.68) !important;
  background-image: var(--g-grain) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  padding: 10px 14px !important;
}
.leaflet-control-layers label {
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 5px 7px !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: background 0.11s ease !important;
}
.leaflet-control-layers label:hover { background: rgba(44,130,216,0.09) !important; }
.leaflet-control-layers-separator { border-top: 1px solid rgba(0,0,0,0.08) !important; margin: 5px 0 !important; }

/* ══════════════════════════════════════════════
   DROPDOWNS — glass visible
   ══════════════════════════════════════════════ */
.dropdown-menu {
  border-radius: var(--g-radius) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow: var(--g-shadow-md) !important;
  background-color: rgba(255,255,255,0.78) !important;
  background-image: var(--g-grain) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  padding: 5px !important;
  /* overflow: hidden ELIMINADO — impedía el scroll y recortaba items */
  overflow: auto;
  max-height: 300px;
}
.dropdown-menu > li > a {
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 7px 11px !important;
  color: #1f2937 !important;
  transition: background 0.10s ease !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: rgba(44,130,216,0.10) !important;
  color: var(--g-accent) !important;
}
.dropdown-menu > li.active > a,
.dropdown-menu > li.active > a:hover {
  background: var(--g-accent) !important;
  color: #fff !important;
}
.dropdown-menu .divider { margin: 3px 7px !important; background: rgba(0,0,0,0.08) !important; }

/* ══════════════════════════════════════════════
   POPUP DEL DISPOSITIVO EN EL MAPA
   ══════════════════════════════════════════════ */
.leaflet-popup-content-wrapper {
  border-radius: var(--g-radius) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow: var(--g-shadow-lg) !important;
  background-color: rgba(255,255,255,0.72) !important;
  background-image: var(--g-grain) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  /* overflow: hidden ELIMINADO — puede recortar contenido del popup */
  padding: 0 !important;
}
.leaflet-popup-content { margin: 0 !important; }
.leaflet-popup-tip { background: rgba(255,255,255,0.80) !important; }

/* ══════════════════════════════════════════════
   PANEL INFERIOR — #widgets
   ══════════════════════════════════════════════ */
#bottombar { background: transparent !important; }

#widgets {
  background-color: rgba(255,255,255,0.65) !important;
  background-image: var(--g-grain) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-top: 2px solid var(--g-accent) !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.10) !important;
}
#widgets > .btn-collapse {
  background-color: rgba(255,255,255,0.55) !important;
  background-image: var(--g-grain) !important;
  border-radius: 8px 8px 0 0 !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  border-bottom: none !important;
}
#widgets .widget-heading,
#widgets .panel-heading {
  background-color: rgba(255,255,255,0.50) !important;
  background-image: var(--g-grain) !important;
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
  font-weight: 500 !important;
}
#widgets .nav-tabs {
  background-color: rgba(255,255,255,0.45) !important;
  background-image: var(--g-grain) !important;
  border-bottom: 1px solid rgba(44,130,216,0.15) !important;
}
#widgets .nav-tabs > li > a {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  padding: 8px 13px !important;
  transition: all 0.13s ease;
}
#widgets .nav-tabs > li > a:hover { background: rgba(44,130,216,0.08) !important; color: var(--g-accent) !important; }
#widgets .nav-tabs > li.active > a,
#widgets .nav-tabs > li.active > a:hover {
  background: rgba(44,130,216,0.10) !important;
  color: var(--g-accent) !important;
  border-bottom: 2px solid var(--g-accent) !important;
  font-weight: 600 !important;
}

/* Panel historial */
#bottom-history {
  background-color: rgba(255,255,255,0.65) !important;
  background-image: var(--g-grain) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-top: 2px solid var(--g-accent) !important;
  box-shadow: 0 -3px 18px rgba(0,0,0,0.08) !important;
}
#bottom-history .bottom-history-header {
  background-color: rgba(255,255,255,0.50) !important;
  background-image: var(--g-grain) !important;
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}

/* ══════════════════════════════════════════════
   MODALES — glass visible
   ══════════════════════════════════════════════ */
.modal-content {
  border-radius: var(--g-radius) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  box-shadow: var(--g-shadow-lg) !important;
  background-color: rgba(255,255,255,0.78) !important;
  background-image: var(--g-grain) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  /* overflow: hidden ELIMINADO — recortaba los <select>/dropdowns dentro del modal */
  overflow: visible;
}
.modal-header {
  background-color: rgba(255,255,255,0.55) !important;
  background-image: var(--g-grain) !important;
  border-bottom: 2px solid rgba(44,130,216,0.14) !important;
  padding: 13px 18px !important;
}
.modal-title { color: var(--g-accent-dark) !important; font-weight: 600 !important; }
.modal-footer {
  border-top: 1px solid rgba(0,0,0,0.07) !important;
  background-color: rgba(255,255,255,0.45) !important;
  background-image: var(--g-grain) !important;
  padding: 11px 18px !important;
}
.modal-backdrop.in { opacity: 0.30 !important; }

/* Tabs en modales */
.modal .nav-tabs {
  background-color: rgba(255,255,255,0.45) !important;
  background-image: var(--g-grain) !important;
  border-bottom: 1px solid rgba(44,130,216,0.14) !important;
}
.modal .nav-tabs > li > a {
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  transition: all 0.13s ease;
}
.modal .nav-tabs > li > a:hover { background: rgba(44,130,216,0.07) !important; color: var(--g-accent) !important; }
.modal .nav-tabs > li.active > a,
.modal .nav-tabs > li.active > a:hover {
  background: rgba(44,130,216,0.09) !important;
  color: var(--g-accent) !important;
  border-bottom: 2px solid var(--g-accent) !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════
   ADMIN — Navbar glass
   ══════════════════════════════════════════════ */
.navbar-main {
  background-color: rgba(255,255,255,0.72) !important;
  background-image: var(--g-grain) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(44,130,216,0.14) !important;
  box-shadow: 0 2px 18px rgba(0,0,0,0.09) !important;
}
.navbar-main .navbar-nav > li > a {
  color: #1f2937 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  margin: 4px 2px !important;
  transition: all 0.13s ease !important;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li.active > a {
  background: rgba(44,130,216,0.10) !important;
  color: var(--g-accent) !important;
}

/* ══════════════════════════════════════════════
   ADMIN — Tablas
   ══════════════════════════════════════════════ */
.admin-layout .table > thead > tr > th {
  background-color: rgba(44,130,216,0.07) !important;
  background-image: var(--g-grain) !important;
  border-bottom: 2px solid rgba(44,130,216,0.16) !important;
  color: var(--g-accent-dark) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.2px;
  padding: 10px 8px !important;
}
.admin-layout .table > tbody > tr:hover > td {
  background: rgba(44,130,216,0.05) !important;
}
.admin-layout .table > tbody > tr > td {
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  font-size: 12px !important;
  vertical-align: middle !important;
}

/* Admin paneles — glass granulado */
.admin-layout .panel {
  border-radius: var(--g-radius) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow: var(--g-shadow-sm) !important;
  background-color: rgba(255,255,255,0.75) !important;
  background-image: var(--g-grain) !important;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.admin-layout .panel-heading {
  background-color: rgba(255,255,255,0.55) !important;
  background-image: var(--g-grain) !important;
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
  border-radius: var(--g-radius) var(--g-radius) 0 0 !important;
  font-weight: 600 !important;
}
.admin-layout .content {
  background-color: rgba(255,255,255,0.30) !important;
  background-image: var(--g-grain) !important;
}

/* ══════════════════════════════════════════════
   BOTONES
   ══════════════════════════════════════════════ */
.btn-primary {
  background: linear-gradient(140deg,#3a8fe0 0%,#1e6fab 100%) !important;
  border-color: #1a5f96 !important;
  border-radius: var(--g-radius-sm) !important;
  box-shadow: 0 2px 8px rgba(44,130,216,0.28) !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(140deg,#4899e8 0%,#2472ba 100%) !important;
  box-shadow: 0 4px 14px rgba(44,130,216,0.38) !important;
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0) !important; }
.btn-danger { border-radius: var(--g-radius-sm) !important; font-weight: 500 !important; }

/* ══════════════════════════════════════════════
   FORMULARIOS
   ══════════════════════════════════════════════ */
.form-control {
  border-radius: var(--g-radius-sm) !important;
  border-color: rgba(44,130,216,0.20) !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease !important;
}
.form-control:focus {
  border-color: var(--g-accent) !important;
  box-shadow: 0 0 0 2px rgba(44,130,216,0.12) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════ */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.03); }
::-webkit-scrollbar-thumb { background: rgba(44,130,216,0.25); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(44,130,216,0.45); }

/* ══════════════════════════════════════════════
   BADGES Y ALERTAS
   ══════════════════════════════════════════════ */
.badge { border-radius:10px !important; font-weight:500 !important; }
.alert { border-radius:var(--g-radius-sm) !important; border-left-width:3px !important; }

/* ══════════════════════════════════════════════
   FIX: SIDEBAR — el backdrop-filter en ::before
   crea un "containing block" para position:fixed
   en algunos navegadores (Chromium).
   La solución correcta es eliminar el backdrop-
   filter del ::before y usar fondo sólido con
   opacidad para el efecto glass — así no hay
   containing block y los dropdowns se posicionan
   correctamente respecto al viewport.
   ══════════════════════════════════════════════ */
#sidebar::before {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: rgba(240, 245, 255, 0.82) !important;
}