:root {
    --color-azul:  #00368c;  /* Azul oscuro */
    --color-celeste: #00bcd4;    /* Celeste vibrante */
    --color-naranja: #ff6f00;    /* Naranja llamativo */
    --color-verde: #00c853;      /* Verde intenso */
    --color-blanco: #ffffff;     /* Blanco para contraste */
    --color-amarillo: #ffeb3b; /* Amarillo */
    --color-rojo: #d32f2f /* Rojo */
}

.brand-image {
    float: none !important;
    opacity: 1 !important;
    margin-left: 1.5rem !important;
}

/* .sidebar-dark-primary {
    background-color:  var(--color-azul) !important;
} */
[class*=sidebar-dark] .brand-link {
    border-bottom: 1px solid var(--color-blanco);
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: var(--color-celeste);
}

.sidebar-mini.sidebar-collapse .main-sidebar {
    width: 4.0rem;
}

.sidebar-collapse.sidebar-mini .main-sidebar .nav-sidebar .nav-link {
    width: 2.7rem;
}

.page-item.active .page-link {  
    background-color:  var(--color-azul);
    border-color:  var(--color-azul);
}

.login-page {
    background-image: url('../vendor/adminlte/dist/img/fondo-psicotec.jpg') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 50vh;
}

.btn-primary {    
    background-color:  var(--color-azul);
    border-color:  var(--color-azul);
}
.btn-primary:hover {
    background-color: var(--color-celeste);
    border-color: var(--color-celeste);
}

.card-primary.card-outline {
    border-top: 3px solid var(--color-azul);
}
a {
    color: var(--color-azul);
}
a:hover {
    color: var(--color-celeste);
}
.main-sidebar {
    position: fixed;
    height: 100vh;
    overflow-y: auto;
}

html, body {
    height: 100vh;
    overflow: hidden; 
}

.content-wrapper {
    height: calc(100vh - 56px); 
    overflow-y: auto; 
    padding-bottom: 20px; 
}

.content {
    padding: 20px;
}

.bg-primary {
    background-color: var(--color-azul) !important;
}

.bg-success {
    background-color: var(--color-verde) !important;
}

.bg-warning {
    background-color: var(--color-amarillo) !important;
}
.bg-danger {
    background-color: var(--color-rojo) !important;
}

/* Scroll personalizado para Chrome, Edge y Safari */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--color-azul);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-azul);
}

/* Scroll en Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-azul) #f1f1f1;
}

.modal-content{
    /* margin-left: 125px; */
    margin-top: 100px;
}

.nav-link.dropdown-toggle {
  cursor: pointer;
}

.dropdown-item {
  font-size: 0.9rem;
}

.dropdown-item .fa-check {
  font-size: 0.8rem;
}

.modal-dialog-scrollable .modal-body {
  max-height: 500px;
  overflow-y: auto;
}