/* ============================================
   ACCESIBILIDAD - MEJORAS A11Y
   ============================================ */

/* Mejorar contraste de textos para WCAG AA (ratio 4.5:1) */
.text-muted {
    color: #64748b !important; /* Mejor contraste que el gris por defecto */
}

/* Asegurar que los textos sobre fondos claros tengan suficiente contraste */
.card-body,
.card-header {
    color: #1e293b; /* Color oscuro para mejor contraste */
}

/* Mejorar contraste en enlaces */
a {
    color: var(--primary-color);
}

a:hover,
a:focus {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Asegurar que los placeholders tengan suficiente contraste */
::placeholder {
    color: #64748b;
    opacity: 1; /* Asegurar que no sea demasiado transparente */
}

/* Mejorar contraste en badges */
.badge {
    color: white;
    font-weight: 600;
}

/* Asegurar que los textos en botones secundarios tengan buen contraste */
.btn-outline-secondary {
    color: #64748b;
    border-color: #64748b;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: white;
    background-color: #64748b;
    border-color: #64748b;
}

/* Mejorar contraste en dropdowns */
.dropdown-item {
    color: #1e293b;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--primary-light);
    color: white;
}

/* Asegurar que los mensajes de error tengan buen contraste */
.text-danger {
    color: #dc3545 !important; /* Rojo más oscuro para mejor contraste */
}

.text-success {
    color: #198754 !important; /* Verde más oscuro para mejor contraste */
}

.text-warning {
    color: #ffc107 !important; /* Amarillo más oscuro, pero puede necesitar fondo oscuro */
}

/* Mejorar contraste en breadcrumbs */
.breadcrumb-item a {
    color: var(--primary-color);
}

.breadcrumb-item.active {
    color: #64748b;
}

/* Asegurar que los íconos tengan suficiente contraste cuando están solos */
.btn-link {
    color: var(--primary-color);
}

.btn-link:hover,
.btn-link:focus {
    color: var(--primary-dark);
}

/* Mejorar contraste en modales */
.modal-header {
    color: #1e293b;
}

.modal-body {
    color: #1e293b;
}

/* Asegurar que los textos en alerts tengan buen contraste */
.alert {
    color: #1e293b;
}

.alert-danger {
    background-color: #f1b0b7;
    border-color: #d98a93;
    color: #58151c;
}

.alert-success {
    background-color: #a8e0c2;
    border-color: #7bc89f;
    color: #084c2f;
}

.alert-warning {
    background-color: #ffe08a;
    border-color: #ffc94a;
    color: #4c3700;
}

.alert-info {
    background-color: #9bdaf0;
    border-color: #6cc4e2;
    color: #064158;
}

/* Mejorar contraste en toasts (notificaciones flotantes) */
.toast {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.45);
    border-radius: 0.5rem;
    font-size: 0.95rem;
}

.toast.bg-success {
    background-color: #166534 !important; /* verde oscuro */
    color: #f9fafb !important;
}

.toast.bg-danger {
    background-color: #991b1b !important; /* rojo oscuro */
    color: #f9fafb !important;
}

.toast.bg-warning {
    background-color: #92400e !important; /* ámbar oscuro */
    color: #fefce8 !important;
}

.toast.bg-info {
    background-color: #075985 !important; /* azul info oscuro */
    color: #e0f2fe !important;
}

.toast .toast-body {
    font-weight: 500;
}

/* Mejorar contraste en tablas */
.table {
    color: #1e293b;
}

.table th {
    color: #1e293b;
    font-weight: 600;
}

/* Asegurar que los textos en cards tengan buen contraste */
.card-title {
    color: #1e293b;
}

.card-text {
    color: #475569;
}

/* Mejorar contraste en formularios */
.form-label {
    color: #1e293b;
    font-weight: 500;
}

.form-text {
    color: #64748b;
}

/* Asegurar que los textos en navbars tengan buen contraste */
.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.95) !important;
}

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

/* Mejorar contraste en paginación */
.page-link {
    color: var(--primary-color);
}

.page-link:hover,
.page-link:focus {
    color: var(--primary-dark);
    background-color: var(--primary-light);
}

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