/* Bootstrap 5 */
@import 'bootstrap';

/* Bootstrap Icons */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css');

/* Transiciones suaves para cambio de tema */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Asegurar que los elementos mantengan transiciones suaves */
body,
.navbar,
.card,
.btn,
.form-control,
.dropdown-menu {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Ajustes específicos para modo oscuro */
[data-bs-theme="dark"] .navbar {
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .card {
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-border-color) !important;
}

/* Asegurar que los avatares se vean bien en ambos modos */
[data-bs-theme="dark"] .rounded-circle.bg-primary {
    background-color: var(--bs-primary) !important;
}

/* Input groups en modo oscuro */
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--bs-secondary-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}