#map {
    flex: 1;
    min-height: 75vh;
    z-index: 1;
    display: flex;
    flex-flow: column;
    transition: all 0.3s ease;
}

/* ================================================== */
/* Apply Custom Style to .map-button children         */
/* (White bg, blue text normal; Blue bg, white text hover) */
/* ================================================== */
.popup-image-container img {
    width: 100%;
    height: auto;
}

/*
.popup-image-container {
    justify-content: center;
    align-items: center;
    margin-right: 20px;
}
*/
    
.popup-image-container {
    /* display: flex; */
    justify-content: center;
    align-items: center;
    /* flex: 1; */
    /* min-height: 0; */
    margin-right: 4px;
}

.popup-thumbnail {
    /* Optional: Add styles for the image itself, like max-width */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Ensures the image scales correctly without distorting */
}

/* Selects button elements that are direct children (>) or descendants of .map-button */
.map-button button,
.map-button>a

/* Also target <a> tags if used as buttons */
    {
    /* --- Base Styles (Modified as requested) --- */
    background: #ffffff;
    /* White background */
    color: var(--bs-primary);
    /* Specific blue icon/text color */
    border: 2px solid lightgray;
    /* Light grey border, 2px thick */

    /* --- Keep Existing Size, Shape, Layout --- */
    width: 44px;
    /* Specific width */
    height: 44px;
    /* Specific height */
    font-size: 20px;
    /* Icon/text size (adjust if needed) */
    border-radius: 50%;
    /* Make it circular */
    transition: all 0.3s ease;
    /* Smooth transition for hover effects */
    display: inline-flex;
    /* Use flexbox for centering content */
    align-items: center;
    /* Vertically center content */
    justify-content: center;
    /* Horizontally center content */
    padding: 0;
    /* Remove default padding */
    margin: 5px;
    /* Add some margin between buttons if needed */
    box-shadow: none;
    /* Remove default shadow if any */
    cursor: pointer;
    /* Standard pointer cursor */
    text-align: center;
    /* Ensure text/icon is centered */
    vertical-align: middle;
    /* Helps with inline alignment */
    text-decoration: none;
    /* Remove underline from <a> tags */
    box-sizing: border-box;
    /* Include padding and border in the element's total width and height */
}

/* --- Hover Styles (Modified as requested - inverted colors) --- */
.map-button button:hover,
.map-button>a:hover {
    background: var(--bs-primary);
    /* Specific blue background on hover */
    color: #ffffff;
    /* White icon/text color on hover */
    border-color: var(--bs-primary);
    /* Match border to background on hover */
    transform: scale(1.05);
    /* Optional: Keep slight zoom effect */
    text-decoration: none;
    /* Ensure no underline on hover for <a> */
}

/* --- Active State (Optional - when clicked - kept from previous) --- */
.map-button button:active,
.map-button>a:active {
    transform: scale(1);
    /* Slightly reduce scale on click */
    opacity: 0.9;
    /* Slightly fade on click */
    /* You might want to adjust active background/color too if needed */
    /* background: darken(#008ca2, 10%); */
    /* Example: darker blue on click */
}

/* --- Style for Icons/Text inside the button (Keep this) --- */
/* Ensures icons (like FontAwesome <i>) or text inherit color correctly */
.map-button button i,
.map-button button span,
.map-button>a i,
.map-button>a span {
    color: inherit;
    /* Inherit color from the button state (normal/hover) */
    font-size: inherit;
    /* Inherit font-size from the button */
    line-height: 1;
    /* Reset line-height for better icon centering */
}

/* Example: Add margin between stacked buttons (Keep this) */
.map-buttons-vertical .map-button+.map-button {
    margin-top: 10px;
    /* Add space above subsequent buttons in a vertical stack */
}

.map-buttons-vertical .map-button button,
.map-buttons-vertical .map-button>a {
    margin: 0;
    /* Reset individual margins if container handles spacing */
}

/* Asegúrate de que los márgenes entre botones se eliminen si usas flexbox para espaciar */
.map-buttons-vertical .map-button+.map-button {
    margin-top: 0;
    /* Elimina el margen superior añadido previamente */
}



.map-control-button:hover {
    background-color: var(--bs-primary);
    /* Fondo azul al hacer hover */
    color: #ffffff;
    /* Color del texto del botón (y del icono) blanco al hacer hover */
}

.map-control-button:active {
    background-color: rgba(233, 236, 239, 0.5);
}


.map-controls-container {
    display: flex;
    position: relative;
}


/* Asegura que los íconos estén centrados */

*/ .position-relative {
    z-index: 810;
}

/**************************************/
/* Estilos básicos para el bocadillo */
/**************************************/
.speech-bubble {
    position: absolute;
    /* background-color: #f8f9fa; */
    border-radius: 0.5rem;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */
    /* z-index: 2; */
    /* width: 300px; */
}

/* Triángulo del bocadillo - será posicionado dinámicamente */
.speech-bubble::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    bottom: -28px;
    left: 50%;
    margin-left: -15px;
    border-top-color: #ffffff;
    /* filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15)); */
}

/* For Bootstrap color variants */
.speech-bubble.bg-primary::after {
    border-top-color: var(--bs-primary);
}

.speech-bubble.bg-secondary::after {
    border-top-color: var(--bs-secondary);
}

.speech-bubble.bg-success::after {
    border-top-color: var(--bs-success);
}

.speech-bubble.bg-danger::after {
    border-top-color: var(--bs-danger);
}

.speech-bubble.bg-warning::after {
    border-top-color: var(--bs-warning);
}

.speech-bubble.bg-info::after {
    border-top-color: var(--bs-info);
}

.speech-bubble.bg-light::after {
    border-top-color: var(--bs-light);
}

.speech-bubble.bg-dark::after {
    border-top-color: var(--bs-dark);
}

/* Si el bocadillo contiene una tarjeta con fondo blanco */
.speech-bubble .card {
    border: none;
    /*border-radius: 12px;*/
}

/* Para bocadillos con clase .card dentro */
.speech-bubble .card::after {
    border-top-color: inherit;
    border-top-color: #fff;
}

.speech-bubble .material-icons {
    max-width: 30px !important;
}

/*******************************/
/* popUpContent del marker
/******************************/
.popup-content {
    display: flex;
    justify-content: center;
    /* Center items horizontally along the main axis */
    align-items: center;
    /* Center items vertically along the cross axis */
    /* justify-content: space-between; */
    background-color: #ffffff;
    /* border: 1px solid #e0e0e0; */
    /* border-radius: 8px; */
    padding: 4px 0px;
    /* Dynamic padding: 4px top and bottom as requested */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); */
    font-family: Arial, sans-serif;
    position: relative;
    min-height: auto;
    /* Allow content to determine height dynamically */
}

.popup-text {
    flex: 1;
}

.popup-add-button {
    width: 25px;
    height: 25px;
}

/* Specific rule for popup content with both text and image */
.popup-content.speech-bubble {
    gap: 8px; 
    /* Add consistent spacing between elements */
    min-height: 60px;
    /* Ensure minimum height for proper alignment */
}

.popup-title {
    
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
  /*  white-space: nowrap;*/
    /* 1. Prevent text wrapping */
    overflow: hidden;
    /* 2. Hide overflowing text */
    text-overflow: ellipsis;
    /* 3. Display ellipsis for hidden text */
    width: auto;
    /* Required: Set a width for the element */
    display: block;
    /* Or inline-block, ensures width is respected */
}
 
 .popup-text {
    color: #333333;
    font-size: 14px;
   /* margin-bottom: 4px;*/
    /* max-height: 60px; - REMOVED: Allow dynamic height */
    max-height: none;
    /* Allow content to expand dynamically */
    overflow: visible;
    /* Show all content instead of hiding */
    text-overflow: unset;
    /* Remove ellipsis truncation */
    display: flex;
    /* Use flexbox for internal alignment */
    flex-direction: column;
    /* Stack children vertically */
    justify-content: center;
    /* Center content vertically */
    align-items: flex-start;
    /* Align text to start horizontally */
    width: auto;
    /* -webkit-line-clamp: 3; - REMOVED: Don't limit to 3 lines */
    /* -webkit-box-orient: vertical; - REMOVED: Not needed with block display */
    flex: 1;
    padding-left: 50px !important;
    /* Keep existing padding for button space */
    padding-right: 8px !important;
    /* Add right padding for balance */
}
body.mapa-edit .popup-text {
    color: #333333;
    font-size: 14px;
    margin-bottom: 4px;
    max-height: none;
    overflow: visible;
    text-overflow: ellipsis;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: auto;
    flex: 1;
    padding-left: 50px !important;
    padding-right: 8px !important;
}
.popup-separator {
    color: #999999;
    font-size: 12px;
    letter-spacing: 1px;
}

.popup-thumbnail {
    flex: 1;
    /* Take available space dynamically */
    max-width: none;
    /* Remove width restrictions */
    width: 100%;
    /* Use full available width */
    height: auto;
    /* Maintain aspect ratio */
    border-radius: 4px;
    object-fit: cover;
    /* Better image fitting */
    /* padding: 10px; */
    /*margin-left: 16px;*/
}

.popup-add-button {

    position: absolute;
    left: 8px;
    /* Changed from -16px to 8px to position inside */
    top: 50%;
    transform: translateY(-50%);
    background-color: #ff3333;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.popup-add-button span {
    font-size: 18px;
    font-weight: bold;
}

.popup-anchor {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #007bff;
    text-decoration: underline;
}



.popup-add-button {
    position: absolute;
    left: 8px;
    /* Changed from -16px to 8px to position inside */
    top: 50%;
    transform: translateY(-50%);
    background-color: #ff3333;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* You might also want to add some padding to the popup-text to accommodate the button */



.popup-links a {
    color: #007bff;
    text-decoration: none;
}

.popup-links a:hover {
    text-decoration: underline;
}


.image-container {
    /* max-height: 100px; - REMOVED: Allow dynamic height */
    max-height: none;
    /* Allow images to take full available height */
    position: relative;
    overflow: visible;
    /* Show full image content */
    border-radius: 0 0.5rem 0.5rem 0;
    flex: 1;
    /* Take available space */
}

.image-container img,
.popup-image-container img {
    object-fit: cover;
    /*border-radius: 0 12px 12px 0;*/
    /* max-height: 100px; - REMOVED: Allow dynamic height */
    max-height: none;
    /* Allow images to expand to available space */
    width: 100%;
    /* Take full width of container */
    height: auto;
    /* Maintain aspect ratio */
}
.location-pin {
    width: 35px !important;
    border-radius: 5px !important;
    max-height: 60px;
}
/****************************************/
/* Estilos para los paneles colapsables */
/****************************************/
.sidebar-container {
    position: relative;
    transition: all 0.3s ease;
    width: calc(100vw * 0.1);
}

.sidebar-container.collapsed {
    width: 40px !important;
    min-width: 50px !important;
    flex: 0 0 40px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sidebar-content {
    transition: opacity 0.3s ease, display 0.3s ease;
    opacity: 1;
    width: 100%;
    overflow: hidden;
}

.collapsed .sidebar-content {
    display: none;
    opacity: 0;
}

/****************************************/
/* Botones de toggle y títulos verticales */
/****************************************/
.sidebar-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    background-color: rgba(193, 193, 193, 0.85);
    border: 2px solid lightgray;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
}

.sidebar-toggle:hover {
    background-color: rgba(117, 117, 117, 0.85);
}

.sidebar-toggle i {

    color: #ffffff;
}

.vertical-title {
    display: none;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 14px;
    font-weight: bold;
    color: #666;
    margin: 2px auto;
    text-align: center;
    height: auto;
}

.collapsed .vertical-title {
    display: block;
}

/**************************************************************/
/* Ajustes específicos para cada panel del mapa con el jsTree */
/**************************************************************/
.left-sidebar .sidebar-header {
    justify-content: flex-end;
    /* Alinea el botón a la derecha */
}

.right-sidebar .sidebar-header {
    justify-content: flex-start;
    /* Alinea el botón a la izquierda */
}

.left-sidebar.collapsed .sidebar-header,
.right-sidebar.collapsed .sidebar-header {
    flex-direction: column;
    justify-content: flex-start;
}

/* Estilos para la toolbar del sidebar */
.sidebar-toolbar {
    transition: opacity 0.3s ease;
    opacity: 1;
    width: 75%;
}

.collapsed .sidebar-toolbar {
    display: none;
    opacity: 0;
}

/* Estilos para los botones de la toolbar */
.sidebar-toolbar .btn {
    /* width: 32px;
    height: 32px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border-radius: 4px;
}

.sidebar-toolbar .btn i {
    font-size: 22px;
}

/* Estilos para permitir desplazamiento horizontal en el sidebar */
.sidebar-content {
    overflow-x: auto;
    white-space: nowrap;
}


/* Ajustes para los nodos del árbol */
.jstree-node {
    position: relative;
    white-space: nowrap;
}


/**********************************/
/*customize the marker clusters:  */
/*********************************/
.marker-cluster {
    background-color: rgba(241, 128, 23, 0.6);
    border-radius: 50%;
    text-align: center;
}

.marker-cluster div {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;
    background-color: rgba(240, 194, 12, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marker-cluster span {
    color: #fff;
    font-weight: bold;
}

/* Different sizes */
.marker-cluster-small {
    background-color: rgba(181, 226, 140, 0.6);
}

.marker-cluster-small div {
    background-color: rgba(110, 204, 57, 0.6);
}

.marker-cluster-medium {
    background-color: rgba(241, 211, 87, 0.6);
}

.marker-cluster-medium div {
    background-color: rgba(240, 194, 12, 0.6);
}

.marker-cluster-large {
    background-color: rgba(253, 156, 115, 0.6);
}

.marker-cluster-large div {
    background-color: rgba(241, 128, 23, 0.6);
}

/************************************/
/* Tree                             */
/************************************/

#tree {
    font-size: 1rem;
}

/*
li .jstree-children {
    font-size: 0.80rem;
}
*/
.jstree-default .jstree-wholerow-clicked {
    background: #eaeaea !important;
}

/* Styling for the remove button on jsTree nodes */
.jstree-node {
    position: relative !important;
    margin-bottom: 2px !important;
    font-size: 0.80rem;
}

.jstree-wholerow {
    font-size: 0.92rem;
}

#root_anchor {
    font-size: 0.95rem;
}

/* The remove button - hidden by default */
.jstree-remove-btn {
    position: absolute;
    right: 10px;
    top: 50% !important;
    transform: translateY(-50%);
    background-color: rgba(220, 53, 69, 0.7);
    /* Bootstrap danger color with opacity */
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: none !important;
    /* Hidden by default with !important */
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
}

/* Only show remove button when hovering over the node */
.jstree-node:hover>.jstree-remove-btn {
    display: flex !important;
}

/* Hover effect for the remove button */
.jstree-remove-btn:hover {
    background-color: rgba(220, 53, 69, 0.9);
    /* Darker on hover */
}

/* Add some spacing for node text to prevent overlap with the button */
.jstree-anchor {
    padding-right: 25px !important;
}

/************************************/
/* leaflet                          */
/************************************/

.leaflet-control .map-button button,
.leaflet-control .map-button>a {
    margin: 0;
}


a.leaflet-control-zoom-in,
a.leaflet-control-zoom-out {
    /* background: #ffffff !important;*/
    color: #ffffff !important;
    background: radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0.05) 0%,
            transparent 70%);
    font-size: 25px !important;
}

.leaflet-control-zoom {
    margin-left: 12px !important;
    margin-top: 24px !important;
    border: none !important;
    box-shadow: none !important;
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    background: rgba(193, 193, 193, 0.5) !important;
    color: #ffffff !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 20px !important;
    border: 2px solid lightgray !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover {
    background: #ffffff !important;
    color: rgba(117, 117, 117, 0.85) !important;
    transform: scale(1.05);
}

.leaflet-control-zoom-in {
    margin-bottom: 10px !important;
}

/* Ensure attribution is in bottom right */
.leaflet-control-attribution {
    font-size: 10px !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
    padding: 2px 5px !important;
    margin: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
}

.leaflet-control-zoom.leaflet-bar.leaflet-control {
    margin-left: 7px !important;
}


.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
    /* width: 500px !important; */
    /* left: -152px !important; */
    bottom: -9px !important;
}

.leaflet-popup-content {
    margin: 2px !important;
    min-width: 270px !important;
    max-width: none !important;
    /* Allow popup to grow with content */
    width: auto !important;
    /* Let content determine width dynamically */
}

.leaflet-popup-content p {
    margin: unset !important;
    font-size: 13px !important;
}

.leaflet-popup-content span {
    /*  margin: 17px 0 15px 0 !important;*/
    display: block;
}

.leaflet-right {
    right: 0;
    bottom: 0;
    position: absolute;
}

/* Estilos adicionales para el control de nivel de zoom */
.leaflet-control-zoomlevel {
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    z-index: 800;
}

.leaflet-control-zoomlevel:hover {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.6);
}

/* Estilo alternativo con fondo oscuro */
.leaflet-control-zoomlevel.dark {
    background-color: rgba(51, 51, 51, 0.8);
    color: white;
    border: 2px solid rgba(120, 120, 120, 0.85);
}

/* Estilo para cuando estamos en niveles de zoom altos */
.leaflet-control-zoomlevel.high-zoom {
    background-color: rgba(76, 175, 80, 0.8);
    color: white;
}

/* Estilo para cuando estamos en niveles de zoom bajos */
.leaflet-control-zoomlevel.low-zoom {
    background-color: rgba(255, 152, 0, 0.8);
    color: white;
}

.leaflet-control-layers-toggle {
    background-image: url('') !important;
    border-radius: 50% !important;
}

.leaflet-control-layers.leaflet-control {
    border-radius: 0% !important;
}

.leaflet-control-layers.leaflet-control:not(.leaflet-control-layers-expanded) {
    border-radius: 50% !important;
}

.leaflet-touch .leaflet-control-layers-toggle {
    width: 44px;
    height: 44px;
    display: flex;
    /* Activa flexbox para el contenedor */
    justify-content: center;
    /* Centra horizontalmente */
    align-items: center;
    /* Centra verticalmente */
}

/* Fix container sizing and prevent drag interference */
.leaflet-control-layers {
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

.leaflet-control-layers-toggle {
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

.leaflet-control-layers-list {
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

.leaflet-control-layers-toggle:not(.leaflet-control-layers-expanded)::before {
    content: '\f0c9';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 24px;
    color: var(--bs-primary);
}


/*********** Responsive ***************/ 

/* ================================================================
   MOBILE DEVICES (up to 767px)
   ================================================================ */
@media (max-width: 767px) {
    /* Base mobile styles */
    .popup-image-container img {
        width: 80px !important;
        height: 56px !important;
        border-radius: 5px !important;
    }
    
    .popup-image-container img.location-pin {
        width: 30px !important;
        max-height: 50px;
        border-radius: 5px !important;
    }

    .popup-title {
        font-size: 12px;
        max-width: 150px;
    }
    
    .popup-text {
        font-size: 12px;
    }
    
    .map-button button {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }
    
    .language-selector-control {
        top: 10px !important;
        right: 10px !important;
        z-index: 1 !important;
    }
    
    .language-selector-dropdown {
        min-width: 100px;
    }
    
    .language-selector-control.lang-is-open .language-selector-dropdown {
        max-width: 100px;
    }
    
    .language-option {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .language-flag {
        width: 16px;
        height: 12px;
        margin-right: 6px;
    }
    
    .leaflet-left {
        width: 60% !important;
    } 
}

/* Extra small screens (≤320px) - Override mobile base */
@media (max-width: 320px) {
    .popup-image-container img {
        width: 60px !important;
        height: 42px !important;
    }
    
    .popup-image-container img.location-pin {
        width: 25px !important;
        max-height: 40px;
    }

    .popup-title {
        font-size: 11px;
        max-width: 120px;
    }
    
    .popup-text {
        font-size: 10px;
    }
    
    .map-button button {
        /*width: 40px;*/
        /*height: 40px;*/
        font-size: 14px;
    }
    
    .language-selector-dropdown {
        min-width: 90px;
    }
    
    .language-selector-control.lang-is-open .language-selector-dropdown {
        max-width: 90px;
    }
    
    .language-option {
        padding: 5px 8px;
        font-size: 11px;
    }
    
    .language-flag {
        width: 14px;
        height: 10px;
        margin-right: 5px;
    }
}

/* ================================================================
   TABLETS & SMALL DESKTOPS (768px - 1199px)
   ================================================================ */
@media (min-width: 768px) and (max-width: 1199px) {
    .popup-title { 
        text-overflow: ellipsis;
        width: 170px;
        overflow: hidden;
        white-space: nowrap;
    }

    .popup-image-container img { 
        width: 100px !important;
        height: 72px !important;
        border-radius: 5px !important;
    }

    .popup-image-container img.location-pin { 
         width: 40px !important;
        max-height: 50px;
        border-radius: 5px !important;
    }
    
   
    
    .map-button button {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }
    
    .language-selector-dropdown {
        min-width: 130px;
    }
    
    .language-selector-control.lang-is-open .language-selector-dropdown {
        max-width: 130px;
    }
    
    .language-option {
        padding: 7px 11px;
        font-size: 14px;
    }
    
    .language-flag {
        width: 18px;
        height: 13px;
        margin-right: 7px;
    }
}

/* ================================================================
   LARGE DESKTOPS (1200px and up)
   ================================================================ */
@media (min-width: 1200px) {
 
    .popup-image-container img {
        width: 120px !important;
        height: 80px !important;
        border-radius: 5px !important;
    }

    .popup-image-container img.location-pin { 
       width: 30px !important;
        max-height: 50px;
        border-radius: 5px !important;
    }
    
    /*
    .leaflet-touch .leaflet-control-layers, 
    .leaflet-touch .leaflet-bar {
        width: 100% !important;
    }
    */
    
    /*
    .map-button button {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
    */
    
    .language-selector-dropdown {
        min-width: 150px;
    }
    
    .language-selector-control.lang-is-open .language-selector-dropdown {
        max-width: 150px;
    }
    
    .language-option {
        padding: 8px 12px;
        font-size: 14px;
    }
    
    .language-flag {
        width: 20px;
        height: 15px;
        margin-right: 8px;
    }
}

.leaflet-popup-conten {
    margin: 2px !important;
}
 
.leaflet-container a.leaflet-popup-close-button {
    display: none !important;
}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
    margin-bottom: 20px !important;
}

/************ Lateral Leyenda ***************

/* Estilos para la leyenda del mapa */
.suaton-legend {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    line-height: 1.4;
    width: 250px;
    /* Ajusta según necesites */
    max-width: 250px;
    /* Ajusta según necesites */
}

.suaton-legend-title {
    font-weight: 600;
    margin-bottom: 5px;
    text-align: center;
    font-size: 16px;
}

.suaton-legend-table {
    width: 100%;
    border-collapse: collapse;
    /* Para evitar dobles bordes si los añades */
}

.suaton-legend-table td {
    padding: 2px 5px;
    /* Espaciado dentro de las celdas */
    vertical-align: middle;
    /* Alinear verticalmente icono y texto */
}

/*
.align-items-center label {
    font-size: 15.5px;
}
*/

.suaton-legend-icon {
    width: 18px;
    /* Ajusta el tamaño del icono */
    height: auto;
    /* Ajusta el tamaño del icono */
    margin-right: 5px;
    vertical-align: middle;
    /* Alinear con el texto */
}

.suaton-legend-table input[type='checkbox'] {
    width: 1.25em;
    height: 1.25em;
    margin: 0;
}

#add-folder-node,
.jstree-default .jstree-icon:empty {
    color: var(--bs-primary) !important;
    border: var(--bs-primary) !important;
}

/* --- Legend Sidebar Control --- */
.suaton-legend-sidebar-control {
    display: flex;
    align-items: flex-start;
    /* Alinea el botón y el panel al inicio (arriba) */
    /* Leaflet control positioning (e.g., bottomleft) handles absolute/fixed placement */
    z-index: 1000;
    /* Default z-index for Leaflet controls */
    /* Fix for pointer events - only button should be clickable when panel is closed */
    pointer-events: none;
}



.suaton-legend-sidebar-button {
    /* --- Inherited from .map-button button style --- */
    background: #ffffff;
    /* White background */
    color: var(--bs-primary);
    /* Specific blue icon color */
    border: 2px solid lightgray;
    /* Light grey border, 2px thick */
    width: 44px;
    /* Specific width */
    height: 44px;
    /* Specific height */
    border-radius: 50%;
    /* Make it circular */
    transition: all 0.3s ease;
    /* Smooth transition for hover effects */
    padding: 0;
    /* Remove default padding */
    box-shadow: none;
    /* Remove default shadow if any */
    /* --- Flex properties (already present, good) --- */
    display: flex;
    align-items: center;
    justify-content: center;
    /* --- Specific to legend button layout --- */
    cursor: pointer;
    margin-right: -1px;
    /* Overlap slightly with panel to hide its left border */
    z-index: 2;
    /* Button above panel */
    /* Restore pointer events for the button */
    pointer-events: auto;
}

.suaton-legend-sidebar-button:hover {
    /* --- Inherited from .map-button button:hover style --- */
    background: var(--bs-primary);
    /* Specific blue background on hover */
    color: #ffffff;
    /* White icon color on hover */
    border-color: var(--bs-primary);
    /* Match border to background on hover */
    transform: scale(1.05);
    /* Optional: Keep slight zoom effect */
}

.suaton-legend-sidebar-button i {
    /* --- Inherited from .map-button button i style --- */
    font-size: 20px;
    /* Icon size from .map-button */
    color: inherit;
    /* Inherit color from the button state (normal/hover) */
    line-height: 1;
}

/* Active state (Optional - when clicked - kept from .map-button) */
.suaton-legend-sidebar-button:active {
    transform: scale(1);
}

.suaton-legend-sidebar-panel {
    /* Uses leaflet-control-layers for base: background, border-radius, box-shadow */
    /* leaflet-control-layers-expanded for padding when open */
    width: 280px;
    /* Set a fixed width for the panel when open */
    max-width: 0;
    /* Initially collapsed */
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    /* Important for the transition */
    transition: max-width 0.35s ease-in-out, opacity 0.3s ease-in-out, padding 0.35s ease-in-out, transform 0.35s ease-in-out;
    transform: translateX(0%);
    /* Start at its natural position (hidden by max-width) */
    border-left: none;
    /* Button provides the left edge visual */
    z-index: 1;
    /* Panel below button if they were to overlap differently */
    max-height: 75vh;
    /* Max height for scrollability */
    overflow-y: auto;
    /* Enable vertical scroll if content exceeds max-height */
    /* Initially no pointer events when collapsed */
    pointer-events: none;
}

.suaton-legend-sidebar-control.legend-is-open .suaton-legend-sidebar-panel {
    max-width: 226px;
    opacity: 1;
    visibility: visible;
    font-size: 14px;
    /* Restore pointer events when panel is open */
    pointer-events: auto;
}

/* Styles for content within the panel (title, table, items) */
.suaton-legend-sidebar-panel .suaton-legend-title {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    color: #333;
}

.suaton-legend-sidebar-panel .suaton-legend-table {
    width: 100%;
    border-collapse: collapse;
}

.suaton-legend-sidebar-panel .suaton-legend-table td {
    padding: 4px 2px;
    vertical-align: middle;
}

.suaton-legend-sidebar-panel .suaton-legend-icon {
    width: 24px;
    height: auto;
    margin-right: 8px;
    vertical-align: middle;
}

.suaton-legend-sidebar-panel .form-check-label {
    font-size: 0.9em;
    color: #555;
}

.suaton-legend-sidebar-panel .form-check-input.custom-checkbox {
    transform: scale(0.9);
    margin-top: 0.2em;
}

/*** JsTree ***/
#add-folder-node>i {
    font-size: 24px !important;
}

#add-folder-node:hover {
    background-color: unset !important;
    border-color: unset !important;
}

/* Fix for custom map controls - ensure they don't block marker interaction */
.leaflet-control-container .leaflet-control {
    /* Only allow pointer events on the actual control elements, not empty space */
    pointer-events: none;
    border: none;
}
 

.leaflet-control-container .leaflet-control > * {
    /* Restore pointer events for actual control content */
    pointer-events: auto; 
}

/* Specific fixes for custom controls */
.custom-control {
    /* Ensure custom controls only capture events on their content */
    pointer-events: none;
}

.custom-control .map-buttons-vertical,
.custom-control .map-button,
.custom-control button {
    /* Restore pointer events for buttons */
    pointer-events: auto;
}

/* Fix for search control */
.leaflet-control-search {
    pointer-events: none;
}

.leaflet-control-search select,
.leaflet-control-search input,
.leaflet-control-search button {
    pointer-events: auto;
}

/* Language Selector Control Styles */
.language-selector-control {
    display: flex;
    align-items: center;
    pointer-events: auto;
    z-index: 1000;
}

.language-selector-button {
    background: #ffffff;
    color: var(--bs-primary);
    border: 2px solid lightgray;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: all 0.3s ease;
    padding: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: -1px;
    z-index: 2;
    pointer-events: auto;
}

.language-selector-button:hover {
    background: var(--bs-primary);
    color: #ffffff;
    border-color: var(--bs-primary);
    transform: scale(1.05);
}

.language-selector-button i {
    font-size: 20px;
    color: inherit;
    line-height: 1;
}

.language-selector-button .current-flag {
    width: 24px;
    height: 18px;
    border-radius: 2px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.language-selector-dropdown {
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    min-width: 150px;
    max-width: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-width 0.35s ease-in-out, opacity 0.3s ease-in-out, padding 0.35s ease-in-out;
    z-index: 1;
    pointer-events: none;
}

.language-selector-control.lang-is-open .language-selector-dropdown {
    max-width: 150px;
    opacity: 1;
    visibility: visible;
    padding: 8px 0;
    pointer-events: auto;
}

.language-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 14px;
    color: #333;
    text-decoration: none;
}

.language-option:hover {
    background-color: #f8f9fa;
    color: var(--bs-primary);
    text-decoration: none;
}

.language-option.active {
    background-color: var(--bs-primary);
    color: white;
}

.language-flag {
    width: 20px;
    height: 15px;
    margin-right: 8px;
    border-radius: 2px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

/* Flag backgrounds for common languages */
.language-flag.es {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="3" height="2" fill="%23AA151B"/><rect width="3" height="0.5" y="0.75" fill="%23F1BF00"/></svg>');
}

.language-flag.cat,
.language-flag.ca {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="3" height="2" fill="%23FCDD09"/><rect width="3" height="0.22" y="0.44" fill="%23DA020E"/><rect width="3" height="0.22" y="0.89" fill="%23DA020E"/><rect width="3" height="0.22" y="1.33" fill="%23DA020E"/><rect width="3" height="0.22" y="1.78" fill="%23DA020E"/></svg>');
}

.language-flag.en {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30"><clipPath id="t"><path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z"/></clipPath><path d="M0,0 v30 h60 v-30 z" fill="%23012169"/><path d="M0,0 L60,30 M60,0 L0,30" stroke="%23fff" stroke-width="6"/><path d="M0,0 L60,30 M60,0 L0,30" clip-path="url(%23t)" stroke="%23C8102E" stroke-width="4"/><path d="M30,0 v30 M0,15 h60" stroke="%23fff" stroke-width="10"/><path d="M30,0 v30 M0,15 h60" stroke="%23C8102E" stroke-width="6"/></svg>');
}

.language-flag.fr {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="1" height="2" fill="%23002654"/><rect width="1" height="2" x="1" fill="%23fff"/><rect width="1" height="2" x="2" fill="%23ED2939"/></svg>');
}

.language-flag.de {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="3" height="0.67" fill="%23000000"/><rect width="3" height="0.67" y="0.67" fill="%23DD0000"/><rect width="3" height="0.67" y="1.33" fill="%23FFCE00"/></svg>');
}

.language-flag.it {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="1" height="2" fill="%23009246"/><rect width="1" height="2" x="1" fill="%23FFFFFF"/><rect width="1" height="2" x="2" fill="%23CE2B37"/></svg>');
}

.language-flag.pt {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2"><rect width="1.2" height="2" fill="%23046A38"/><rect width="1.8" height="2" x="1.2" fill="%23DA020E"/><circle cx="1.2" cy="1" r="0.35" fill="%23FFE900" stroke="%23046A38" stroke-width="0.05"/></svg>');
}

.language-text {
    font-weight: 500;
}

/* Bootstrap Dropdown Menu Styles for Language Selector */
.language-dropdown-menu {
    min-width: 150px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    border: 1px solid #ccc;
    border-radius: 6px;
}

.language-dropdown-menu .dropdown-item.language-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.language-dropdown-menu .dropdown-item.language-option:hover {
    background-color: #f8f9fa;
    color: var(--bs-primary);
    text-decoration: none;
}

.language-dropdown-menu .dropdown-item.language-option.active {
    background-color: var(--bs-primary);
    color: white;
}

.language-dropdown-menu .language-flag {
    width: 20px;
    height: 15px;
    margin-right: 8px;
    border-radius: 2px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.language-dropdown-menu .language-text {
    font-weight: 500;
}

/* Select2 Language Selector Styles */
.language-selector-control .select2-container {
    z-index: 1001;
}

.language-selector-control .select2-container--bootstrap-5 .select2-selection {
    background: #ffffff;
    border: 2px solid lightgray;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    min-height: 38px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.language-selector-control .select2-container--bootstrap-5 .select2-selection:hover {
    border-color: var(--bs-primary);
    transform: scale(1.02);
}

.language-selector-control .select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 140, 162, 0.25);
}

.language-selector-control .select2-container--bootstrap-5 .select2-selection__rendered {
    padding: 6px 12px;
    color: #333;
    font-weight: 500;
}

.language-selector-control .select2-container--bootstrap-5 .select2-selection__arrow {
    height: 36px;
    width: 20px;
    right: 6px;
}

.language-selector-control .select2-dropdown {
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 1002;
}

.language-selector-control .select2-container--bootstrap-5 .select2-results__option {
    padding: 8px 12px;
    font-size: 14px;
}

.language-selector-control .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: #f8f9fa;
    color: var(--bs-primary);
}

.language-selector-control .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
    background-color: var(--bs-primary);
    color: white;
}

/* Language Loading Overlay */
.language-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.language-loading-content {
    background: white;
    border-radius: 12px;
    padding: 30px 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 300px;
    min-width: 250px;
    transform: scale(0.9);
    transition: transform 0.3s ease-in-out;
}

.language-loading-overlay[style*="opacity: 1"] .language-loading-content {
    transform: scale(1);
}

.language-loading-spinner {
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--bs-primary);
    border-radius: 50%;
    animation: language-loading-spin 1s linear infinite;
}

@keyframes language-loading-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.language-loading-text {
    color: #333;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}

.language-loading-subtext {
    color: #666;
    font-size: 14px;
    margin: 0;
}

.language-loading-flag {
    display: inline-block;
    width: 24px;
    height: 18px;
    margin-right: 8px;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    vertical-align: middle;
}

/* ================================================
   MEJORAS DE POPUP - ESTILOS MEJORADOS
   ================================================ */

/* Mejoras en el contenedor principal */
.popup-content.enhanced {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

.popup-content.enhanced:hover {
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Mejorar el texto con padding dinámico */
.popup-text.enhanced {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* SIN botón: padding reducido */
.popup-content.no-button .popup-text.enhanced {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* CON botón: padding aumentado */
.popup-content.has-button .popup-text.enhanced {
    padding-left: 45px !important; /* Espacio para el botón a la izquierda */
    padding-right: 50px !important; /* Más espacio cuando hay botón */
}
.popup-title.enhanced {
    font-weight: 600;
    color: #1f2937;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    letter-spacing: -0.01em;
}

.popup-description.enhanced {
    color: #4b5563;
    line-height: 1.4;
    text-overflow: ellipsis;
    width: 160px;
    overflow: hidden;
    white-space: nowrap;
}

/* Mejorar enlaces manteniendo el comportamiento */
.popup-links.enhanced a {
    color: #3b82f6;
    font-weight: 500;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.popup-links.enhanced a:hover {
    color: #1d4ed8;
    background-color: rgba(59, 130, 246, 0.1);
    text-decoration: none;
}

/* Mejorar la imagen manteniendo el layout */
.popup-thumbnail.enhanced {
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.popup-thumbnail.enhanced:hover {
    transform: scale(1.02);
}
 

/* Mejorar el separador */
.popup-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
    margin: 8px 0;
    border: none;
}

/* Animación sutil de entrada */
.leaflet-popup-content-wrapper {
    animation: subtlePopupFadeIn 0.25s ease-out;
}

@keyframes subtlePopupFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mejora sutil del contenedor de Leaflet sin cambiar funcionalidad */
.leaflet-popup-content-wrapper {
    border-radius: 10px;
}

.leaflet-popup-content {
    width: auto !important;
    margin: 0;
    padding: 0;
}

.leaflet-popup-tip {
    background: #ffffff;
}