.offcanvas {
    --bs-offcanvas-bg: var(--bs-body-bg);
    --bs-offcanvas-color: var(--bs-body-color);
    --bs-offcanvas-border-color: var(--bs-border-color-translucent);
}

.menu-link.active {
  outline: 2px solid var(--bs-primary);
  background-color: var(--bs-primary-bg-subtle) !important;
  font-weight: 600;
}


/* Aplica esto cuando tu app esté en dark mode */
[data-bs-theme="dark"] .ql-toolbar,
[data-bs-theme="dark"] .ql-container {
  background: #23272b !important;
  color: #f8f9fa !important;
  border-color: #444 !important;
}

[data-bs-theme="dark"] .ql-toolbar button,
[data-bs-theme="dark"] .ql-toolbar .ql-picker-label,
[data-bs-theme="dark"] .ql-toolbar .ql-picker-item {
  color: #f8f9fa !important;
}

[data-bs-theme="dark"] .ql-toolbar button:hover,
[data-bs-theme="dark"] .ql-toolbar button:focus,
[data-bs-theme="dark"] .ql-toolbar .ql-active {
  background: #343a40 !important;
  color: #fff !important;
}

[data-bs-theme="dark"] .ql-toolbar .ql-picker-options {
  background: #23272b !important;
  color: #f8f9fa !important;
}

[data-bs-theme="dark"] .ql-container {
  background: #23272b !important;
  color: #f8f9fa !important;
}

/* Opcional: ajustar bordes y otros detalles */
[data-bs-theme="dark"] .ql-toolbar {
  border-bottom: 1px solid #444 !important;
}
[data-bs-theme="dark"] .ql-container {
  border: 1px solid #444 !important;
}