/* =====================================================================
   Barra superior y popup "Acerca del proyecto"
   Paleta basada en el azul institucional #4476a9
   ===================================================================== */
:root {
  --gh-primary: #4476a9;
  --gh-primary-dark: #35608f;
  --gh-primary-deep: #24466b;
  --gh-primary-light: #eaf1f8;
  --gh-border: #c8d8e8;
  --gh-text: #1d3249;
  --gh-muted: #51677f;
  --gh-header-h: 68px;
  --gh-font: "Montserrat", "Encode Sans", sans-serif;
}

/* Colores del tema fijados en azul (por si el navegador guarda la configuración vieja) */
:root {
  --bg-color: #4476a9 !important;
  --active-bg-color: #4476a9 !important;
  --hoverSelect-bg-color: #b3cde4 !important;
  --menu-section-hover-color: #c8d8e8 !important;
  --layer-btn-hover-color: #d9e6f2 !important;
  --btn-primary-color: #35608f !important;
  --btn-secondary-color: #24466b !important;
}

/* Tipografía general */
body, button, input, select, textarea,
.leaflet-container, .leaflet-popup-content,
#sidebar-container, .gh-modal, .gh-about-btn {
  font-family: var(--gh-font) !important;
}

/* ---------- Barra ---------- */
body {
  padding-top: var(--gh-header-h) !important;
}

nav.navbar.navbar-fixed-top {
  min-height: var(--gh-header-h);
  height: var(--gh-header-h);
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(100deg, #4f84b8 0%, #4476a9 45%, #386599 100%) !important;
  box-shadow: 0 2px 12px rgba(20, 45, 80, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.18);
  z-index: 1100;
  overflow: hidden;
}

nav.navbar .navbar-new {
  height: var(--gh-header-h);
  align-items: center;
  padding: 0 18px;
}

nav.navbar .center-flex-space-btw {
  height: var(--gh-header-h);
}

/* Textura: puntos + curvas de nivel suaves (tema topográfico) */
nav.navbar.navbar-fixed-top::before,
nav.navbar.navbar-fixed-top::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  clear: none;
}

/* puntos */
nav.navbar.navbar-fixed-top::before {
  left: 0;
  right: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.20) 1.3px, transparent 1.8px);
  background-size: 14px 14px;
  background-position: 7px 7px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,1) 100%);
}

/* curvas de nivel */
nav.navbar.navbar-fixed-top::after {
  right: 0;
  width: 62%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 68' preserveAspectRatio='none' fill='none' stroke='white' stroke-width='1' stroke-opacity='0.22'%3E%3Cpath d='M0 14C80 -4 160 30 260 14S450 -6 600 16'/%3E%3Cpath d='M0 24C90 6 170 40 270 24S460 4 600 26'/%3E%3Cpath d='M0 34C100 16 180 50 280 34S470 14 600 36'/%3E%3Cpath d='M0 44C110 26 190 60 290 44S480 24 600 46'/%3E%3Cpath d='M0 54C120 36 200 70 300 54S490 34 600 56'/%3E%3Cpath d='M0 64C130 46 210 80 310 64S500 44 600 66'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}

nav.navbar .navbar-new {
  position: relative;
  z-index: 1;
}

/* Se quita el logo de la izquierda */
#top-left-logo-link,
#top-right-logo-link,
#logo-navbar > a:not(#logoText) {
  display: none !important;
}

#logo-navbar {
  margin-left: 4px;
  min-width: 0;
}

#logoText {
  font-family: var(--gh-font);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.2px;
  color: #fff !important;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(15, 35, 65, 0.25);
}

/* ---------- Buscador a la derecha ---------- */
#search-navbar {
  margin-left: auto;
  margin-right: 14px;
}

#searchbar {
  position: relative;
}

#search_bar {
  width: 300px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--gh-text);
  font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(15, 35, 65, 0.25);
  outline: none;
  transition: box-shadow 0.15s ease;
}

#search_bar:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45), 0 1px 3px rgba(15, 35, 65, 0.25);
}

#div-icon-close-searchbar {
  border-radius: 0 20px 20px 0;
}

/* ---------- Botones de la derecha ---------- */
#logo-help {
  display: flex;
  align-items: center;
  gap: 10px;
}

#logo-help .ui-btn,
.gh-about-btn {
  height: 40px;
  min-width: 40px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

#logo-help .ui-btn:hover,
.gh-about-btn:hover {
  background: rgba(255, 255, 255, 0.28) !important;
}

#logo-help .ui-btn:active,
.gh-about-btn:active {
  transform: translateY(1px);
}

#nav-help-btn {
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#nav-help-btn svg {
  fill: #fff;
}

.gh-about-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-family: var(--gh-font);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.gh-about-btn i {
  font-size: 15px;
}

/* ---------- Barra lateral y mapa debajo de la barra ---------- */
@media (min-width: 768px) {
  .sidebar {
    top: var(--gh-header-h) !important;
    border-right: 1px solid var(--gh-border);
    box-shadow: 2px 0 10px rgba(36, 70, 107, 0.08);
  }
}

/* ---------- Pantallas chicas ---------- */
@media (max-width: 1100px) {
  #logoText { font-size: 17px; }
  #search_bar { width: 200px; }
}

@media (max-width: 900px) {
  .gh-about-btn span { display: none; }
  .gh-about-btn { padding: 0; justify-content: center; width: 40px; }
}

@media (max-width: 767px) {
  :root { --gh-header-h: 60px; }
  #logoText { font-size: 14px; white-space: normal; line-height: 1.15; }
  #search-navbar { display: none; }
  nav.navbar .navbar-new { padding: 0 10px; }
}

@media (max-width: 410px) {
  #logo-help { display: flex !important; }
}

/* =====================================================================
   Popup "Acerca del proyecto"
   ===================================================================== */
.gh-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 38, 62, 0.55);
  backdrop-filter: blur(2px);
}

.gh-modal-overlay.gh-open {
  display: flex;
  animation: gh-fade 0.18s ease;
}

@keyframes gh-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gh-modal {
  width: 100%;
  max-width: 940px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  color: var(--gh-text);
  font-family: var(--gh-font);
  box-shadow: 0 20px 60px rgba(10, 25, 50, 0.45);
  animation: gh-pop 0.2s ease;
}

@keyframes gh-pop {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.gh-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: linear-gradient(100deg, #4f84b8 0%, #4476a9 50%, #386599 100%);
  color: #fff;
}

.gh-modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.gh-modal-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.gh-modal-close:hover {
  background: rgba(255, 255, 255, 0.32);
}

.gh-modal-body {
  padding: 8px 24px 24px;
  overflow-y: auto;
  font-size: 14.5px;
  line-height: 1.55;
}

.gh-modal-body h3 {
  margin: 16px 0 6px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--gh-border);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--gh-primary);
}

.gh-modal-body p {
  margin: 0 0 8px;
  color: var(--gh-text);
}

.gh-modal-body .gh-cita {
  padding: 12px 14px;
  border-left: 4px solid var(--gh-primary);
  border-radius: 0 8px 8px 0;
  background: var(--gh-primary-light);
  color: var(--gh-muted);
}

.gh-modal-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gh-modal-body li {
  margin-bottom: 6px;
}

.gh-modal-body li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--gh-primary-light);
  color: var(--gh-primary-deep);
  font-weight: 600;
  text-decoration: none;
}

.gh-modal-body li a:hover {
  background: var(--gh-primary);
  color: #fff;
}

.gh-pendiente {
  color: #8a99ab;
  font-style: italic;
}

/* =====================================================================
   Panel lateral: azul profundo con textura (puntos + curvas de nivel)
   ===================================================================== */
@media (min-width: 768px) {
  .sidebar {
    background-color: #2b568a !important;
    background-image:
      radial-gradient(rgba(255, 255, 255, 0.10) 1.3px, transparent 1.8px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 320' preserveAspectRatio='none' fill='none' stroke='white' stroke-width='1' stroke-opacity='0.13'%3E%3Cpath d='M-10 300C60 270 90 300 150 280S250 240 310 270'/%3E%3Cpath d='M-10 280C60 248 95 282 155 260S255 218 310 250'/%3E%3Cpath d='M-10 260C60 226 100 264 160 240S260 196 310 230'/%3E%3Cpath d='M-10 240C60 204 105 246 165 220S265 174 310 210'/%3E%3Cpath d='M-10 220C60 182 110 228 170 200S270 152 310 190'/%3E%3Cpath d='M-10 200C60 160 115 210 175 180S275 130 310 170'/%3E%3Cpath d='M-10 180C60 138 120 192 180 160S280 108 310 150'/%3E%3Cpath d='M-10 160C60 116 125 174 185 140S285 86 310 130'/%3E%3C/svg%3E"),
      linear-gradient(180deg, #2f5f94 0%, #27507f 55%, #1f4069 100%) !important;
    background-size: 14px 14px, 26vw 340px, 100% 100% !important;
    background-position: 7px 7px, 0 100%, 0 0 !important;
    background-repeat: repeat, no-repeat, no-repeat !important;
    background-attachment: fixed !important;
    border-right: 1px solid #1c3a60 !important;
  }
}

#sidebar-container {
  font-size: 13px;
}

#sidebar.panel,
#sidebar.panel-default {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* buscador de capas */
#sidebar form#searchForm {
  padding: 12px 12px 10px;
  background: linear-gradient(180deg, #2f5f94 70%, rgba(47, 95, 148, 0)) !important;
}

#sidebar #q.ui-input-text {
  height: 36px;
  font-size: 13px;
  border-radius: 10px;
  border: 0;
}

#sidebar .ui-btn.btn-search,
#sidebar .ui-btn.btn-reset-layers {
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--gh-primary-dark);
}

#sidebar .ui-btn.btn-search:hover {
  background: #6ba0d4;
  color: #fff;
}

/* décadas: paneles de vidrio (blanco muy sutil y transparente) */
#sidebar .menu5 {
  margin: 8px 12px;
}

#sidebar .menu5 .panel-heading {
  position: relative;
  overflow: hidden;
  padding: 11px 14px 11px 20px;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background 0.18s ease, border-color 0.18s ease;
}

#sidebar .menu5 .panel-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #8fc0ee;
  opacity: 0.45;
  transition: opacity 0.15s ease;
}

#sidebar .menu5 .panel-heading:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.28);
}

#sidebar .menu5 .panel-heading:hover::before {
  opacity: 1;
}

#sidebar .item-group-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff !important;
}

#sidebar .item-group-short-desc,
#sidebar .item-group-short-desc a {
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.78) !important;
}

#sidebar .menu5 .panel-body {
  padding: 8px 0 2px;
  background: transparent;
}

#sidebar .capa .capa-title,
#sidebar li.capa {
  font-size: 13px;
}

#sidebar li.capa {
  border-radius: 8px;
  margin-bottom: 6px;
  border: 0;
}

/* deslizador de opacidad: se ve tanto en la tarjeta blanca como cuando la capa está activa (azul) */
#sidebar li.capa input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  background: transparent;
  cursor: pointer;
}

#sidebar li.capa input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 3px;
  background: #b9cfe4;
}

#sidebar li.capa input[type="range"]::-moz-range-track {
  height: 5px;
  border-radius: 3px;
  background: #b9cfe4;
}

#sidebar li.capa input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -5px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--gh-primary);
  box-shadow: 0 1px 3px rgba(10, 30, 55, 0.5);
}

#sidebar li.capa input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--gh-primary);
  box-shadow: 0 1px 3px rgba(10, 30, 55, 0.5);
}

/* capa activa (fondo azul): pista clara y botón blanco */
#sidebar li.capa.active input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.4);
}

#sidebar li.capa.active input[type="range"]::-moz-range-track {
  background: rgba(255, 255, 255, 0.4);
}

#sidebar li.capa.active input[type="range"]::-webkit-slider-thumb {
  border-color: var(--gh-primary-deep);
  background: #fff;
}

#sidebar li.capa.active input[type="range"]::-moz-range-thumb {
  border-color: var(--gh-primary-deep);
  background: #fff;
}

/* deslizadores de las capas vectoriales / categorías: misma estética */
.geohistoria-capa-opacidad input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  background: transparent;
  cursor: pointer;
}

.geohistoria-capa-opacidad input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 3px;
  background: #b9cfe4;
}

.geohistoria-capa-opacidad input[type="range"]::-moz-range-track {
  height: 5px;
  border-radius: 3px;
  background: #b9cfe4;
}

.geohistoria-capa-opacidad input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -5px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--gh-primary);
  box-shadow: 0 1px 3px rgba(10, 30, 55, 0.5);
}

.geohistoria-capa-opacidad input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--gh-primary);
  box-shadow: 0 1px 3px rgba(10, 30, 55, 0.5);
}

/* categorías y capas activas */
#geohistoria-panel {
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.geohistoria-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #fff;
}

.geohistoria-panel-title::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), transparent);
}

.geohistoria-categorias-grid {
  gap: 10px;
}

.geohistoria-categoria-btn {
  padding: 13px 6px;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--gh-primary-deep);
  box-shadow: 0 2px 6px rgba(10, 30, 55, 0.25);
}

.geohistoria-categoria-btn i {
  font-size: 18px;
  color: var(--gh-primary);
  transition: color 0.2s;
}

.geohistoria-categoria-btn:hover {
  background: #6ba0d4;
  border-color: #9cc3ea;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(10, 30, 55, 0.35);
}

.geohistoria-categoria-btn:hover i {
  color: #fff;
}

.geohistoria-categoria-badge {
  font-size: 10px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 9px;
}

.geohistoria-categoria-btn:hover .geohistoria-categoria-badge {
  background: #fff;
  color: var(--gh-primary-dark);
}

.geohistoria-categoria-header {
  font-size: 14px;
  padding-bottom: 10px;
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

.geohistoria-categoria-header-icon {
  color: #9cc3ea;
}

.geohistoria-categoria-volver {
  width: 30px;
  height: 30px;
  border: 0;
  background: rgba(255, 255, 255, 0.95);
  color: var(--gh-primary-deep);
}

.geohistoria-categoria-volver:hover {
  background: #6ba0d4;
  color: #fff;
}

.geohistoria-capa-item {
  padding: 9px 11px;
  font-size: 12px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 6px rgba(10, 30, 55, 0.22);
}

.geohistoria-capa-opacidad {
  font-size: 11px;
}

.geohistoria-leyenda {
  font-size: 11px;
}

.geohistoria-activa-row {
  padding: 7px 10px;
  font-size: 12px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
}

.geohistoria-activas-empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
}

/* Montserrat en todos los textos del panel, la barra y los popups (sin tocar los íconos) */
#sidebar-container *:not(.fa):not([class*="fa-"]):not([class*="glyphicon"]),
nav.navbar *:not(.fa):not([class*="fa-"]):not([class*="glyphicon"]),
.gh-modal *:not(.fa):not([class*="fa-"]),
.leaflet-popup-content *:not(.fa):not([class*="fa-"]) {
  font-family: var(--gh-font) !important;
}


/* =====================================================================
   Logos en la barra superior
   ===================================================================== */
.gh-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0 10px 0 2px !important;
}

.gh-brand img {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 1px 3px rgba(10, 30, 55, 0.4));
}

#logo-navbar {
  flex: 0 1 auto !important;
  min-width: 0;
  margin-left: 0 !important;
}

#search-navbar,
#logo-help,
.gh-logos {
  flex-shrink: 0 !important;
}

/* logos institucionales: sin caja, con un halo blanco fino para que se lean sobre el azul */
.gh-logos {
  display: flex;
  align-items: center;
  height: 56px;
  margin: 0 0 0 18px !important;
  padding: 0;
  background: none;
  box-shadow: none;
}

.gh-logo-item {
  display: flex;
  align-items: center;
  height: 100%;
}

.gh-logo-item + .gh-logo-item {
  margin-left: 18px;
}

.gh-logos img {
  width: auto;
  display: block;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px rgba(255, 255, 255, 0.75));
}

/* UNPSJB y Departamento de Geografía: sin halo; solo el LabSIGyT lleva halo blanco */
.gh-logos img.gh-logo-unpsjb,
.gh-logos img.gh-logo-igeopat,
.gh-logos img.gh-logo-geo {
  filter: none;
}

.gh-logo-unpsjb { height: 44px; }
.gh-logo-geo { height: 44px; }
.gh-logo-igeopat { height: 46px; }
.gh-logo-labsig { height: 48px; }

a.gh-logo-item { transition: opacity 0.15s ease; }
a.gh-logo-item:hover { opacity: 0.85; }

@media (max-width: 1600px) {
  #logoText { font-size: 18px; }
  #search_bar { width: 230px; }
}

@media (max-width: 1250px) {
  #logoText { font-size: 16px; }
  #search_bar { width: 170px; }
  .gh-brand img { height: 36px; }
  .gh-logos { height: 48px; margin-left: 12px !important; }
  .gh-logo-unpsjb, .gh-logo-geo { height: 34px; }
  .gh-logo-igeopat { height: 36px; }
  .gh-logo-labsig { height: 38px; }
  .gh-logo-item + .gh-logo-item { margin-left: 12px; }
}

@media (max-width: 1100px) {
  .gh-about-btn span { display: none; }
  .gh-about-btn { padding: 0; justify-content: center; width: 40px; }
}

@media (max-width: 1000px) {
  .gh-logos { display: none; }
}

@media (max-width: 767px) {
  .gh-brand img { height: 34px; }
}

/* =====================================================================
   Botón de tutorial (?) dentro del buscador de capas
   ===================================================================== */
#sidebar .gh-help-side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 2px;
  padding: 0 !important;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95) !important;
  cursor: pointer;
}

#sidebar .gh-help-side svg {
  fill: var(--gh-primary-dark);
}

#sidebar .gh-help-side:hover {
  background: #6ba0d4 !important;
}

#sidebar .gh-help-side:hover svg {
  fill: #fff;
}


/* =====================================================================
   Paleta con acentos (tomada del logo del visor): azul principal #4476a9,
   azul marino, violeta y un toque de dorado
   ===================================================================== */
:root {
  --gh-navy: #1f2f5c;
  --gh-indigo: #2a3b78;
  --gh-violet: #6c68b4;
  --gh-violet-light: #9d99d9;
  --gh-gold: #4fd3d6; /* acento aqua */
}

/* barra: de azul marino a azul principal y violeta */
nav.navbar.navbar-fixed-top {
  background: linear-gradient(100deg, #223766 0%, #34568f 32%, #4476a9 62%, #6a67b1 100%) !important;
}

/* panel: de azul a índigo */
@media (min-width: 768px) {
  .sidebar {
    background-color: #2a3b78 !important;
    background-image:
      radial-gradient(rgba(255, 255, 255, 0.10) 1.3px, transparent 1.8px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 320' preserveAspectRatio='none' fill='none' stroke='white' stroke-width='1' stroke-opacity='0.13'%3E%3Cpath d='M-10 300C60 270 90 300 150 280S250 240 310 270'/%3E%3Cpath d='M-10 280C60 248 95 282 155 260S255 218 310 250'/%3E%3Cpath d='M-10 260C60 226 100 264 160 240S260 196 310 230'/%3E%3Cpath d='M-10 240C60 204 105 246 165 220S265 174 310 210'/%3E%3Cpath d='M-10 220C60 182 110 228 170 200S270 152 310 190'/%3E%3Cpath d='M-10 200C60 160 115 210 175 180S275 130 310 170'/%3E%3Cpath d='M-10 180C60 138 120 192 180 160S280 108 310 150'/%3E%3Cpath d='M-10 160C60 116 125 174 185 140S285 86 310 130'/%3E%3C/svg%3E"),
      linear-gradient(180deg, #2f5593 0%, #2b4684 40%, #2a3b78 72%, #232f66 100%) !important;
    background-size: 14px 14px, 26vw 340px, 100% 100% !important;
    background-position: 7px 7px, 0 100%, 0 0 !important;
    background-repeat: repeat, no-repeat, no-repeat !important;
    background-attachment: fixed !important;
    border-right: 1px solid #1a2754 !important;
  }
}

#sidebar form#searchForm {
  background: linear-gradient(180deg, #2f5593 70%, rgba(47, 85, 147, 0)) !important;
}

/* décadas: barrita dorada y borde lavanda al pasar el mouse */
#sidebar .menu5 .panel-heading::before {
  background: var(--gh-gold);
  opacity: 0.6;
}

#sidebar .menu5 .panel-heading:hover {
  background: rgba(157, 153, 217, 0.18) !important;
  border-color: rgba(157, 153, 217, 0.55);
}

/* títulos de sección con un cuadradito dorado */
.geohistoria-panel-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--gh-gold);
  flex-shrink: 0;
}

/* categorías */
.geohistoria-categoria-btn i {
  color: var(--gh-violet);
}

.geohistoria-categoria-btn:hover {
  background: var(--gh-violet);
  border-color: var(--gh-violet-light);
}

.geohistoria-categoria-btn:hover i {
  color: #fff;
}

.geohistoria-categoria-badge {
  background: var(--gh-gold);
  color: var(--gh-navy);
  font-weight: 700;
}

.geohistoria-categoria-btn:hover .geohistoria-categoria-badge {
  background: #fff;
  color: var(--gh-indigo);
}

.geohistoria-categoria-header-icon {
  color: var(--gh-violet-light);
}

.geohistoria-categoria-volver:hover,
#sidebar .ui-btn.btn-search:hover,
#sidebar .gh-help-side:hover {
  background: var(--gh-violet) !important;
  color: #fff;
}

.geohistoria-activa-remove {
  color: var(--gh-violet);
}

.geohistoria-activa-remove:hover {
  color: var(--gh-navy);
}

/* contador de capas activas y capas activas */
.active-layers-counter {
  background: var(--gh-gold) !important;
  color: var(--gh-navy) !important;
  font-weight: 700;
}

#sidebar li.capa.active {
  background: var(--gh-violet) !important;
  border-color: var(--gh-violet) !important;
}

#sidebar li.capa.active input[type="range"]::-webkit-slider-thumb {
  border-color: var(--gh-indigo);
}

#sidebar li.capa.active input[type="range"]::-moz-range-thumb {
  border-color: var(--gh-indigo);
}

/* botones de la barra y popup */
#logo-help .ui-btn:hover,
.gh-about-btn:hover {
  background: rgba(157, 153, 217, 0.35) !important;
}

.gh-modal-header {
  background: linear-gradient(100deg, #223766 0%, #34568f 32%, #4476a9 62%, #6a67b1 100%);
}

.gh-modal-body h3 {
  color: var(--gh-indigo);
  border-bottom-color: #d4d2ee;
}

.gh-modal-body .gh-cita {
  border-left-color: var(--gh-violet);
  background: #f1f0fa;
}

.gh-modal-body li a {
  background: #eceaf8;
  color: var(--gh-indigo);
}

.gh-modal-body li a:hover {
  background: var(--gh-violet);
  color: #fff;
}

/* Menos espacio entre las décadas y "Categorías" */
#sidebar.panel,
#sidebar.panel-default {
  margin-bottom: 0 !important;
}

#geohistoria-panel {
  padding-top: 4px;
}

#geohistoria-panel > .geohistoria-panel-title:first-child {
  margin-top: 4px;
}


/* Cuadradito para activar / desactivar las capas de fotografías aéreas */
#sidebar li.capa input.gh-capa-check {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: 17px;
  height: 17px;
  margin: 0 2px 0 8px;
  border: 2px solid #4476a9;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
#sidebar li.capa input.gh-capa-check:checked {
  border-color: #fff;
}
#sidebar li.capa input.gh-capa-check:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 4px;
  height: 9px;
  border: solid #4476a9;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#sidebar li.capa input.gh-capa-check:focus-visible {
  outline: 2px solid #4fd3d6;
  outline-offset: 1px;
}
#sidebar li.gh-con-check .legend-layer {
  display: none;
}
#sidebar li.gh-con-check .name-layer {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  padding-left: 6px;
}