:root {
    --color-primario: #0000ff;
    --color-secundario: #21f8f2;
    --color-texto: #333333;
    --color-fondo: #ffffff;
    --fuente-principal: Arial, sans-serif;
    --fuente-titulos: Arial, sans-serif;
    --bs-primary: var(--color-primario) !important;
    --bs-primary-rgb: 0, 0, 255 !important;
}

body {
    font-family: var(--fuente-principal) !important;
    color: var(--color-texto) !important;
    background-color: var(--color-fondo) !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--fuente-titulos) !important;
    color: var(--color-texto) !important;
}

/* Aplicar colores primarios a Bootstrap */
.bg-primary, .btn-primary, .navbar.bg-primary, .navbar-dark.bg-primary,
button.btn-primary, input[type="submit"].btn-primary, a.btn-primary,
.card-header.bg-primary, .badge.bg-primary, .table-primary,
.list-group-item-primary, .alert-primary {
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
button.btn-primary:hover, a.btn-primary:hover {
    background-color: var(--color-secundario) !important;
    border-color: var(--color-secundario) !important;
}

.text-primary, a.text-primary, .nav-link.active {
    color: var(--color-primario) !important;
}

.border-primary {
    border-color: var(--color-primario) !important;
}

.btn-outline-primary {
    color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: white !important;
}

a:not(.btn):not(.dropdown-item) {
    color: var(--color-primario) !important;
}

a:not(.btn):not(.dropdown-item):hover {
    color: var(--color-secundario) !important;
}

/* Asegurar que los links del navbar sean visibles */
.navbar-dark .nav-link,
.navbar-dark .navbar-brand,
.navbar.bg-primary .nav-link,
.navbar.bg-primary .navbar-brand {
    color: rgba(255, 255, 255, 0.9) !important;
}

.navbar-dark .nav-link:hover,
.navbar-dark .navbar-brand:hover,
.navbar.bg-primary .nav-link:hover,
.navbar.bg-primary .navbar-brand:hover {
    color: rgba(255, 255, 255, 1) !important;
}

.navbar-dark .nav-link.active,
.navbar.bg-primary .nav-link.active {
    color: rgba(255, 255, 255, 1) !important;
    font-weight: 600;
}

.dropdown-menu {
    border-color: var(--color-primario) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--color-primario) !important;
    color: white !important;
}

.stat-card {
    border-left-color: var(--color-primario) !important;
}

.correo-item {
    border-left-color: var(--color-primario) !important;
}

/* Forzar aplicación de colores a variables de Bootstrap */
.btn-primary, .bg-primary, .text-primary, .border-primary {
    --bs-primary: var(--color-primario) !important;
}