/* Estilo del contenedor sticky que aparece al hacer scroll */
.sticky-header {
    position: fixed;
    left: 0;
    width: 100%;
    background-color: #1F5DF5;
    z-index: 1045;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: top 0.3s ease;
}

.sticky-header.visible-mobile {
    top: 0;
}

.sticky-header .intranet-logo {
    max-width: 120px;
}

.sticky-header .navbar-toggler {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.8rem;
}

/* Estilo del sidebar */
.sidebar-mobile  {
  height: 100vh;
  position: fixed;
  top: 0;
  left: -350px;
  width: 350px;
  background-color: #e2e2e2;
  transition: all 0.3s ease;
  z-index: 1050;
  overflow-y: auto;
}

.sidebar-mobile.active-mobile {
  left: 0;
}

/* Overlay para oscurecer el fondo cuando el sidebar está abierto */
.overlay-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1046;
  display: none;
}

.overlay-mobile.active-mobile {
  display: block;
}

/* Estilo de las columnas del sidebar */
.sidebar-column-mobile {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: -350px;
  /* Ocultas por defecto */
  transition: left 0.3s ease;
}

/* Columna 1 visible por defecto */
.sidebar-column-mobile[data-level="1"] {
  left: 0;
}

/* Mostrar columna cuando está activa */
.sidebar-column-mobile.visible-mobile {
  left: 0;
}

/* Fondo diferente para columnas 2 */
.sidebar-column-mobile[data-level="2"] {
  background-color: #e2e2e2;
}

/* Fondo diferente para columnas 3 */
.sidebar-column-mobile[data-level="3"] {
  background-color: #e2e2e2;
}

/* En pantallas grandes, las columnas se muestran lado a lado */
@media (min-width: 768px) {
  .sidebar-mobile {
    width: 750px;
    /* Ancho para 3 columnas */
  }

  .sidebar-column-mobile {
    width: 250px;
  }

  .sidebar-column-mobile[data-level="1"] {
    left: 0;
  }

  .sidebar-column-mobile[data-level="2"] {
    left: -250px;
  }

  .sidebar-column-mobile[data-level="2"].visible-mobile {
    left: 250px;
  }

  .sidebar-column-mobile[data-level="3"] {
    left: -250px;
  }

  .sidebar-column-mobile[data-level="3"].visible-mobile {
    left: 500px;
  }
}

/* Estilo para los enlaces */
.sidebar-column-mobile .nav-link-mobile {
  font-family: "Kumbh Sans", sans-serif;
  color: #000;
  padding: 10px 15px;
  border-top: 1px solid #bcbcbc;
  line-height: 120%;
  font-weight: 700;
  font-size: 1.3rem;
  display: block;
  text-decoration: none;
}

.sidebar-column-mobile .nav-link-mobile:hover {
  color: #fff;
  background-color: #bcbcbc;
}

/* Estilo del botón cerrar */
.sidebar-column-mobile .close-btn-mobile {
  position: absolute;
  top: 0px;
  right: 10px;
  color: #000;
  font-size: 1.5rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 5px;
  margin-left: auto;
  display: block;
  font-weight: 500;
  text-transform: lowercase;
  font-family: "Kumbh Sans", sans-serif;
}

.sidebar-column-mobile .close-btn-mobile:hover {
  color: #bcbcbc;
}

/* Contenedor de logo */
.logo-container-mobile {
  background-color: #1F5DF5;
}

.logo-container-mobile img {
  height: 50px;
}