/*
 * BPS System UI
 * Capa visual común para los módulos operativos. Mantiene los colores
 * semánticos de Bootstrap y reserva el azul para acciones e interacción.
 */
:root {
  --bps-primary: #2563eb;
  --bps-primary-hover: #1d4ed8;
  --bps-primary-active: #1e40af;
  --bps-primary-soft: #eff6ff;
  --bps-primary-focus: rgba(37, 99, 235, 0.2);
  --bps-app-bg: #f4f6fb;
  --bps-surface: #ffffff;
  --bps-surface-subtle: #f8f9fc;
  --bps-border: #e1e5ee;
  --bps-border-strong: #d4dae5;
  --bps-text: #172033;
  --bps-text-secondary: #667085;
  --bps-text-muted: #667085;
  --bps-placeholder: #667085;
  --bps-disabled-text: #475467;
  --bps-disabled-bg: #eef1f5;
  --bps-success: #18794e;
  --bps-success-hover: #11643f;
  --bps-info: #0b7285;
  --bps-info-hover: #095c6b;
  --bps-warning: #f4b740;
  --bps-warning-text: #3b2a00;
  --bps-warning-outline: #7a4d00;
  --bps-danger: #d92d20;
  --bps-danger-hover: #b42318;
  --bps-radius-sm: 0.375rem;
  --bps-radius-md: 0.5rem;
  --bps-radius-lg: 0.625rem;
  --bps-shadow-sm: 0 1px 2px rgba(23, 32, 51, 0.05);
  --bps-shadow-md: 0 8px 24px rgba(23, 32, 51, 0.08);
  --bs-primary: var(--bps-primary);
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: var(--bps-primary);
  --bs-link-hover-color: var(--bps-primary-hover);
}

.layout-page > .content-wrapper {
  background-color: var(--bps-app-bg);
  color: var(--bps-text);
}

a {
  color: var(--bps-primary);
}

a:hover {
  color: var(--bps-primary-hover);
}

.text-primary {
  color: var(--bps-primary) !important;
}

.bg-primary {
  background-color: var(--bps-primary) !important;
}

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

.btn {
  border-radius: var(--bps-radius-md);
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
}

.btn-primary {
  color: #fff;
  background-color: var(--bps-primary);
  border-color: var(--bps-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  color: #fff;
  background-color: var(--bps-primary-hover);
  border-color: var(--bps-primary-hover);
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--bps-primary-active);
  border-color: var(--bps-primary-active);
}

.btn-outline-primary {
  color: var(--bps-primary);
  background-color: transparent;
  border-color: var(--bps-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
  color: #fff;
  background-color: var(--bps-primary);
  border-color: var(--bps-primary);
}

.btn-link {
  color: var(--bps-primary);
}

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

.btn-primary:focus,
.btn-outline-primary:focus,
.btn-check:focus + .btn-primary,
.btn-check:focus + .btn-outline-primary {
  box-shadow: 0 0 0 0.2rem var(--bps-primary-focus);
}

.form-label,
.col-form-label {
  color: var(--bps-text);
  font-weight: 600;
}

.form-control,
.form-select,
.input-group-text,
.choices__inner,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  color: var(--bps-text);
  background-color: var(--bps-surface);
  border-color: var(--bps-border-strong);
  border-radius: var(--bps-radius-md);
}

/* Choices usa el contenedor interno como control visible; evita un doble borde. */
.choices.form-select {
  padding: 0;
  background-color: transparent;
  background-image: none;
  border: 0;
}

.form-control::placeholder {
  color: var(--bps-placeholder);
  opacity: 1;
}

/* Los datos en modo consulta deben seguir siendo legibles. */
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  color: var(--bps-disabled-text) !important;
  -webkit-text-fill-color: var(--bps-disabled-text);
  background-color: var(--bps-disabled-bg) !important;
  border-color: var(--bps-border-strong) !important;
  opacity: 1;
}

.form-control:disabled::placeholder,
.form-control[readonly]::placeholder {
  color: var(--bps-disabled-text);
  opacity: 1;
}

.choices.is-disabled,
.select2-container--disabled {
  opacity: 1;
}

.choices.is-disabled .choices__inner,
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
  color: var(--bps-disabled-text) !important;
  background-color: var(--bps-disabled-bg) !important;
  border-color: var(--bps-border-strong) !important;
}

.choices.is-disabled .choices__item,
.choices.is-disabled .choices__placeholder,
.select2-container--default.select2-container--disabled .select2-selection__rendered {
  color: var(--bps-disabled-text) !important;
  -webkit-text-fill-color: var(--bps-disabled-text);
  opacity: 1 !important;
}

.choices__placeholder,
.select2-container--default .select2-selection__placeholder {
  color: var(--bps-placeholder) !important;
  opacity: 1;
}

.form-control:hover,
.form-select:hover,
.choices__inner:hover,
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
  border-color: #b7c0cf;
}

.form-control:focus,
.form-select:focus,
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  color: var(--bps-text);
  background-color: var(--bps-surface);
  border-color: var(--bps-primary);
  box-shadow: 0 0 0 0.2rem var(--bps-primary-focus);
  outline: 0;
}

.form-check-input:checked {
  background-color: var(--bps-primary);
  border-color: var(--bps-primary);
}

.form-check-input:focus,
.form-range:focus::-webkit-slider-thumb {
  border-color: var(--bps-primary);
  box-shadow: 0 0 0 0.2rem var(--bps-primary-focus);
}

.choices__list--dropdown,
.choices__list[aria-expanded],
.select2-dropdown {
  color: var(--bps-text);
  background: var(--bps-surface);
  border-color: var(--bps-border);
  border-radius: var(--bps-radius-md);
  box-shadow: var(--bps-shadow-md);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  color: var(--bps-primary);
  background-color: var(--bps-primary-soft);
}

.choices__list--multiple .choices__item,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  color: var(--bps-primary);
  background: var(--bps-primary-soft);
  border-color: rgba(42, 43, 245, 0.22);
}

.card,
.modal-content,
.offcanvas,
.dropdown-menu {
  border-color: var(--bps-border);
  border-radius: var(--bps-radius-lg);
}

.card {
  box-shadow: var(--bps-shadow-sm);
}

.dropdown-menu,
.modal-content,
.offcanvas {
  box-shadow: var(--bps-shadow-md);
}

.card-header,
.modal-header,
.offcanvas-header {
  color: var(--bps-text);
  border-color: var(--bps-border);
}

.dropdown-item {
  color: var(--bps-text-secondary);
  border-radius: var(--bps-radius-sm);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--bps-text);
  background-color: var(--bps-surface-subtle);
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--bps-primary);
  background-color: var(--bps-primary-soft);
}

.nav-tabs {
  border-color: var(--bps-border);
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
  color: var(--bps-text-secondary);
  font-weight: 600;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
  color: var(--bps-primary);
}

.nav-tabs .nav-link.active {
  color: var(--bps-primary);
  border-color: transparent transparent var(--bps-primary);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: var(--bps-primary);
}

.accordion-item {
  border-color: var(--bps-border);
}

.accordion-button {
  color: var(--bps-text);
  font-weight: 600;
}

.accordion-button:not(.collapsed) {
  color: var(--bps-primary);
  background-color: var(--bps-primary-soft);
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width, 1px)) 0 var(--bps-border);
}

.accordion-button:focus {
  border-color: var(--bps-primary);
  box-shadow: 0 0 0 0.2rem var(--bps-primary-focus);
}

[data-bs-toggle="collapse"]:not(.accordion-button) {
  cursor: pointer;
}

.table {
  --bs-table-color: var(--bps-text);
  --bs-table-border-color: var(--bps-border);
}

.table > :not(caption) > * > * {
  border-bottom-color: var(--bps-border);
}

.table thead th {
  color: var(--bps-text-secondary);
  background-color: var(--bps-surface-subtle);
  font-weight: 700;
}

.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: #f6f7ff;
  color: var(--bps-text);
}

.page-link {
  color: var(--bps-text-secondary);
  border-color: var(--bps-border);
  border-radius: var(--bps-radius-sm);
}

.page-link:hover,
.page-link:focus {
  color: var(--bps-primary);
  background-color: var(--bps-primary-soft);
  border-color: rgba(42, 43, 245, 0.24);
}

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

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--bps-border-strong);
  border-radius: var(--bps-radius-md);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--bps-primary);
  box-shadow: 0 0 0 0.2rem var(--bps-primary-focus);
  outline: 0;
}

.badge.bg-primary,
.badge.text-bg-primary {
  color: #fff !important;
  background-color: var(--bps-primary) !important;
}

/* Paleta semántica con contraste AA para texto de interfaz. */
.btn-success,
.badge.bg-success,
.badge.text-bg-success,
.bg-success:not(.bg-label-success) {
  color: #fff !important;
  background-color: var(--bps-success) !important;
  border-color: var(--bps-success) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
  color: #fff !important;
  background-color: var(--bps-success-hover) !important;
  border-color: var(--bps-success-hover) !important;
}

.btn-info,
.badge.bg-info,
.badge.text-bg-info,
.bg-info:not(.bg-label-info) {
  color: #fff !important;
  background-color: var(--bps-info) !important;
  border-color: var(--bps-info) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
  color: #fff !important;
  background-color: var(--bps-info-hover) !important;
  border-color: var(--bps-info-hover) !important;
}

.btn-warning,
.badge.bg-warning,
.badge.text-bg-warning,
.bg-warning:not(.bg-label-warning) {
  color: var(--bps-warning-text) !important;
  background-color: var(--bps-warning) !important;
  border-color: var(--bps-warning) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
  color: var(--bps-warning-text) !important;
  background-color: #dfa527 !important;
  border-color: #dfa527 !important;
}

.btn-danger,
.badge.bg-danger,
.badge.text-bg-danger,
.bg-danger:not(.bg-label-danger) {
  color: #fff !important;
  background-color: var(--bps-danger) !important;
  border-color: var(--bps-danger) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
  color: #fff !important;
  background-color: var(--bps-danger-hover) !important;
  border-color: var(--bps-danger-hover) !important;
}

.btn-outline-success,
.text-success {
  color: var(--bps-success) !important;
  border-color: var(--bps-success) !important;
}

.btn-outline-info,
.text-info {
  color: var(--bps-info) !important;
  border-color: var(--bps-info) !important;
}

.btn-outline-warning,
.text-warning {
  color: var(--bps-warning-outline) !important;
  border-color: var(--bps-warning-outline) !important;
}

.btn-outline-danger,
.text-danger {
  color: var(--bps-danger) !important;
  border-color: var(--bps-danger) !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.active {
  color: #fff !important;
  background-color: var(--bps-success) !important;
  border-color: var(--bps-success) !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info.active {
  color: #fff !important;
  background-color: var(--bps-info) !important;
  border-color: var(--bps-info) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger.active {
  color: #fff !important;
  background-color: var(--bps-danger) !important;
  border-color: var(--bps-danger) !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active,
.btn-outline-warning.active {
  color: var(--bps-warning-text) !important;
  background-color: var(--bps-warning) !important;
  border-color: var(--bps-warning) !important;
}

.bg-label-success {
  color: #12613e !important;
  background-color: #e7f6ee !important;
}

.bg-label-info {
  color: #075d6d !important;
  background-color: #e4f5f8 !important;
}

.bg-label-warning {
  color: #694100 !important;
  background-color: #fff2cf !important;
}

.bg-label-danger {
  color: #a61b12 !important;
  background-color: #feeceb !important;
}

.text-muted,
.text-secondary {
  color: var(--bps-text-secondary) !important;
}

.dropdown-item.disabled,
.dropdown-item:disabled,
.nav-link.disabled,
.nav-link:disabled,
.page-item.disabled .page-link,
.list-group-item.disabled,
.list-group-item:disabled {
  color: var(--bps-disabled-text) !important;
  opacity: 1;
}

.btn.disabled,
.btn:disabled {
  opacity: 1;
  filter: saturate(0.72);
}

.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff !important;
  background-color: var(--bps-primary) !important;
  border-color: var(--bps-primary) !important;
}

.btn-secondary.disabled,
.btn-secondary:disabled {
  color: #fff !important;
  background-color: #5c6675 !important;
  border-color: #5c6675 !important;
}

.btn-success.disabled,
.btn-success:disabled {
  color: #fff !important;
  background-color: var(--bps-success) !important;
  border-color: var(--bps-success) !important;
}

.btn-info.disabled,
.btn-info:disabled {
  color: #fff !important;
  background-color: var(--bps-info) !important;
  border-color: var(--bps-info) !important;
}

.btn-warning.disabled,
.btn-warning:disabled {
  color: var(--bps-warning-text) !important;
  background-color: var(--bps-warning) !important;
  border-color: var(--bps-warning) !important;
}

.btn-danger.disabled,
.btn-danger:disabled {
  color: #fff !important;
  background-color: var(--bps-danger) !important;
  border-color: var(--bps-danger) !important;
}

.btn-outline-success.disabled,
.btn-outline-success:disabled {
  color: var(--bps-success) !important;
  border-color: var(--bps-success) !important;
}

.btn-outline-info.disabled,
.btn-outline-info:disabled {
  color: var(--bps-info) !important;
  border-color: var(--bps-info) !important;
}

.btn-outline-warning.disabled,
.btn-outline-warning:disabled {
  color: var(--bps-warning-outline) !important;
  border-color: var(--bps-warning-outline) !important;
}

.btn-outline-danger.disabled,
.btn-outline-danger:disabled {
  color: var(--bps-danger) !important;
  border-color: var(--bps-danger) !important;
}

.btn-guia-controlada {
  color: #fff !important;
  background-color: var(--bps-success) !important;
  border-color: var(--bps-success) !important;
}

.btn-guia-controlada:hover,
.btn-guia-controlada:focus {
  color: #fff !important;
  background-color: var(--bps-success-hover) !important;
  border-color: var(--bps-success-hover) !important;
}

.btn-guia-aprobada {
  color: var(--bps-warning-text) !important;
  background-color: var(--bps-warning) !important;
  border-color: var(--bps-warning) !important;
}

.btn-guia-aprobada:hover,
.btn-guia-aprobada:focus {
  color: var(--bps-warning-text) !important;
  background-color: #dfa527 !important;
  border-color: #dfa527 !important;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--bps-primary-focus);
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  .card-header .d-flex,
  .card-body > .d-flex:first-child {
    flex-wrap: wrap;
    gap: 0.625rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}