.not-visible {
		display: none;
	}


.img-avatar-red {
	max-width: 40px;
}

.no-style {
	list-style-type: none;
}

.brand-gui {
	width: 50px;
	position: relative;
}


  .simple-box i {
    display: block;
    font-size: 40px;
    line-height: 90px;
    background: #c2cfd6; }
  .simple-box ul {
    padding: 10px 0;
    list-style: none; }
      .simple-box ul li strong {
        font-size: 20px; }
      .simple-box ul li span {
        font-weight: 500; }








        .custom-file-input {
          display: inline-block;
          width: auto;  /* Ajusta el ancho para asegurarte de que no se colapse */
          padding: 8px 12px;
          font-size: 16px;
          color: #fff;
          background-color: #007bff; /* Color azul */
          border: none;
          border-radius: 4px;
          cursor: pointer;
          transition: background-color 0.3s ease;
          text-align: center;
          margin-top: 5px;
      }
      
      .custom-file-input:hover {
          background-color: #0056b3; /* Azul más oscuro cuando el ratón está encima */
      }



      /* Estilos agregados para mantener el estado del sidebar */
      .sidebar {
        transition: margin-left 0.3s ease-in-out;
      }
      
      .sidebar-hidden .sidebar {
        margin-left: -200px;
      }
      
      .main {
        transition: margin-left 0.3s ease-in-out;
      }
      
      @media (min-width: 992px) {
        .sidebar-hidden .main {
          margin-left: 0 !important;
        }
      }
      
      .sidebar-toggler {
        cursor: pointer;
      }



      /* Color lila */

/* Definir un nuevo color lila */
:root {
  --custom-lila: #9b59b6; /* Lila personalizado */
}

/* Aplicar el nuevo color lila a elementos específicos */
.btn-lila {
  background-color: var(--custom-lila);
  border-color: var(--custom-lila);
  color: white;
}

.btn-lila:hover {
  background-color: darken(var(--custom-lila), 10%);
  border-color: darken(var(--custom-lila), 10%);
}

/* Otros elementos personalizados */
.bg-lila {
  background-color: var(--custom-lila) !important;
}

.text-lila {
  color: var(--custom-lila) !important;
}

.border-lila {
  border-color: var(--custom-lila) !important;
}

/* Ejemplo de personalización de una tarjeta */
.card-lila {
  border-color: var(--custom-lila);
}

.card-lila .card-header {
  background-color: var(--custom-lila);
  color: white;
}

/* Estilos para sidebar móvil - ALTA PRIORIDAD */
@media (max-width: 991.98px) {
  /* Reglas base para sidebar con mayor especificidad */
  body.app .sidebar,
  body.app .sidebar.modern {
    position: fixed !important;
    top: 55px !important; /* Altura del navbar */
    bottom: 0 !important;
    left: -250px !important;
    width: 250px !important;
    height: calc(100vh - 55px) !important;
    z-index: 1019 !important;
    transition: left 0.3s ease-in-out !important;
    overflow-y: auto !important;
    background-color: #3a4149 !important; /* Asegurar que el sidebar tenga fondo */
    display: block !important;
  }
  
  /* Cuando el sidebar está abierto - MÁXIMA ESPECIFICIDAD */
  body.app.sidebar-mobile-show .sidebar,
  body.app.sidebar-mobile-show .sidebar.modern {
    left: 0 !important;
  }
  
  /* Overlay oscuro cuando el sidebar está abierto */
  body.sidebar-mobile-show::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1018;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
  }
  
  /* Asegurar que el main content no se mueva en móvil */
  .main {
    margin-left: 0 !important;
  }
  
  /* Ocultar el botón de toggle desktop en móvil */
  .sidebar-toggler {
    display: none !important;
  }
  
  /* Asegurar que el navbar esté por encima del sidebar */
  .navbar {
    z-index: 1020;
    position: relative;
  }
  
  /* Asegurar que el botón móvil esté visible */
  .mobile-sidebar-toggler {
    display: block !important;
  }
  
  /* Ocultar el sidebar por defecto en móvil */
  .sidebar-hidden .sidebar {
    display: none !important;
  }
}