@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
:root{

    --color-primary: #7f7f7f;
    --background-color:rgba(255, 255, 255, 0.8); 
  
    --border-radius: 10px;
    --border: solid #9b9b9b 1px;
    --border-radius-label: 6px;
    --z-index: 2000;
    --transition: all 300ms ease;
  
  }
  

*{
    margin: 0;
    padding: 0;   
    box-sizing: border-box;
}

body{
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    /*width: 100vw;*/  
}


input[type=button] {
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  border-radius: 15px;
  padding: 0.5rem;
 /* background-color: hsl(0, 0%, 98%); */
 background-color: white;
  border: solid white 2px;
  transition: var(--transition);
  white-space: normal;
  box-shadow: 3px 3px #333;
  font-weight: 500;
}

input[type=button]:hover {
  background-color: hsl(0, 0%, 90%); 
  transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
  -moz-transform:translate(0px,5px);

}

 select{
  font-family: 'Poppins', sans-serif;
  text-align: center;
  
}


input{
  padding: 0.2rem;
}

input::placeholder{
  font-family: 'Poppins', sans-serif;
  text-align: center;
  color: #666666;

}

.container{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}


.top{

  height: 84vh;
  position: relative;
}


#map{
 height: 100%;
 width: 100%;  
}

.title{
  position: absolute;
  z-index: var(--z-index);
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 30px;
  font-style: italic;

}

/* Filtros */

.filter{
  position: absolute;
  background-color: var(--background-color);
  width: 290.22px;
  z-index: var(--z-index);
  top: 357px;
  left: 20px;
  border-radius: var(--border-radius);
  border: var(--border);
  padding: 1rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.filter-container{
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.filter-container > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.filter__title{

  font-weight: 1000;
  text-align: center;

}


.filter-hidden{
  display: none;
}

/* Legenda */

.legend{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  background-color: var(--background-color);
  border-radius: var(--border-radius);
  z-index: var(--z-index);
  top: 220px;
  left: 20px;
  border: var(--border);
  padding: 0.4rem;
  
} 

.legend__head{
  text-align: center;
  padding: 0.3rem 0;
}

.legend__title{
  font-weight: 1000;
}

.legend__body{
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.legend__section{

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 0.5rem;
  align-items: center;

}

.legend__total{
    text-align: center;    
}

.legend__description{
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}

.legend__color{
  justify-self: center;
  align-self: center;
  height: 1.2rem;
  width: 4.5rem;
  border-radius: 3px;
  border: solid gray 0.5px;
}

.legend__section:nth-child(1) .legend__color {
  background-color: red;
}

.legend__section:nth-child(2) .legend__color {
  background-color: #FFBF00;
}


/*bottom*/

.bottom{
  height: 16%;
 
  display: flex;
  flex-direction: row;
}

.sectors{
  display: flex;
  flex-direction: row;
  width: 80%;
  
}

.sectors__total{
  display: flex;
  width: 20%;
  background-color: var(--color-primary);
  justify-content: center;
  align-items: center;
}

.sectors__total--card{
  display: flex;
  flex-direction: column;
}

.sectors__total--card > span{
  color: #fff;
  text-align: center;
  text-shadow: 0.1em 0.1em 0.05em #333;
}

.sectors__total--card > span:nth-child(1){
  font-size: 50px;
}

.sectors__total--card > span:nth-child(2){
  font-weight: 600;
}

.sectors__indicator{
  width: 80%;
}


.report{
  background-color: var(--color-primary);
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  /*border-left: dashed 1px black;*/

}



.swiper-container{

  position: relative;
  height: 100%;


}
.swiper {
  height: 100%;
  width: 100%;
  
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}


.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-next, .swiper-button-prev {
  color: black;
}


.indicators__progress--bar{
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 80%;
  background: conic-gradient(#880bea 0deg, #ededed 0deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

.indicators__progress--bar::after{
  position: absolute;
  content: '';
  width: 80px;
  height: 80px;
  border-radius: 80%;
  background: #ffff;
}

.indicators__progress--value{
  font-size: 30px;
  font-weight: 200;
  color: #880bea;
  z-index: 9;
}

.indicators__subtitle{
  margin-top: 4px;
  font-weight: 600;
}


.leaflet-bottom{
  display: none;
}

.leaflet-control-layers {

  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  color: #000;
  border-radius: var(--border-radius); 
  border: var(--border) !important;
  background-color: var(--background-color);

}

  .leaflet-popup-pane{
      font-family: 'Poppins', sans-serif;
      border: solid #9b9b9b 1px;
  }
 
  
  
  .leaflet-bar .tag-filter-tags-container > ul > li > a {
      font-family: 'Poppins', sans-serif !important;
      font-weight: 500 !important;
      color: #000 !important;
  }

  .label-sector{
   
    border-radius: var(--border-radius-label);
    font-size: 14px;
  }

  .rotate{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-label);
    transform: rotate(-7deg);
  }

  .label-sector .label-s1{
    background-color: #7052ff;
    transform: rotate(-8deg);
  }

  .label-sector .label-s2{
    background-color: #ff0000;
    transform: rotate(0deg);
  }

  .label-sector .label-s3{
    background-color: #1b003a;
    transform: rotate(-8deg);
  }

  .label-sector .label-s4{
    background-color: #e5097f;
  }

  .label-sector .label-s5{
    background-color: #ff9800;

  }

 
@media (max-width: 1068px) {

  .swiper {
    width: 80%;
  }
  
  .swiper-button-prev{
    left: 30px !important;
  }

  .swiper-button-next{
    right: 30px !important;
  }

}

@media (max-width: 960px) {

  .sectors__total--card > span:nth-child(1){
    font-size: 45px;
  }

  .indicators__progress--value{
    font-size: 28px;
  }

  .indicators__subtitle{
    font-weight: 500;
  }

}

@media (max-width: 820px) {

  .sectors__total--card > span:nth-child(1){
    font-size: 45px;
  }

  .indicators__progress--value{
    font-size: 27px;
  }

  .indicators__subtitle{
    font-weight: 500;
  }

  .indicators__progress--bar{
    width: 80px;
    height: 80px;
    border-radius: 70%;
    background: conic-gradient(#880bea 0deg, #ededed 0deg);
  }
  
  .indicators__progress--bar::after{
    width: 70px;
    height: 70px;
    border-radius: 70%;
  }

}

@media (max-width: 540px) {


  input[type=button] {

    width: 75px;
    font-size: 12px;
  
  }

  .swiper {
    width: 60%;
  }

  .swiper-button-prev{
    left: 10.5px !important;
  }

  .swiper-button-next{
    right: 10.5px !important;
  }

  .sectors{
    width: 70%;
  }

  .report{
    width: 30%;
  }

  .sectors__total{
    width: 40%;
  }

  .sectors__indicator{
    width: 60%;
  }

  .sectors__total--card > span:nth-child(1){
    font-size: 33px;
  }

  .sectors__total--card > span:nth-child(2){
    font-size: 12px;
  }

  .indicators__progress--value{
    font-size: 20px;
  }

  .indicators__subtitle{
    font-weight: 500;
  }

  .indicators__progress--bar{
    width: 70px;
    height: 70px;
    border-radius: 60%;
    background: conic-gradient(#880bea 0deg, #ededed 0deg);
  }
  
  .indicators__progress--bar::after{
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }

  .indicators__subtitle{
    font-size: 13px;
  }

}


/* Estilos para el progress bar */

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.09);
  z-index: 5000;
  display: none;
}


#progress-bar {
  z-index: 4000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 25px;
  border-radius: 14px;
  background-color: #cdffff;
  border: solid hsl(200, 100%, 45%) 2.5px;
  text-align: center;
}

#progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: 	hsl(193, 100%, 84%);
  border-radius: 14px;
  z-index: 1;
}


#progress-bar > span{

  position: absolute;
  color: #000;
  font-weight: 600;
  z-index: 2;
  animation: loading 1.2s ease-in-out infinite;
  font-style: italic;
  text-align: center;
  width: 100%; 
  transform: translateY(-50%); 
  top: 50%; 
  left: 0;
  right: 0;
}

@keyframes loading {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.25;
  }
  100% {
    opacity: 0;
  }
}





@media (max-width: 516px) {

  select{
    font-size: 12px;
    max-width: 80px;
  }

  input[type="text"]{
    height: 21px;
  }

  .swiper-button-prev{
    left: 6px !important;
  }

  .swiper-button-next{
    right: 6px !important;
  }

  .legend{
    height: 11%;
    top: 78%;
    left: 50%;
    transform: translateX(-50%);
  }

  .legend, .legend__head{
    padding: 0rem;
  }
  
  .legend__title{
    font-size: 12px;
  }

  .legend__body{
    flex-direction: row;
  }

  .legend__section{

    display: flex;
    flex-direction: row;
    padding: 0.2rem;
  }
  
  .legend__total{
    font-size: 12px;    
  }
  
  .legend__description{
    font-size: 12px;
  }
  
  .legend__color{
    height: 1.2rem;
    width: 2.5rem;
  }

  .filter{
    height: 9%;
    width: auto;
    flex-direction: row;
    top: calc(90%);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.3rem;
  }

  .filter__title{
    font-size: 12px;
  }

  .filter-container{
    flex-direction: row;
    gap: 1rem;
  }




}