.modal .btn-close {
  --bs-btn-close-color: $graytext;
  --bs-btn-close-opacity: 1;
}

// core/modal.js (lib/amd/src/modal.js) añade inline `overflow:hidden; padding-right: <scrollbarWidth>px`
// al body al mostrar una modal, para compensar la scrollbar que desaparece. Como con
// `scrollbar-gutter: stable` (ver base/_reset.scss) el hueco ya está reservado y la scrollbar
// no desaparece, ese padding sobra y provocaría un salto del contenido. Lo anulamos.
body.modal-open {
  padding-right: 0 !important;
  overflow: auto !important;
}

.modal-dialog[tabindex="0"]:focus .modal-content {
    outline: 0;
    box-shadow: 0 0 0 0;
    border-radius: none;
}

.modal-dialog[tabindex="0"]:focus-visible  {
    outline: 0;
}

.modal-dialog[tabindex="0"]:focus-visible .modal-content {
    outline: 3px solid $primary;
    border-radius: var(--bs-border-radius-lg);
}