.bg-light {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef); /* Fondo degradado */
    border: 1px solid #dee2e6; /* Borde suave */
}

/* Estilo general de la barra de desplazamiento */
.nav-content::-webkit-scrollbar {
    width: 8px; /* Grosor de la barra */
}

/* Color de la pista (fondo de la barra) */
.nav-content::-webkit-scrollbar-track {
    background: #222; /* Fondo oscuro */
    border-radius: 10px;
}

/* Color del thumb (la parte que se mueve) */
.nav-content::-webkit-scrollbar-thumb {
    background: #555; /* Gris oscuro */
    border-radius: 10px;
    border: 2px solid #222; /* Borde para darle un efecto flotante */
}

/* Hover en el thumb para mejor UX */
.nav-content::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* Para Firefox */
.nav-content {
    overflow-y: hidden;
}

.nav-content:hover {
    overflow-y: auto;
    scrollbar-color: #555 #222; /* thumb color y track color */
    scrollbar-width: thin; /* Hace que la barra sea más delgada */
}

.tooltip .tooltip-inner {
    background-color: #0056b3 !important; /* Azul */
    color: #fff !important;
    padding: 8px 14px;
    font-size: 0.9rem;
    border-radius: 8px;
    border: 2px solid #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.form-check-input {
    background-color: #ccc;
    border: none;
}

.form-check-input:checked {
    background-color: #198754; /* Verde Bootstrap */
}

.form-check-input:focus {
    box-shadow: none;
}

.spnResponder:hover {
    cursor: pointer;
}

.spnDelete:hover {
    cursor: pointer;
}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.container-fluid1 {
    flex: 1;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

footer {
    margin-top: auto;
}