/* Estilos para el menú vertical oscuro */
#sidebar-wrapper {
    min-height: 100vh;
    margin-left: -15rem;
    transition: margin 0.25s ease-out;
    background-color: #343a40; /* Color de fondo oscuro */
}

#sidebar-wrapper .sidebar-heading {
    padding: 0.875rem 1.25rem;
    font-size: 1.2rem;
    background-color: #212529; /* Color de fondo más oscuro para el encabezado */
    color: white;
}

#sidebar-wrapper .list-group {
    width: 15rem;
}

#sidebar-wrapper .list-group-item {
    background-color: #343a40; /* Color de fondo oscuro para los ítems */
    color: white; /* Color de texto blanco */
    border: none; /* Eliminar bordes */
}

#sidebar-wrapper .list-group-item:hover {
    background-color: #495057; /* Color de fondo al pasar el mouse */
}

#page-content-wrapper {
    min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
}

@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: -15rem;
    }
}

/* Estilos para los íconos del menú */
.list-group-item i {
    
    width: 20px;
    text-align: center;
    color: white; /* Color de íconos blanco */
}

/* Estilos para las tarjetas de indicadores */
.card {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-body {
    padding: 20px;
}

.display-4 {
    font-size: 2.5rem;
    font-weight: bold;
}

.fa-3x {
    opacity: 0.8;
}

/* Estilos para el ícono y el nombre del usuario */
.navbar-text {
    margin-right: 0.5rem;
    font-size: 0.9rem; /* Tamaño del texto */
    font-weight: 500; /* Grosor del texto */
    margin-top: 0.02rem; /* Espacio entre el ícono y el nombre */
}

.fa-user-circle {
    margin-right: 0.5rem;
    color: #007bff; /* Color del ícono */
    font-size: 1.5rem; /* Tamaño del ícono */
}

/* Estilos para los tooltips */
.tooltip-inner {
    background-color: #007bff; /* Color de fondo */
    color: #fff; /* Color del texto */
    border-radius: 5px; /* Bordes redondeados */
    padding: 8px 12px; /* Espaciado interno */
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #007bff; /* Color de la flecha (arriba) */
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #007bff; /* Color de la flecha (abajo) */
}

.tooltip.bs-tooltip-left .tooltip-arrow::before {
    border-left-color: #007bff; /* Color de la flecha (izquierda) */
}

.tooltip.bs-tooltip-right .tooltip-arrow::before {
    border-right-color: #007bff; /* Color de la flecha (derecha) */
}