header.masthead {
    position: relative;
    padding-top: 10.5rem;
    padding-bottom: 6rem;
    text-align: center;
    color: #fff;
    background-image: url("../img/index/header-bg6.webp");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
  }

  
section#contact {
  background-color: #212529;
  background-image: url("../img/index/map-image.webp");
  background-repeat: no-repeat;
  background-position: center;
}



.sidenav .nav-link.active .ni {
    color: #ffffffda !important; /* Cambia esto al color que desees para el ícono activo */
  } 

  .fixed-plugin .nav-link.active .ni {
    color: #49BEB7 !important; /* Cambia esto al color que desees para el ícono activo */
  } 

  .fixed-plugin .card-body {
    max-height: 100vh; /* Ajusta la altura máxima */
    overflow-y: auto; /* Habilita el scroll vertical */
    position: relative; /* Asegura que el contenedor sea relativo al contenido */
  }

  .nav-link .ni {
    color: #111111 !important;/* Cambia esto al color que desees para el ícono activo */
  }

  .nav-link .ni { 
    font-size: 1.1em;
  }

  .navbar-main .ni {
    font-size: 1.2em;
  }

  .nav-link:hover .icon i {
    color: #767676!important; /* Cambia a tu color deseado para el icono cuando se pasa el mouse */
  }

  .nav-link2:hover .icon i {
    color: #8a8a8a!important; /* Cambia a tu color deseado para el icono cuando se pasa el mouse */
  }
  
  .nav-link:hover .icon {
    background-color: #f0f0f0!important; /* Cambia a tu color deseado para el fondo cuando se pasa el mouse */
  }



  ul.navbar-nav.configuracion .ni {
    font-size: 1.1em;
  }

  ul.navbar-nav.configuracion .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; /* Ancho del fondo del icono */
    height: 36px; /* Altura del fondo del icono */
  }

  #tableroControl .na {
    font-size: 0.7em !important;
  }

  #tableroControl .ni {
    font-size: 0.7em !important;
  }

 
  #sidenav-main {
    overflow-x: hidden;
  }



/* Aquí definimos las variables de Bootstrap para el botón close en CSS */

:root {
  --btn-close-per-width: .75em;
  --btn-close-per-height: var(--btn-close-width);
  --btn-close-per-padding-x: .25em;
  --btn-close-per-padding-y: var(--btn-close-padding-x);
  --btn-close-per-color: #000; /* Cambia esto al color que desees */
  --btn-close-per-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='" + var(--btn-close-color) + "'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
  --btn-close-per-focus-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25); /* Cambia esto si es necesario */
  --btn-close-per-opacity: 0.5;
  --btn-close-per-hover-opacity: 0.75;
  --btn-close-per-focus-opacity: 1;
  --btn-close-per-disabled-opacity: 0.25;
  --btn-close-per-white-filter: invert(1) grayscale(100%) brightness(200%); /* Cambia esto si es necesario */
}

/* Aquí puedes usar las variables en tu CSS */

.btn-close-per{
  width: 1.5em; 
  height: 1.5em; 
  line-height: 0.5em;
  color: var(--btn-close-color);
  background: var(--btn-close-bg);
  box-shadow: var(--btn-close-focus-shadow);
  opacity: var(--btn-close-opacity);
  border-radius: 20%;
  border: 1.5px solid #7c7b7b; 

}

.btn-close-per:hover {
  border-width: 0.5px; /* Reduce el grosor del borde al pasar el mouse por encima */
  background-color: #f0f0f0;
}

body {
  overflow-x: hidden;
}


.custom-dropdown-width {
  width: 500px !important; /* Puedes ajustar el valor según tus necesidades */
}


/* ... y así para otras reglas de estilos que necesites. */
#loading {
  position:fixed;
  top:0;
  left:0;
  z-index:3050;
  width:100vw;
  margin: 0;
  height:100vh;
  background-color: rgba(255,255,255,0.7); 

}

spinner-grow {
  z-index: 3051; /* Asegura que el spinner mismo esté visible */
}




.custom-icon {
  width: 31px; /* Ajusta el tamaño según sea necesario */
  height: 31px; /* Ajusta el tamaño según sea necesario */
  color: #000; /* Color por defecto */
}

.fixed-plugin .nav-link.active .custom-icon {
  color: #2faaa2 !important; /* Color activo */
}



.custom-icon .a {
  stroke: currentColor;
  
  fill: none;
}



.sidenav .nav-link.active .custom-icon{
  color: #ffffffda !important;
}





/* 
.rounded-circle .profile{
  width: 35px;
  height: 35px;
  border-radius: 50% !important; 
} */


/* CSS para el logo */
/* Contenedor del logo */
/* Contenedor del logo */
/* Contenedor del logo */



.navbar-brand {
  position: relative; /* Contenedor relativo para manejar posiciones absolutas */
  display: flex;
  align-items: center;
  justify-content: center; /* Centrar horizontalmente el logo */
  height: 80px; /* Asegura que el contenedor del logo tenga una altura fija */
  transition: height 0.3s ease, padding 0.3s ease; /* Transición combinada */
  overflow: visible; /* Evita que el contenido se corte */
  z-index: 1; /* Debajo de los elementos del logo */
  
}


/* Logo completo */
.navbar-brand-full {
  position: absolute; /* Posición absoluta dentro del contenedor */
  top: 0%; /* Centramos verticalmente */
  left: 50%; /* Centramos horizontalmente */
  transform: translate(-50%, 0%); /* Ajuste para centrar */
  opacity: 1; /* Mostrar por defecto */
  transition: opacity 0.3s ease; /* Transición de opacidad */
  z-index: 2; /* Asegura que esté por encima del logo mini */
  display: flex; /* Mantener visible para el control de display */
}


/* Logo reducido */
.navbar-brand-mini {
  height: 10px;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease; /* Transición de opacidad */
  opacity: 0 !important; /* Asegura que sea visible */
  position: absolute; /* Asegura que esté en su posición correcta */
  width: 100px !important; /* Ajusta el tamaño para que sea claramente visible */
  height: 110px !important; /* Ajusta el tamaño para que sea claramente visible */
}

/* Estilo cuando el menú está reducido */
.g-sidenav-hidden .navbar-brand {
  height: 80px; /* Ajusta la altura según lo necesites */
  justify-content: center; /* Centra el logo en el contenedor */
}

.g-sidenav-hidden .navbar-brand-full {
  display: none; /* Oculta el logo completo */
}

.g-sidenav-hidden .navbar-brand-mini {
  display: flex; /* Muestra el logo reducido */
  opacity: 1 !important; /* Asegúrate de que sea visible */
  width: 40px; /* Ajusta el tamaño del logo si es necesario */
  height: opx !important; 
  transition: opacity 0.3s ease; /* Transición suave para el logo */
}

/* Estado expandido del menú */
.g-sidenav-show .navbar-brand-full {
  display: flex; /* Mostrar logo completo */
  opacity: 1;
}

.g-sidenav-show .navbar-brand-mini {
  
  opacity: 0;
}


/* Reducir el título cuando el menú está minimizado */
.g-sidenav-hidden .navbar-heading {
  font-size: 1; /* Reduce el tamaño de la fuente */
  padding: 0; /* Elimina el espaciado */
  opacity: 1; /* Ocultar el título */
  height: 0; /* Ajusta la altura para que no ocupe espacio */
  overflow: hidden; /* Asegura que el contenido no visible no se muestre */
}

/* Estilo expandido */
.g-sidenav-show .navbar-heading {
  font-size: 0.875rem; /* Tamaño de fuente original */
  opacity: 1; /* Muestra el título */
  padding: 1rem 1rem 0.75rem; /* Espaciado original */
  height: auto; /* Ajuste a su contenido */
}





  .navbar-vertical.navbar-expand-xs .navbar-nav .nav-item .navbar-heading {
    pointer-events: none;
  }

  .navbar-vertical.navbar-expand-md .navbar-nav .nav-item .navbar-heading {
    pointer-events: none;
  }

  .navbar-vertical.navbar-expand-lg .navbar-nav .nav-item .navbar-heading {
    pointer-events: none;
  }

  .navbar-vertical.navbar-expand-xl .navbar-nav .nav-item .navbar-heading{
    pointer-events: none;
  }

  .navbar-vertical.navbar-expand-xxl .navbar-nav .nav-item .navbar-heading {
    pointer-events: none;
  }

  .g-sidenav-show .sidenav .navbar-heading {
    transition: 0.3s ease;
    opacity: 1;
  }

  .g-sidenav-hidden .navbar-vertical .nav-item  .navbar-heading{
    opacity: 0;
    width: auto; /* Aumenta el valor para mostrar más texto */
    overflow: hidden; /* Asegura que el texto no se desborde */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    transition: all 0.3s ease;
    padding-left: 20px; /* Ajusta el espaciado del texto */
    padding-right: 20px; /* Ajusta el espaciado del texto */
    overflow: hidden;
    text-overflow: ellipsis; /* Muestra "..." si el texto es demasiado largo */
    white-space: nowrap;
  }
  

  .g-sidenav-hidden .navbar-vertical:hover .nav-item  .navbar-heading{
      opacity: 1;
      width: auto;
    }






    /* 1) Asegurate de que el html/body tampoco estén ocultando overflow */
    html, body {
      height: 100%;
      margin: 0;
      overflow: hidden;    /* evita scroll en body */
    }
    
    /* 2) Dale altura al contenedor que sí va a scrollear */
    .main-content {
      height: 100vh;         /* ocupa toda la ventana */
      overflow-y: auto;      /* pinta scroll cuando el contenido sobrepase */
    }

    /* 1) Ajusta según el alto de tu header/navbar */
.scrollable-view {
  /* Opcional: si tenés navbar de 60px, por ejemplo */
  max-height: calc(100vh - 60px);
  overflow-y: auto !important;  /* fuerza el scroll vertical */
}

/* Si querés que siempre se vea la barra, incluso sin desborde */
.scrollable-view {
  overflow-y: scroll !important;
}