body {
  font-family: "DM Sans", sans-serif;
}

/* =========================
   RESET
========================= */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* =========================
   HERO
========================= */
.hero-section {
  text-align: center;
}

.logo-principal {
  width: 350px;
  margin-bottom: 10px;
}

/* =========================
   MENU PRINCIPAL
========================= */
.menu-principal {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 30px;
  font-family: "DM Sans", sans-serif;
  position: relative;
  z-index: 1000;
}

.menu-item {
  position: relative;
}

.menu-title {
  cursor: pointer;
  color: #2e2e2e;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 5px;
  transition: 0.2s ease;
}

/* Flecha abajo SOLO si hay dropdown */
.menu-item > .menu-title::after {
  content: "▾";
  font-size: 12px;
  margin-left: 6px;
}

/* Hover principal */
.menu-item:hover > .menu-title {
  color: #7c750f;
}

/* =========================
   DROPDOWN NIVEL 2
========================= */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 260px;
  padding: 10px 0;
  border-radius: 8px;
  box-shadow: 0 10px 25px #00000014;

  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.25s ease;
}

/* ACTIVACIÓN CORRECTA */
.menu-item:hover > .dropdown {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   NIVEL 2 ITEMS
========================= */
.sub-item {
  position: relative;
  padding: 10px 20px;
}

.sub-title {
  color: #333;
  font-size: 14px;
  cursor: pointer;
}

.sub-item:hover {
  background: #f7f7f7;
}

/* Flecha solo si hay submenu */
.has-submenu > .sub-title::after,
.sub-item-level3 > .sub-title::after {
  content: "▸";
  float: right;
  font-size: 12px;
}

/* =========================
   SUBMENU NIVEL 3
========================= */
.sub-dropdown {
  position: absolute;
  top: 0;
  left: 100%;
  background: #fff;
  min-width: 240px;
  padding: 10px 0;
  border-radius: 8px;
  box-shadow: 0 10px 25px #00000014;

  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.25s ease;
}

/* ACTIVACIÓN CORRECTA */
.sub-item:hover > .sub-dropdown {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   ITEMS DIRECTOS DEL DROPDOWN
========================= */

.dropdown li {
  list-style: none;
  padding: 12px 20px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: 0.2s ease;
  white-space: nowrap;
}

/* =========================
   NIVEL 4 (CASOS ESPECIALES)
========================= */
.sub-dropdown-level3 {
  position: absolute;
  top: 0;
  left: 100%;
  background: #fff;
  min-width: 220px;
  padding: 10px 0;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.25s ease;
}

/* ACTIVACIÓN CORRECTA */
.sub-item-level3:hover > .sub-dropdown-level3 {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   ITEMS INTERNOS
========================= */
.sub-dropdown li,
.sub-dropdown-level3 li {
  padding: 8px 20px;
  font-size: 14px;
  cursor: pointer;
  color: #000000;
}

.sub-dropdown li:hover,
.sub-dropdown-level3 li:hover {
  background: #f0f0f0;
}

/* =========================
   HERO LAYOUT
========================= */

.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 50px auto;
  gap: 40px;
}

/* TEXTO */
.hero-text {
  flex: 1;
  text-align: left;
}

.hero-text h1 {
  font-size: 42px;
  color: #344435;
  margin-bottom: 15px;
}

.hero-text h2 {
  font-size: 42px;
  color: #344435;
  margin-bottom: 25px; /* 🔥 MÁS espacio */
  font-weight: 700;
}

.hero-text p {
  font-size: 16px;
  color: #666;
  max-width: 500px;
  line-height: 1.6; /* 🔥 más aire entre líneas */
}

/* IMAGEN */
.hero-image {
  flex: 1.5;
  text-align: right;
  position: relative;
  z-index: 1;
}

.hero-image img {
  width: 100%;
  max-width: 620px;
  opacity: 0.8; /* como en tu referencia */
}

/* DECORACIÓN */
.hero-decor {
  width: 100%;
  margin-top: -45px;
}

.hero-decor img {
  width: 100%;
  max-height: 120px;
  object-fit: contain;
}

.hero-header {
  text-align: center;
  margin-bottom: 40px;
}

/* Capacidades Estratégicas de la Universidad */

/* 1. Alineamos los puntitos decorativos para que acompañen bien al texto largo */
.inv-clickable > div:nth-child(2),
.patente-clickable > div:nth-child(2),
.lab-clickable > div:nth-child(2) {
  align-items: flex-end !important;
}

/* 2. Forzamos al texto a romper la línea en lugar de cortarse */
.inv-clickable > div:nth-child(2) a,
.patente-clickable > div:nth-child(2) span:first-child,
.lab-clickable > div:nth-child(2) span:first-child {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: 85% !important;
  line-height: 1.4 !important;
  padding-bottom: 5px !important;

  /* 👇 AÑADE ESTA LÍNEA PARA JUSTIFICAR EL TEXTO 👇 */
  text-align: justify !important;
}

body {
  font-family: "DM Sans", sans-serif;
  background-color: #ffffff;
  color: #333333;
  margin: 0;
  padding: 0;
}

/* Contenedor principal de las vistas internas */
.section-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
}

.section-container h2 {
  font-weight: 700;
  margin-bottom: 40px;
  font-size: 1.8rem;
  color: #134a2c !important; /* Verde UAEMex */
}

/* ==========================================================================
   LAYOUT DE 3 COLUMNAS (Barra lateral | Mapa | Lista)
   Aplica a las secciones: Laboratorios, Investigaciones, Patentes
   ========================================================================== */
.investigacion-layout {
  display: grid;
  /* Columna izq de 260px, el resto para el contenido derecho */
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
}

/* 1. COLUMNA IZQUIERDA: Menú Lateral (.inv-sidebar) */
.inv-sidebar {
  background-color: #ffffff;
  padding-right: 20px;
  border-right: 1px solid #eaeaea; /* Línea separadora sutil */
  height: 100%;
}

.inv-sidebar h3 {
  font-size: 1.1rem;
  color: #c49a45; /* Dorado/Oliva institucional */
  margin-top: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 10px;
  font-weight: 500;
}

.inv-sidebar .filter-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 10px 15px;
  margin-bottom: 5px;
  border-radius: 6px;
  cursor: pointer;
  color: #666;
  font-size: 0.95rem;
  font-family: "DM Sans", sans-serif;
  transition: all 0.2s ease;
}

.inv-sidebar .filter-btn:hover,
.inv-sidebar .filter-btn.active {
  background-color: #f7f7f7;
  color: #134a2c;
  font-weight: 700;
}

/* 2. ZONA CENTRAL Y DERECHA (.inv-content) */
.inv-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Barra de Búsqueda Minimalista */
.uniform-search {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.uniform-search input {
  flex-grow: 1;
  padding: 12px 20px;
  border: 1px solid #ddd;
  border-radius: 30px; /* Bordes redondeados modernos */
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.3s;
}

.uniform-search input:focus {
  border-color: #c49a45;
}

.uniform-search button {
  padding: 12px 25px;
  background-color: #134a2c;
  color: white;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  transition: background 0.3s;
}

.uniform-search button:hover {
  background-color: #0d361f;
}

/* Estilo del Contenedor del Mapa (.map-frame) */
.map-frame {
  border-radius: 12px;
  background-color: #f9f9f9; /* Fondo claro mientras carga */
  border: 1px solid #eaeaea;
  overflow: hidden;
}

/* 3. COLUMNA DERECHA: Lista de resultados (#labs-list, etc) */
/* Personalización del scrollbar para que se vea limpio */
#labs-list::-webkit-scrollbar,
#investigacion-list::-webkit-scrollbar,
#patentes-list::-webkit-scrollbar {
  width: 6px;
}
#labs-list::-webkit-scrollbar-thumb,
#investigacion-list::-webkit-scrollbar-thumb,
#patentes-list::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  border-radius: 10px;
}

/* Estilo de los items que se generan en JS dentro de la lista derecha */
/* Asumiendo que tu JS inyecta <div> o <li> dentro de estas listas */
#labs-list > div,
#investigacion-list > div,
#patentes-list > div,
.scrollable-list > div {
  padding: 15px 0;
  border-bottom: 1px dotted #ccc; /* Línea punteada tipo Canva */
  position: relative;
  padding-left: 20px;
}

/* Viñeta dorada para cada elemento de la lista */
#labs-list > div::before,
#investigacion-list > div::before,
#patentes-list > div::before,
.scrollable-list > div::before {
  content: "•";
  color: #c49a45;
  font-size: 1.5rem;
  position: absolute;
  left: 0;
  top: 12px;
  line-height: 1;
}

/* Textos dentro de la lista */
#labs-list h4,
#investigacion-list h4,
#patentes-list h4 {
  margin: 0 0 5px 0;
  font-size: 1.05rem;
  color: #222;
  font-weight: 700;
}

#labs-list p,
#investigacion-list p,
#patentes-list p {
  margin: 0;
  font-size: 0.85rem;
  color: #666;
}

/* ==========================================================================
   PESTAÑAS SUPERIORES (Para la sección Oferta y Situación)
   ========================================================================== */
.filter-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 30px;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 15px;
}

.filter-bar .filter-btn {
  background: transparent;
  border: none;
  padding: 10px 15px;
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.filter-bar .filter-btn:hover,
.filter-bar .filter-btn.active {
  color: #134a2c;
  border-bottom-color: #c49a45;
  font-weight: 500;
}

/* ==========================================================================
   BOTONES GENERALES (Volver al menú)
   ========================================================================== */
.btn-home {
  display: block;
  margin: 40px auto 0;
  padding: 12px 30px;
  background-color: #f0f0f0;
  color: #333;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  transition: background 0.3s ease;
}

.btn-home:hover {
  background-color: #e0e0e0;
}

/* =========================================================
   AJUSTES MINIMALISTAS (CANVA STYLE) PARA LAS 3 SECCIONES
   ========================================================= */

/* 1. Menú Lateral: Sin líneas y fondo transparente */
.inv-sidebar {
  border-right: none !important;
  padding-right: 0 !important;
  background-color: transparent !important;
}

/* Botones del menú lateral como texto libre */
.inv-sidebar .filter-btn {
  padding: 8px 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}

.inv-sidebar .filter-btn:hover,
.inv-sidebar .filter-btn.active {
  color: #c49a45 !important;
  font-weight: 700 !important;
  background-color: transparent !important;
}

/* 2. Desaparecer la caja del mapa para que flote */
.map-frame {
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* 3. Barra de Búsqueda de una sola línea */
.uniform-search input {
  border: none !important;
  border-bottom: 1px solid #ccc !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  background: transparent !important;
}

.uniform-search button {
  background-color: transparent !important;
  color: #134a2c !important;
  border: 1px solid #134a2c !important;
}

.uniform-search button:hover {
  background-color: #134a2c !important;
  color: white !important;
}

/* 4. Quitar la viñeta dorada gigante (los puntitos los pondremos en el HTML) */
#labs-list > div::before,
#investigacion-list > div::before,
#patentes-list > div::before,
.scrollable-list > div::before {
  display: none !important;
}

/* =========================================================
   ENCABEZADO INSTITUCIONAL (LOGO)
   ========================================================= */
.encabezado-institucional {
  text-align: center;
  margin-bottom: 20px;
}

.encabezado-institucional img {
  height: 100px; /* Ajusta este tamaño si lo ves muy grande/chico */
  width: auto;
  margin-bottom: 5px;
}

/* =========================================================
   ADORNO INFERIOR DERECHO (ESTILO CANVA)
   ========================================================= */
/* Usamos el pseudo-elemento ::after para inyectar la imagen sin tocar el HTML */
.section-container::after {
  content: "";
  position: fixed; /* Se queda fijo en la esquina aunque hagas scroll */
  bottom: -20px;
  right: -20px;
  width: 350px; /* Tamaño del adorno */
  height: 350px;
  background-image: url("img/media_flor.png"); /* O el nombre de tu imagen de adorno */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  opacity: 0.7; /* Lo hace un poco transparente para que no estorbe la lectura */
  z-index: -1; /* Lo manda al fondo */
  pointer-events: none; /* Evita que estorbe si le das clic a algo de esa zona */
}

/* =========================================================
   ESTANDARIZACIÓN DE ALTURAS Y SCROLL LATERAL
   ========================================================= */

/* 1. Altura estricta para la zona del mapa y la lista derecha (para que sean iguales en las 3 vistas) */
.geo-wrapper {
  height: 600px !important;
  min-height: 600px !important;
  max-height: 600px !important;
}

.map-frame {
  height: 100% !important; /* Obliga al mapa a medir exactamente 600px */
}

#labs-list,
#investigacion-list,
#patentes-list {
  height: 100% !important;
  max-height: 600px !important;
  overflow-y: auto !important; /* Scroll para las listas de la derecha */
}

/* 2. Ajuste y Scroll para el menú izquierdo (Áreas de estudio) */
.inv-sidebar {
  max-height: 600px !important; /* Misma altura que el mapa */
  overflow-y: auto !important; /* Activa el scroll vertical si el contenido es muy largo */
  padding-right: 15px !important; /* Da un respiro para que el scroll no aplaste el texto */
  padding-bottom: 20px !important;
}

/* 3. Diseño limpio para el nuevo scroll izquierdo (Estilo Canva) */
.inv-sidebar::-webkit-scrollbar {
  width: 4px; /* Un scroll muy delgadito */
}
.inv-sidebar::-webkit-scrollbar-thumb {
  background-color: #d1d1d1; /* Gris sutil */
  border-radius: 10px;
}
.inv-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

/* =========================================================
   ESTANDARIZACIÓN ESTRICTA DE TAMAÑOS (ANCHO Y ALTO)
   ========================================================= */

/* Obligamos al contenedor a usar Grid en lugar de Flexbox para que no dependa del texto */
.geo-wrapper {
  display: grid !important;
  grid-template-columns: 60% 40% !important; /* El mapa toma SIEMPRE el 60% y la lista el 40% */
  gap: 30px !important;
  height: 600px !important;
  min-height: 600px !important;
  max-height: 600px !important;
}

/* El mapa respetará su 60% exacto */
.map-frame {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

/* La lista respetará su 40% exacto y mantendrá el scroll */
#labs-list,
#investigacion-list,
#patentes-list {
  width: 100% !important;
  height: 100% !important;
  max-height: 600px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important; /* Evita que el texto largo se desborde a los lados */
}

/* =========================================================
   PERMITIR NOMBRES LARGOS (TEXTO MULTILÍNEA)
   ========================================================= */

/* 1. Alineamos los puntitos decorativos para que acompañen bien al texto largo */
.inv-clickable > div:nth-child(2),
.patente-clickable > div:nth-child(2),
.lab-clickable > div:nth-child(2) {
  align-items: flex-end !important; /* Mantiene los puntitos decorativos alineados abajo */
}

/* 2. Forzamos al texto a romper la línea en lugar de cortarse */
.inv-clickable > div:nth-child(2) a,
.patente-clickable > div:nth-child(2) span:first-child,
.lab-clickable > div:nth-child(2) span:first-child {
  white-space: normal !important; /* Permite que el texto baje a la siguiente línea */
  overflow: visible !important; /* Muestra todo el texto sin esconderlo */
  text-overflow: clip !important; /* Quita los "..." de corte automático */
  max-width: 85% !important; /* Evita que el texto choque con los puntitos decorativos */
  line-height: 1.4 !important; /* Le da un respiro (espaciado) entre cada renglón */
  padding-bottom: 5px !important;
}

/* =========================================================
   ESTILOS MINIMALISTAS PARA NODOS (DIGITAL, AGUA, ALIMENTICIO)
   ========================================================= */

/* Layout para los nodos: Menú flotante izq | Mapa Central | Leyenda/Lista Der */
#digital .geo-wrapper,
#agua .geo-wrapper,
#alimenticio .geo-wrapper {
  display: grid !important;
  grid-template-columns: 200px 1fr 350px !important; /* Estructura 3 columnas */
  gap: 20px !important;
  align-items: start !important;
  height: 700px !important;
  min-height: 700px !important;
  background: transparent !important;
  border: none !important;
}

/* 1. Menú Izquierdo (Municipios) - Texto flotante */
/* NOTA: Tu JS actual pone esto abajo, necesitamos que flote a la izquierda */
.bottom-panel-municipios {
  display: block !important;
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
}

/* 2. Mapa Central Flotante */
#digital .map-frame,
#agua .map-frame,
#alimenticio .map-frame {
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
}

/* 3. Columna Derecha (Lista de Laboratorios) */
#digital .geo-sidebar,
#agua .geo-sidebar,
#alimenticio .geo-sidebar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 20px !important;
  height: 100% !important;
  overflow-y: auto !important;
}

#digital .geo-sidebar h3,
#agua .geo-sidebar h3,
#alimenticio .geo-sidebar h3 {
  font-size: 1.1rem !important;
  color: #333 !important;
  border-bottom: 2px solid #eaeaea !important;
  padding-bottom: 10px !important;
  margin-top: 0 !important;
}

.sidebar-item {
  padding: 15px 0 !important;
  border-bottom: 1px dotted #ccc !important;
  background: transparent !important;
  cursor: pointer !important;
}

.sidebar-item strong {
  font-size: 1rem !important;
  color: #333 !important;
  display: block !important;
}

.sidebar-item small {
  font-size: 0.8rem !important;
  color: #666 !important;
}

/* 4. Leyenda Flotante (Esquina Inferior Derecha) */
.map-bottom-panel {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  background: white !important;
  padding: 2px 6px !important; /* ↓ menos margen interno */
  border: 1px solid #eaeaea !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
  width: fit-content !important;
  min-width: unset !important; /* ← ESTO ES CLAVE */
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column !important;
}

.list-block {
  display: none !important; /* Apagamos la lista negra flotante */
}

.legend-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.legend-title {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #333 !important;
  margin-bottom: 8px !important;
  text-align: left !important;
}

.legend-item {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  color: #666 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 3px 0 !important;
  border: none !important;
  background: transparent !important;
}

.legend-item i {
  width: 15px !important;
  height: 15px !important;
  border-radius: 2px !important;
  display: inline-block !important;
}

.source-text {
  font-size: 0.65rem !important;
  color: #999 !important;
  text-align: right !important;
  margin-top: 10px !important;
}

.nodo-selector {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  z-index: 5000;
}

.nodo-selector-title {
  font-family: "DM Sans", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  cursor: pointer;

  transition: 0.2s ease;
}

.nodo-selector-title:hover {
  color: #7c750f !important;
}

.nodo-selector-dropdown {
  position: absolute;
  top: 110%;
  background: white;
  min-width: 360px;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.25s ease;
  z-index: 99999;
}

.nodo-selector:hover .nodo-selector-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nodo-selector-dropdown div {
  padding: 14px 18px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  color: #333;
  cursor: pointer;
  transition: 0.2s ease;
}

.nodo-selector-dropdown div:hover {
  background: #f7f7f7;
  color: #7c750f;
}

.situacion-menu-title {
  cursor: pointer;
  transition: 0.2s ease;
}

.situacion-menu-title:hover {
  color: #153221;
}

.area-btn {
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 10px 15px;
  color: #134a2c;
  font-size: 0.95rem;
  font-family: "DM Sans", sans-serif;
}

/* Mantener dropdown funcionando */
.menu-area {
  position: relative;
}

.menu-area:hover .menu-municipios {
  display: block;
}

.menu-oferta li {
  position: relative;
}

.menu-oferta li:hover > .menu-municipios {
  display: block;
}

/* ========================= */
/* FIX LEAFLET CONTROL */
/* ========================= */

.leaflet-control-layers {
  background: white;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  font-family: "DM Sans", sans-serif;
}

.leaflet-control-layers label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 14px;
}

.leaflet-control-layers input[type="checkbox"] {
  appearance: auto !important;
  width: auto !important;
  height: auto !important;
}

/* =========================================================
   SISTEMA INFALIBLE DE COLUMNAS (JS + CSS) - CORREGIDO
   ========================================================= */

/* Personalizamos el scrollbar para que se vea elegante estilo Canva */
.bottom-panel-municipios::-webkit-scrollbar {
  height: 6px;
}
.bottom-panel-municipios::-webkit-scrollbar-thumb {
  background-color: #d1d1d1;
  border-radius: 10px;
}

/* Contenedor de la leyenda */
.legend {
  background: white;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  min-width: 140px; /* Asegura un ancho mínimo para que no se corte el texto */
}

.legend h4 {
  margin: 0 0 10px 0;
  font-size: 1rem;
  font-weight: bold;
}

/* Cada fila de la leyenda (Icono + Texto) */
.legend-row {
  display: flex; /* Alinea icono y texto en línea */
  align-items: center; /* Los centra verticalmente */
  margin-bottom: 6px; /* Espacio entre filas */
  font-size: 0.9rem;
}

/* Cada fila de la leyenda */
.legend-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px; /* Un poco más de espacio */
}

/* El cuadro de color */
.legend-row i {
  width: 20px !important; /* Forzamos el tamaño */
  height: 20px !important;
  display: inline-block; /* OBLIGATORIO para etiquetas <i> vacías */
  margin-right: 10px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex-shrink: 0; /* Evita que el cuadro se aplaste */
}

.legend-row span {
  font-size: 0.95rem;
  color: #333;
}

/* =========================================================
   COLUMNAS REALES DE MUNICIPIOS
   ========================================================= */

/* CONTENEDOR GENERAL DE COLUMNAS */
.contenedor-columnas-seguro {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 18px !important;
  width: fit-content !important;
}

/* CADA COLUMNA */
.columna-mun {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 140px !important;
}

.mun-item-seguro {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  color: #1f1f1f !important;
  font-family: "DM Sans", sans-serif !important;
}
.mun-item-seguro:hover {
  color: #134a2c !important;
  font-weight: 700 !important;
}

.bottom-panel-municipios {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  width: fit-content !important;
  max-width: none !important;
  min-width: 220px !important;
  padding-right: 10px !important;
}

.bottom-panel-municipios {
  position: relative !important;
  z-index: 9999 !important;
}