html{
    overflow: hidden;
}
body {
  font-family: 'Montserrat', sans-serif;
}
#map-content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
}
#map {
	height: 100%;
	width: 100%;
}

.leaflet-top {
    bottom: 37px !important;
}

.leaflet-container {
    background: white;
}

#bp-layers{
    position: absolute;
    display: grid;
    /*align-items: center;
    justify-content: center;
    height: 100vh;*/
    left: 15px;
    top: 25px;
}

#reset-page{
    text-align: center;
}
#reset-page button{
    width: 100%;
    display: flex;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    display: flex;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 20px;
    border: 1px solid #9EBFB8;
    background: #D8EEEA;
    box-shadow: 0px 4px 4px 0px rgba(89, 89, 89, 0.25);
    margin-top: 12px;
}

.bp-header{
    background: #114443;
    box-shadow: rgb(117, 117, 117) 1px 1px 4px 1px;
}

/*.bp-button-layer{
    border-bottom: 1px solid #cdd0d3;
}*/

.bp-button-info{
    /*background-color: #efefef;*/
    color:#666666;
}

.bp-button-ind{
    border-bottom: 1px solid #cdd0d3;
}

.layer-capasActuaciones, .layer-capasVegetacion, .layer-capasFauna, .layer-capasSuperficie, .layer-capasBioUrbana, .layer-capasConectividadEco, .layer-capasBeneficiosAmbientales,
.layer-capasBeneficiosSocioeconomicos, .layer-capasOtherLayers, .layer-capasInvBiodiversidad, .layer-limitesAdministrativos, .layer-capaSeleccionada{ 
    background-color: #FFFEED!important;
}
.LayerContentDetails{ 
    background-color: #FFF283!important;
    background: #FFFCE0!important;

}

.capsulaSelectorCapas{
    border-radius: 20px;
    padding-top: 8px;
    padding-right: 10px;
    padding-bottom: 12px;
    padding-left: 10px;
    margin-bottom: 15px;
    background: #1C4D46AD;
}

.bp{
    display: block;
   /* z-index: 1100;*/
    /* background: #1c7063;*/

    color: #114443;
    fill: white;
    max-width: 40%;
}
.bp-species{
    color: #114443;
    font-weight: 600;
    font-size: 19px;
    line-height: 100%;
    letter-spacing: 0%;
}

#bp-layers-container{
    /*max-height: 814px;*/
    /* max-height: calc(100vh - 220px);
    max-height: calc(92vh - 229px);*/
    max-height: calc(100vh - 214px);
    overflow: auto;
    white-space: nowrap;
    overflow-y: auto;
    overflow-x: hidden;
    /*width: 482px;*/
    width: 411px;
    left: 5px;
    background: linear-gradient(180.01deg, rgba(255, 255, 255, 0.68) 62.86%, rgba(255, 255, 255, 0.44) 132.05%);
    border-radius: 16px;
    box-shadow: 0px 6px 3px 0px #68686840;
    padding: 20px;
}
/* Estilo del scrollbar */
#bp-layers-container::-webkit-scrollbar, #contenido-info-capas::-webkit-scrollbar {
    width: 8px; /* Ancho del scrollbar */
}

/* Color del "dedo" o pulgar del scrollbar */
#bp-layers-container::-webkit-scrollbar-thumb, #contenido-info-capas::-webkit-scrollbar-thumb {
    background-color: #1c7063;
    border-radius: 6px; /* Bordes redondeados */
}

/* Fondo de la pista del scrollbar */
#bp-layers-container::-webkit-scrollbar-track, #contenido-info-capas::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Cambia este color si es necesario */
    border-radius: 6px;
}

/* Fondo cuando se desplaza */
#bp-layers-container::-webkit-scrollbar-thumb:hover, #contenido-info-capas::-webkit-scrollbar-thumb:hover {
    background-color: #14574f; /* Color más oscuro cuando se desplaza */
}

.layer-title{
    background-color: #1c7063;
    padding: 5px;
    text-align: center;
    font-size: 13pt;
    text-transform: uppercase;
}


.bio-panel-icon{
    max-width: 25px;
    max-height: 25px;
}

.bp-body{
    position: fixed;
    clear: both;
    /*background: white;*/
    /*box-shadow: 1px 1px 7px 1px rgb(117, 117, 117);*/
}

.bp-button {
    position: relative;
    padding: 7px;
    border-radius: 16px;
    margin: 10px 5px;
    box-shadow: 0px 4px 4px 0px #00000040;
    background-color: white;
    transition: transform 0.3s ease;
}

.bp-button-disabled{
    color: #114443;
    fill: #114443;
    background-color: white !important;
    border-bottom: 1px solid #cdd0d3 !important;
    border-radius: 16px;
    margin: 5px 5px;
    box-shadow: 0px 4px 4px 0px #00000040;
}

.bp-button-txt{
    display: table-cell;
    vertical-align: middle;
    padding-left: 10px;
    /*padding-right: 5px;*/
}

.bp-button-txt-layer-selector{
    padding-right: 50px; /* Give space to arrow which is absolute positioned */
}

.bp-button-img{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.bp-button-icon-container{
    position: relative;
    display: block;
}

.bp-button-txt-main{
    /*font-size: 16px;
    font-weight: 600;
    line-height: 20.57px;
    letter-spacing: -0.01em;
    text-align: left;
    color: #11443D;*/
    word-break: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
    white-space: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0%;
}

.bp-button-txt-sub{
    font-size: 14px;
    font-weight: 400;
    line-height: 18.15px;
    text-align: left;
    color: #11443D;
}
.bp-button-txt-main-info{
    font-size: 13px;
    font-weight: 500;
    line-height: 18.15px;
}

.bp-button-txt-sub-info{
    font-size: 10pt;
    font-weight: 300;
}

.bp-button-small-text{
    font-size: 10pt;
}

.bp-button-chevron{
    display: table-cell;
    vertical-align: middle;
    position: absolute;
    top: 39%;
    right: 10px;
}

.bp-button-plants{
    background-color: #509a5c;
}

.bp-button-trees{
    background-color: #805308;
}

.bp-button-birds{
    background-color: #469aaa;
}

.btn-species{
    border-top: 1px solid #cdd0d3;
    color: white;
}


.btn-option{
    color: #666666;
    background-color: #efefef;
    padding: 0.2em 2em 0.2em 2em;
    border-radius: 10px;
    border: none;
    outline: none;
}

.btn-filter-remove{
    width: 100%;
    border-radius: 50px;
    font-size: 10pt;
    color: inherit;
    /*background-color: #ffffff44;*/
    font-style: italic;
    text-align: left;
    padding: 1px 25px 1px 10px;
    position: relative;
}


.bp-button-action{
    background-color: #1c7063;
    color: white;
    margin-bottom: 2px;
    font-size: 14pt;
    padding-left: 22px;
}

.svg{
    width: 24px;
    height: 24px;
}

.btn-show-species-list-container, .btn-up-layer-list-container, .btn-down-layer-list-container, .btn-eye-layer-list-container {
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}
.btn-eye-layer-list-container, .btn-up-layer-list-container, .btn-down-layer-list-container, .btn-show-species-list-container {
    width: 30px;
    height: 30px;
}
.btn-up-layer-list-container{
    right: 75px;
}
.btn-down-layer-list-container{
    right: 40px;
}
.btn-eye-layer-list-container{
    right: 110px;
}
.btn-show-species-list-container{
    right: 5px;
}

.btn-show-species-list, .btn-up-layer-list, .btn-down-layer-list, .btn-eye-layer-list {
    position: absolute;
    left: 0px;
    width: 48px;
    top: 0px;
    bottom: 0px;
    border: none;
    background: none;
    outline: none;
    border-radius: 15px;
    background: #077977;
    width: 30px;
    height: 30px;
    /*border: 2px solid #0A5E52;*/
    line-height: initial;
}
.btn-eye-layer-list img {
    display: block;
    margin: auto;
}
/*.btn-show-species-list .svg{
    position: absolute;
    top: 14px;
    left: 0px;
    bottom: 0px;
    margin: auto;
   
}*/

.layer-extra-option-container{
    margin-top: 15px;
    color: #666666;
    white-space: nowrap;
    overflow-y: auto;
    overflow-x: hidden;
    width: 411px;
    position: relative;
    background: #1C4D46AD;
    border-radius: 16px;
    box-shadow: 0px 6px 3px 0px #68686840;
    padding: 10px 15px;
    display: grid;
}

#CapasSecundarias-opacity{
    width: 100%;
    outline: none;
    padding: 0;
}

input[type=range] {
    height: 25px;
    -webkit-appearance: none;
    /*margin: 10px 0;*/
    width: 100%;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    animate: 0.2s;
    background: #1c7063;
    border-radius: 8px;
    border: 2px solid #0A5E52;
}
#CapasDestacadasArbol input[type=range]::-webkit-slider-runnable-track {
    background: #2A902D;
}
#CapasDestacadasAreasVerde input[type=range]::-webkit-slider-runnable-track {
    background: #D0E870;
}
input[type=range]::-webkit-slider-thumb {
    border: 2px solid #0A5E52;
    height: 20px;
    width: 20px;
    border-radius: 20px;
    background: white;
    cursor: pointer;
    -webkit-appearance: none;
    /*margin-top: -8.5px;*/
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ABABAB;
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    animate: 0.2s;
    background: #1c7063;
    border-radius: 8px;
    border: 2px solid #0A5E52;
}
#CapasDestacadasArbol input[type=range]::-moz-range-track {
    background: #2A902D;
}
#CapasDestacadasAreasVerde input[type=range]::-moz-range-track {
    background: #D0E870;
}
input[type=range]::-moz-range-thumb {
    border: 2px solid #0A5E52;
    height: 13px;
    width: 13px;
    border-radius: 20px;
    background: white;
    cursor: pointer;
}
input[type=range]::-ms-track {
    width: 98%;
    height: 8px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #ABABAB;
    border: none;
    border-radius: 16px;
}
input[type=range]::-ms-fill-upper {
    background: #ABABAB;
    border: none;
    border-radius: 16px;
}
input[type=range]::-ms-thumb {
    /*margin-top: 1px;*/
    border: none;
    height: 20px;
    width: 20px;
    border-radius: 20px;
    background: #1C7063;
    cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
    background: #ABABAB;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ABABAB;
}
input[type="range"]::-webkit-slider-thumb {
    margin-top: -7px;
}
#box-alert{
    width: 539px;
    border: 2px solid #b2d2bc;
    border-top-color: rgb(178, 210, 188);
    border-right-color: rgb(178, 210, 188);
    border-bottom-color: rgb(178, 210, 188);
    border-left-color: rgb(178, 210, 188);
    text-align: center;
    padding: 13px;
    font-weight: bold;
    border-radius: 10px;
    background-color: #ffffffdb;
    border-color: #1c706369;
    z-index: 999999;
    display: none;
    justify-content: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    top: 45px;
    font-size: 17px;
    box-shadow: 0px 0 4px #1c706373;
}
.box-alert-closed {
    display: none !important;
}

/*.panel{
    margin-bottom: 15px;
}*/

/*Leyenda*/
.leyenda{
    background: #F9FFE3;; border-radius: 15px; margin-top: 15px; padding: 10px 8px;
}
.titleLeyenda{
    margin-bottom: 10px; /*margin-left: 10px;*/ color: #1c7063;font-weight: bold;
    /*padding-top: 14px;*/
}

.imgLeyenda{
    display: block; text-align: right;
}

/*** Columns ***/
.col-30{
    display: inline-block;
    width: 30%;
}

.col-50{
    display: inline-block;
    width: 50%;
}

.col-70{
    display: inline-block;
    width: 70%;
}

/* Agrega los estilos necesarios según tus necesidades */
.hidden {
    display: none;
}

/*Apartado de contenido del selector de capas*/
.layer-content {
    /*position: absolute;*/
    top: 0;
    left: 100%;
    width: 100%;
    height: auto;
    /*background-color: #fff;*/ /* Cambia el color de fondo según tus necesidades */
    /*overflow: auto;*/
    transition: transform 0.5s ease;
}

.layer-content-inner {
    padding: 7px;
}

.back-arrow {
    /*cursor: pointer;*/
    /*color: black;*/ /* Puedes cambiar el color según tu diseño */
    /*margin-top: 10px;*/ /* Ajusta el margen según sea necesario */
    /*display: block;*/ /* Asegura que la flecha se muestre como bloque para que ocupe espacio */
    cursor: pointer;
    color: white;
    margin-top: 2px;
    display: none;
    position: absolute;
    font-size: 25px;
    margin-left: 11px;
}

/*Iconos menú selector de capas*/
.layer-toogle-buttons {
    transition: transform 0.5s ease;
}

.rotated {
    transform: rotate(180deg);
    transition: transform 0.3s;
}

/* Estilos para el contenedor del buscador */
.search-wrapper {
    position: relative;
    width: 100%;
}
#searchInput {
    width: 99%;
    padding: 8px;
    margin-top: 5px;
    border-radius: 15px;
    border: 2px solid gray;
    margin-left: 2px;
}
.search-wrapper::after {
    content: '';
    position: absolute;
    right: 25px;
    top: 53%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url('../img/buscar.png'); /* Ruta relativa a la imagen local */
    background-size: contain; /* Ajusta la imagen al tamaño del contenedor */
    background-repeat: no-repeat;
    pointer-events: none; /* El icono no interfiere con el input */
}

.imgLayersAdmin {
    background-color: #114443; /* defines the background color of the image */
    mask: url(../img/iconosmenu/layers.svg) no-repeat center / contain;
    -webkit-mask: url(../img/iconosmenu/layers.svg) no-repeat center / contain;
    width: 20px;
    height: 20px;
}

#imglimitesAdministrativos {
    background-color: #114443; /* defines the background color of the image */
    mask: url(../img/iconosmenu/limitesadministrativos.svg) no-repeat center / contain;
    -webkit-mask: url(../img/iconosmenu/limitesadministrativos.svg) no-repeat center / contain;
    width: 20px;
    height: 19px;
}

#imgcapasActuaciones {
    background-color: #114443; /* defines the background color of the image */
    mask: url(../img/iconosmenu/actuaciones.svg) no-repeat center / contain;
    -webkit-mask: url(../img/iconosmenu/actuaciones.svg) no-repeat center / contain;
    width: 20px;
    height: 15px;
}

#imgInventarioBio {
    background-color: #114443; /* defines the background color of the image */
    mask: url(../img/iconosmenu/cienciaciudadana.svg) no-repeat center / contain;
    -webkit-mask: url(../img/iconosmenu/cienciaciudadana.svg) no-repeat center / contain;
    width: 20px;
    height: 20px;
}

#imgcapasVegetacion {
    background-color: #114443; /* defines the background color of the image */
    mask: url(../img/iconosmenu/flora.svg) no-repeat center / contain;
    -webkit-mask: url(../img/iconosmenu/flora.svg) no-repeat center / contain;
    width: 20px;
    height: 18px;
}

#imgcapasFauna {
    background-color: #114443; /* defines the background color of the image */
    mask: url(../img/iconosmenu/fauna.svg) no-repeat center / contain;
    -webkit-mask: url(../img/iconosmenu/fauna.svg) no-repeat center / contain;
    width: 20px;
    height: 19px;
}

#imgcapasSuperficie {
    background-color: #114443; /* defines the background color of the image */
    mask: url(../img/iconosmenu/superficie.svg) no-repeat center / contain;
    -webkit-mask: url(../img/iconosmenu/superficie.svg) no-repeat center / contain;
    width: 20px;
    height: 22px;
}

#imgcapasBioUrbana {
    background-color: #114443; /* defines the background color of the image */
    mask: url(../img/iconosmenu/urbanBiodiversity.svg) no-repeat center / contain;
    -webkit-mask: url(../img/iconosmenu/urbanBiodiversity.svg) no-repeat center / contain;
    width: 20px;
    height: 20px;
}

#imgcapasConectividadEco {
    background-color: #114443; /* defines the background color of the image */
    mask: url(../img/iconosmenu/ecologicalConnectivity.svg) no-repeat center / contain;
    -webkit-mask: url(../img/iconosmenu/ecologicalConnectivity.svg) no-repeat center / contain;
    width: 20px;
    height: 20px;
}

.imgResilenciaClimatica {
    background-color: #114443; /* defines the background color of the image */
    mask: url(../img/iconosmenu/climateResilience.svg) no-repeat center / contain;
    -webkit-mask: url(../img/iconosmenu/climateResilience.svg) no-repeat center / contain;
    width: 12px;
    height: 24px;
}

.imgInfraestructuraVerde {
    background-color: #114443; /* defines the background color of the image */
    mask: url(../img/iconosmenu/InfraestructuraVerde.svg) no-repeat center / contain;
    -webkit-mask: url(../img/iconosmenu/InfraestructuraVerde.svg) no-repeat center / contain;
    width: 20px;
    height: 18px;
}

#imgcapasBeneficiosAmbientales {
    background-color: #114443; /* defines the background color of the image */
    mask: url(../img/iconosmenu/environmentalBenefits.svg) no-repeat center / contain;
    -webkit-mask: url(../img/iconosmenu/environmentalBenefits.svg) no-repeat center / contain;
    width: 20px;
    height: 20px;
}

#imgcapasBeneficiosSocioeconomicos {
    background-color: #114443; /* defines the background color of the image */
    mask: url(../img/iconosmenu/socioEconomicBenefits.svg) no-repeat center / contain;
    -webkit-mask: url(../img/iconosmenu/socioEconomicBenefits.svg) no-repeat center / contain;
    width: 20px;
    height: 20px;
}

#imgcapasOtherLayers {
    background-color: #114443; /* defines the background color of the image */
    mask: url(../img/iconosmenu/otras_capas.svg) no-repeat center / contain;
    -webkit-mask: url(../img/iconosmenu/otras_capas.svg) no-repeat center / contain;
    width: 20px;
    height: 20px;
}

#imgÁrboles {
    background-color: #666666; /* defines the background color of the image */
    mask: url(../img/Arboles.svg) no-repeat center / contain;
    -webkit-mask: url(../img/Arboles.svg) no-repeat center / contain;
}
#imgArbustos {
    background-color: #666666; /* defines the background color of the image */
    mask: url(../img/Arbustos.svg) no-repeat center / contain;
    -webkit-mask: url(../img/Arbustos.svg) no-repeat center / contain;
}
#imgsetosVegetacion {
    background-color: #666666; /* defines the background color of the image */
    mask: url(../img/setosVegetacion.svg) no-repeat center / contain;
    -webkit-mask: url(../img/setosVegetacion.svg) no-repeat center / contain;
}
#imgOtros_Elementos_Vegetales {
    background-color: #666666; /* defines the background color of the image */
    mask: url(../img/Otros_Elementos_Vegetales.svg) no-repeat center / contain;
    -webkit-mask: url(../img/Otros_Elementos_Vegetales.svg) no-repeat center / contain;
}

.icon {
    width: 20px;
    height: 20px;
    display: inline-table;
}

.icon-info {
    width: 20px;
    height: 20px;
    display: inline-table;
}

/*El numero de arboles sobre la capa de lArea Submunicipales*/
[class*="labelAreaSubmunicipales"] {
    -webkit-text-stroke: 0.5px white;
    color: black;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    pointer-events: none !important;
    height: 24px !important;
    border-radius: 20px;
    opacity: 0.8;
    width: 24px !important;
}

/*checkbox de leflet*/
.leaflet-control-layers{
    box-shadow:none!important;
    display: contents;
}
input[type="radio"] {
  position: relative;
  top: 0px;
  /*right: 7px;*/
  height: 20px;
  width: 20px;
  background-color: white;
  cursor: pointer;
  display: inline-block;
  border-radius: 50%;
  -webkit-appearance: none;
  border: 2px solid #1c7063;
}
input[type="radio"]:after{
    content: '';
    display: block;
    height: 20px;
    position: relative;
    width: 20px;
    border-radius: 50%;
}

input[type="radio"]:checked:after{
    background-color: #1c7063;
    top: -2px;
    left: -2px;
}
input[type="radio"] + span{
    margin-left: 7px;
}
input[type="checkbox"]{
    position: relative;
    top: 0px!important;
    height: 20px;
    width: 20px;
    background-color: white;
    cursor: pointer;
    display: inline-block;
    -webkit-appearance: none;
    border: 2px solid #1c7063;
    border-radius: 8px;
    justify-content: center;
}
input[type="checkbox"] + span{
    margin-left: 7px;
}

input[type="checkbox"]:after{
    content: '';
    display: block;
    height: 10px;
    position: absolute;
    width: 10px;
}

input[type="checkbox"]:checked:after{
    background-color: #1c7063;
    top: -2px;
    left: -2px;
    width: 10px;
    height: 10px;
    margin: 5px;
    border-radius: 3px;
}

#contenido-info-capas{
    max-height: calc(100vh - 220px);
    overflow: auto;
    /*white-space: nowrap;*/
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: 14px;
}

#menu-ciudad-soria, #menu-barrios{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding-top: 8px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    background: #1C4D46AD;
    margin: 9px 0px;
}
.detalles{
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: -2%;
}
  
.ico-arrow-box {
    display: table-cell;
    vertical-align: middle;
    position: absolute;
    top: 39%;
    right: 10px;
}

.ico-arrow-box img{
    width: 19px;
    position: absolute;
    right: 10px;
    display: revert;
}

.ico-arrow-box-info {
    display: table-cell;
    vertical-align: middle;
    position: absolute;
    top: 39%;
    right: 10px;
}

.ico-arrow-box-info img{
    width: 14px;
    position: absolute;
    right: 13px;
    display: revert;
}
/*.contenido{
    background-color: white;
}*/
.decripcion-info-layers {
    background-image: -webkit-linear-gradient(270deg, #333333 60%, transparent 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    max-height: 115px;
    overflow: hidden;
    white-space: inherit;
    border-bottom: none;
}
.btn-descripcion-info {
    text-transform: uppercase;
    margin-top: 10px;
    color: #666666;
    background-color: #efefef;
    /*padding: 0.2em 2em 0.2em 2em;*/
    padding: 4px;
    border-radius: 10px;
    border: none;
    outline: none;
    margin-bottom: 12px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    font-size: 10pt;
}

#modalMoreInfo {
    right: 330px;
    width: 400px;
    background: #1C4D46AD;
    box-shadow: -2px 1px 6px 0px rgb(117, 117, 117);
    /*max-height: calc(110vh - 435px);*/
    padding: 10px;
    border-radius: 20px;
}
.bp-modal-window {
    position: absolute;
    background-color: white;
    display: flex;
    flex-flow: column;
    font-size: 12pt;
    color: #666666;
    z-index: 99999;
    box-shadow: 1px 1px 7px 1px rgb(117, 117, 117);
    max-width: 100%;
}

.btn-modal-close {
    cursor: pointer;
}
.btn-modal-close {
    position: absolute;
    right: 15px;
    top: 5px;
    height: 20px;
    width: 20px;
}

.bp-modal-title {
    position: relative;
    height: 30px;
    flex: none;
    width: 100%;
}
.bp-modal-body {
    padding: 15px;
    overflow: auto;
    background: white;
    border-radius: 20px;
}
#species-modal-name {
    font-weight: bold;
    margin-bottom: 10px;
}
.species-modal-scientific-name {
    font-style: italic;
    margin-bottom: 15px;
}
.dropdown-content {
display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    transform: translate(373px);
    bottom: 0px;
}

.sub-menu {
    display: none;
        position: absolute;
    bottom: 0;
    left: 101%;
    width: 400px;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.sub-menu a img{
    width: 15px;
    margin-left: 10px;
}
.sub-menu a img:hover {
    width: 17px;
}

.dropdown-content a {
    color: black;
    /*padding: 12px 16px;*/
    padding: 6px 12px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}
 
/* Estilos generales para el control de capas */
/*.leaflet-control-layers {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    padding: 10px;
    margin: 10px;
}*/

#CapasDestacadas .layer-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    border-radius: 14px;
    margin-bottom: 5px;
    background-color: #f5f5f5;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

#CapasDestacadas .layer-container span{
    /*font-size: 17px;
    font-weight: 600;
    line-height: 20.57px;
    letter-spacing: -0.01em;
    text-align: left;*/
    color: #11443D;
    display: inline-block;
    display: inline-block;
    /*width: 130px;*/
    width: 140px;
    margin-right: 10px;
}

#CapasDestacadas .layer-container input[type="checkbox"] {
    margin-left: 10px;
}

#CapasDestacadas .layer-container input[type="range"] {
    margin: 0 10px;
    flex-grow: 1;
    background-color: transparent;
    flex: 1;
    margin-right: 10px; /* Espacio entre el input range y el checkbox */
}


/* Estilos generales para el control de capas */
.leaflet-control-layers {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    padding: 10px;
    margin: 10px;
}

.leaflet-control-layers-textos {
    word-break: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
    white-space: normal;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0%;
    color: #11443D;
}

.leaflet-control-layers label {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 14px;
    margin-bottom: 5px;
    cursor: pointer;
    background-color: #f5f5f5;
}

.leaflet-control-layers label:hover {
    background-color: #e5e5e5;
}

.layer-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/*.layer-container span {
    margin-right: 10px;
}*/

.layer-container input[type="checkbox"] {
   /* margin-left: 10px;*/
   margin-left: 5px;
}

.layer-container input[type="range"] {
    margin: 0 10px;
    flex-grow: 1;
}

.leaflet-control-layers-list input {
    float: right;
    margin-left: 8px;
}

.leaflet-control-layers-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*.leaflet-control-layers-list label span {
    width: 100%;
}*/
html body div#bp-layers.bp div#box-layers.bp-body div#bp-layers-container div#layer-content.layer-content div#layer-content-limitesAdministrativos.contenido.capsulaSelectorCapas div.layer-content-inner div#limitesAdministrativos.panel div.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control section.leaflet-control-layers-list div.leaflet-control-layers-overlays label span.leaflet-control-layers-textos,
html body div#bp-layers.bp div#box-layers.bp-body div#bp-layers-container div#layer-content.layer-content div#layer-content-capasOtherLayers.contenido.capsulaSelectorCapas div.layer-content-inner div#OtherLayers.panel div.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control section.leaflet-control-layers-list div.leaflet-control-layers-overlays label span.leaflet-control-layers-textos,
html body div#bp-layers.bp div#box-layers.bp-body div#bp-layers-container div#layer-content.layer-content div#layer-content-1.contenido.capsulaSelectorCapas div.layer-content-inner div#MapaBase.panel div.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control section.leaflet-control-layers-list div.leaflet-control-layers-base label span.leaflet-control-layers-textos,
html body div#bp-layers.bp div#box-layers.bp-body div#bp-layers-container div#layer-content.layer-content div#layer-content-limitesAdministrativos.contenido.capsulaSelectorCapas div.layer-content-inner div#limitesAdministrativos.panel div.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control section.leaflet-control-layers-list div.leaflet-control-layers-overlays label span{
    width: 100%;
}
.ico-arrow-box-info-info{
display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 48px;
  right: 10px;
  position: relative;
}
.ico-arrow-box-info-info span{
    position: relative;
  display: block;
  /*top: 3px;*/
  outline: none;
  border-radius: 15px;
  background: white;
  width: 30px;
  height: 30px;
  border: 2px solid #0A5E52;
  line-height: initial;
}


.container-consulta {
    display: flex;
    /*gap: 20px;*/
    gap: 15px;
    bottom: 25px;
    right: 0px;
    position: absolute;
}

.descargar-capas .layer-title-txt, .capture-layer .layer-title-txt{
    fill: transparent;
    align-content: center;
    text-align: center;
    border-radius: 14px;
    background: #0A5E52;
    height: 32px;
    font-weight: 700;
    line-height: 31.33px;
    color: white;
    box-shadow: 0px 4px 4px 0px #56545473;
    margin-bottom: 6px;
    width: 95px;
    font-size: 13px;
}

.consulta-poligono, .descargar-capas {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.descargar-capas button, .icons button{
    width: 38px;
  height: 38px;
  border-radius: 30px;
  border: 1px solid #9EBFB9;
  background: #D8EEEA;
  cursor: pointer;
  margin: 0px 5px;
}

/*.descargar-capas button img, .icons button img{
    width: 16px;
    height: 16px;
}*/

.separator {
    width: 2px;
    height: 100%;
    background-color: #D8EEEA;
    margin: 0px 1px;
}

.icons {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0A5E5299;
    padding: 10px;
    width: 295px;
    height: 78px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.icons-sub{
    height: 54px;
    padding-top: 8px;
    padding-right: 12px;
    padding-bottom: 8px;
    padding-left: 12px;
    border-radius: 20px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

#spanBarrios{
    display: table-cell;
    vertical-align: middle;
    padding-left: 5px;
    width: 100%;
    font-weight: 600;
    font-size: 19px;
    line-height: 100%;
    letter-spacing: 0%;
    color: white;
}
#menu-barrios {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.5s ease-out;
}

#menu-barrios.show {
    max-height: 100%;
}

/* Opcional: Ocultar el div completamente cuando está colapsado */
#menu-barrios.hidden {
   display: none;
}

/* MENU HERRAMIENTAS */
#menu-tools-icon{
    cursor: pointer;
}

.tool-box {
    fill: transparent;
    align-content: center;
    background: #114443;
    color: white;
    box-shadow: 0px 4px 4px 0px #56545473;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 19px;
    line-height: 100%;
    letter-spacing: 0%;
    width: 295px;
    height: 42px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    text-align: left;
    padding-left: 12px;
    padding-right: 12px;
}

.hidden-icons {
    display: none!important;
}

.tools-minimized {
    display: flex !important;
}

.tools-text{
    display: table-cell;
    vertical-align: middle;
    padding-left: 5px;
    width: 100%;
    color: white;
}

.tools-minimized .tools-text {
    display: none !important;
}

.tool-box.minimized {
    width: 34px!important;
    height: 34px!important;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 50%;
    bottom: 80px;
    position: absolute;
    right: 3px;
}

/*ETIQUETAS*/
.custom-popup {
    position: relative;
    background-color: #fff;
    padding: 10px;
    border-radius:14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    display: inline-table;
}
.custom-popup h6 {
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: left;
    color: #114443;
    margin-bottom: 5px;
}
.custom-popup p {
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0%;
}
.custom-popup p img{
    margin-right: 10px;
}
.custom-popup::after {
    content: "";
    position: absolute;
    bottom: -13px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #fff;
    border-bottom: 0 solid transparent;
}

#toggleButton {
    position: absolute;
    /*bottom: 125px;*/
    bottom: 85px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background-color: #fff;
    cursor: pointer;
    box-shadow: 0px 4px 4px 0px #56545473;
    color: #0A5E52;
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    border: 1px solid #114443;
    border-radius: 14px;
    padding: 13px 12px;
}

.modal-open {
    overflow: unset!important;
}
.moda-linfo-li{
    /*color: #11443D;
    background: #FFFCE0;
    border-radius: 14px;
    padding: 7px;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin: 10px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding-top: 14px;
    padding-right: 14px;
    padding-bottom: 10px;
    padding-left: 14px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    background: #FFF;
    border-style: solid;
    border-color: var(--table-secondary-borderColor, #ACD6CF);
    color: #406C63;*/
    padding: 14px;
    box-shadow: 0px 4px 4px 0px #00000040;
    background: #FFF;
    color: #406C63;
    border: 1px solid #ACD6CF;
    font-family: Montserrat;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: -2%;
}
.moda-linfo-ul{
    list-style-type: none;
    padding: 0px;
}

.capaControles {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 15px;
}

.activarCapas,
.deseleccionarCapas {
    cursor: pointer;
    color: white;
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
}
.deseleccionarCapas {
    text-decoration: underline;
}

#staticBackdrop .modal-content{
    background: #1C4D46AD;
}
#staticBackdrop.modal.fade.show div.modal-dialog.modal-dialog-scrollable.modal-dialog-centered div.modal-content div#modalContent.modal-body div ul.moda-linfo-ul{
    margin-bottom: 0px!important;
}

#staticBackdropLabel{
    color: white;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
}

.moda-linfo-li:first-child {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.moda-linfo-li:last-child {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/*Modal carga*/
.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 50000000;
    height: 50px;
    margin: auto;
    width: 50%;
    text-align: center;
}

.spinner > div {
  background-color: #1c7063;
  height: 100%;
  width: 7px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}   
.blockScreen{
    position: absolute;
    width: 100%;
    height: 100%;
}

.difuminado {
    -webkit-filter: blur(4px);
}

/*pildoras modal de descarga*/
.filter-pill.active {
    background-color: #0A5E52;
    color: white;
    border: 1px solid #0A5E52;
    border-radius: 16px;
    font-weight: bold;
    font-size: 12px;
    padding: 7px;
}
.filter-pill.inactive {
    background-color: white;
    color: #0A5E52;
    border: 1px solid #0A5E52;
    border-radius: 16px;
    font-weight: bold;
    font-size: 12px;
    padding: 7px;
}

/*Leyenda imprimir*/
.leaflet-control-browser-print {
    display: none!important;
}

.leyenda-img {
    width: 70px;
    height: 70px;
    object-fit: cover;
}



/* ========================================================= */
/* BOTÓN AYUDA DE CADA UNA DE LAS CAPAS                     */
/* ========================================================= */

.leaflet-control-layers-overlays label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0px;
    width: 100%;
}

.grupo-controles-derecha {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.icono-ayuda-capa {
    margin-top: 2px;
    display: inline-block;
    width: 20px;
    height: 20px;
    color: #47605B;
    border-radius: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    user-select: none;
    border: 1px solid #47605B;
    /*margin-right: 8px;*/
}

.icono-ayuda-capa:hover {
    background-color: #47605B6E;
}

.info-ayuda-item {
    width: 100%; 
    margin-top: 0px;
    margin-bottom: 10px;
    padding: 5px 12px;
    background-color: #ffffff;
    /*border-left: 3px solid #007bff;*/
    border-radius: 20px;
    font-weight: 400;
    font-size: 13px;
    line-height: 14px;
    letter-spacing: -2%;
    animation: fadeIn 0.3s ease; 
    white-space: normal; 
    overflow-wrap: break-word;
    word-break: break-word;
    width: 100%; 
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 1px solid #ddd;
    border-top: none;
}

/* aplicamos el css para el apartado de Inventario Biodiversidad  */
#InvBiodiversidad label{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    width: 100%;
    background-color: #ffffff;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 20px;
    transition: border-radius 0.2s ease-in-out;
}

#InvBiodiversidad .icono-ayuda-capa{
    margin-top: 0px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.leaflet-control-layers-overlays label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    width: 100%;
    background-color: #ffffff;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 20px;
    transition: border-radius 0.2s ease-in-out;
}

.leaflet-control-layers-overlays label:has(+ .info-ayuda-item), #InvBiodiversidad label:has(+ .info-ayuda-item) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0; 
    border-bottom-color: transparent;
}

/* ---------------Paginacion del datatables de descargas--------------- */
.dt-paging-button {
    background: #ACD6CF!important;
    border-radius: 21px!important;
    padding: 5px 14px!important;
    font-size: 15px!important;
}

.dt-paging-button.first, .dt-paging-button.previous, .dt-paging-button.next, .dt-paging-button.last{
    background: white!important;
    font-weight: 700;
}

#filesTableBody > :last-child > :first-child {
    border-bottom-left-radius: 20px !important;
}

#filesTableBody > :last-child > :last-child {
    border-bottom-right-radius: 20px !important;
}

html body.modal-open div#modalDescargas.modal.fade.show div.modal-dialog.modal-dialog-scrollable.modal-xl.modal-dialog-centered div.modal-content div.modal-body div#filesTable_wrapper.dt-container.dt-empty-footer div.dt-layout-row div.dt-layout-cell.dt-layout-end div.dt-paging.paging_full_numbers nav button.dt-paging-button.first:hover,
html body.modal-open div#modalDescargas.modal.fade.show div.modal-dialog.modal-dialog-scrollable.modal-xl.modal-dialog-centered div.modal-content div.modal-body div#filesTable_wrapper.dt-container.dt-empty-footer div.dt-layout-row div.dt-layout-cell.dt-layout-end div.dt-paging.paging_full_numbers nav button.dt-paging-button.previous:hover,
html body.modal-open div#modalDescargas.modal.fade.show div.modal-dialog.modal-dialog-scrollable.modal-xl.modal-dialog-centered div.modal-content div.modal-body div#filesTable_wrapper.dt-container.dt-empty-footer div.dt-layout-row div.dt-layout-cell.dt-layout-end div.dt-paging.paging_full_numbers nav button.dt-paging-button.next:hover,
html body.modal-open div#modalDescargas.modal.fade.show div.modal-dialog.modal-dialog-scrollable.modal-xl.modal-dialog-centered div.modal-content div.modal-body div#filesTable_wrapper.dt-container.dt-empty-footer div.dt-layout-row div.dt-layout-cell.dt-layout-end div.dt-paging.paging_full_numbers nav button.dt-paging-button.last:hover{
    background-color: transparent !important;
    color: black !important;
    border: none !important;
    cursor: pointer;
}

html body.modal-open div#modalDescargas.modal.fade.show div.modal-dialog.modal-dialog-scrollable.modal-xl.modal-dialog-centered div.modal-content div.modal-body div#filesTable_wrapper.dt-container.dt-empty-footer div.dt-layout-row div.dt-layout-cell.dt-layout-end div.dt-paging.paging_full_numbers nav button.dt-paging-button:hover{
    background-color: #1D7064 !important;
    color: black !important;
    border: none !important;
}

/* ---------------Buscador de especie--------------- */
.buscador-container {
    padding: 10px 0;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
}

.buscador-wrapper {
    position: relative;
    margin-bottom: 10px;
}

.buscador-especies {
    width: 100%;
    border: none;
    box-sizing: border-box;
    background: #F7FCF7;
    border-radius: 20px;
    padding: 10px 40px 10px 40px; 
    font-weight: 400;
    font-size: 13px;
    line-height: 100%;
    letter-spacing: 0%;
}
.icono-lupa {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 12px;
    color: #888;
    display: flex;
    align-items: center;
}
.icono-limpiar {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #999;
    cursor: pointer;
    display: none;
    align-items: center;
}

/* Cuando el wrapper tiene la clase 'has-text', mostramos el icono */
.buscador-wrapper.has-text .icono-limpiar {
    display: flex;
}

/* CARRUSEL DE IMAGENES PARA LA PASTILLA DE SUPERFICIES DE AREA VERDE */
.carousel-container {
    position: relative;
    width: 90%;
    margin: 12px auto;
}

.carousel-img {
    display: none; /* Oculta todas las imágenes por defecto */
    width: 100%;
    border-radius: var(--bs-card-inner-border-radius);
}

.carousel-img.active {
    display: block; /* Muestra solo la imagen activa */
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    font-size: 18px;
    z-index: 10;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn.prev {
    left: 5px;
}

.carousel-btn.next {
    right: 5px;
}