/* ==========================================================================
   theme.css: Puente entre los tokens --lib-* y las variables --bs-*
   --------------------------------------------------------------------------
   Sobrescribe las variables de Bootstrap 5 usando los tokens propios.
   Se debe cargar DESPUÉS de bootstrap.min.css y de tokens.css.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
  /* --- Colores de tema --- */
  --bs-blue: var(--lib-primary-500);
  --bs-primary: var(--lib-primary-500);
  --bs-primary-rgb: 70, 95, 255;

  --bs-secondary: var(--lib-secondary-500);
  --bs-secondary-rgb: 100, 116, 139;

  --bs-success: var(--lib-success-500);
  --bs-success-rgb: 18, 183, 106;

  --bs-warning: var(--lib-warning-500);
  --bs-warning-rgb: 247, 144, 9;

  --bs-danger: var(--lib-danger-500);
  --bs-danger-rgb: 240, 68, 56;

  --bs-info: var(--lib-info-500);
  --bs-info-rgb: 46, 144, 250;

  --bs-light: var(--lib-secondary-100);
  --bs-light-rgb: 241, 245, 249;

  --bs-dark: var(--lib-secondary-900);
  --bs-dark-rgb: 15, 23, 42;

  /* --- Cuerpo --- */
  --bs-body-bg: var(--lib-bg);
  --bs-body-bg-rgb: 246, 247, 251;
  --bs-body-color: var(--lib-text);
  --bs-body-color-rgb: 16, 24, 40;
  --bs-emphasis-color: var(--lib-text);
  --bs-secondary-color: var(--lib-text-muted);
  --bs-secondary-bg: var(--lib-surface);
  --bs-tertiary-bg: var(--lib-surface-muted);
  --bs-tertiary-color: var(--lib-text-subtle);

  /* --- Tipografía --- */
  --bs-font-sans-serif: var(--lib-font-sans);
  --bs-font-monospace: var(--lib-font-mono);
  --bs-body-font-family: var(--lib-font-sans);
  --bs-body-font-size: var(--lib-font-size-base);
  --bs-body-font-weight: var(--lib-font-weight-normal);
  --bs-body-line-height: var(--lib-line-height-base);
  --bs-heading-color: var(--lib-text);
  --bs-link-color: var(--lib-primary-600);
  --bs-link-color-rgb: 58, 79, 224;
  --bs-link-hover-color: var(--lib-primary-700);
  --bs-link-hover-color-rgb: 47, 63, 184;

  /* --- Bordes y radios --- */
  --bs-border-color: var(--lib-border);
  --bs-border-color-translucent: rgba(16, 24, 40, 0.08);
  --bs-border-radius: var(--lib-radius-md);
  --bs-border-radius-sm: var(--lib-radius-sm);
  --bs-border-radius-lg: var(--lib-radius-lg);
  --bs-border-radius-xl: var(--lib-radius-lg);
  --bs-border-radius-pill: var(--lib-radius-pill);
  --bs-border-width: 1px;

  /* --- Componentes --- */
  --bs-component-active-bg: var(--lib-primary-500);
  --bs-component-active-color: #fff;
  --bs-focus-ring-color: rgba(70, 95, 255, 0.25);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-blur: 0;

  /* --- Énfasis en texto (utilidades .text-*-emphasis) --- */
  --bs-primary-text-emphasis: var(--lib-primary-700);
  --bs-primary-bg-subtle: var(--lib-primary-50);
  --bs-primary-border-subtle: var(--lib-primary-200);
  --bs-success-text-emphasis: var(--lib-success-700);
  --bs-success-bg-subtle: var(--lib-success-50);
  --bs-success-border-subtle: var(--lib-success-200);
  --bs-warning-text-emphasis: var(--lib-warning-700);
  --bs-warning-bg-subtle: var(--lib-warning-50);
  --bs-warning-border-subtle: var(--lib-warning-200);
  --bs-danger-text-emphasis: var(--lib-danger-700);
  --bs-danger-bg-subtle: var(--lib-danger-50);
  --bs-danger-border-subtle: var(--lib-danger-200);
  --bs-info-text-emphasis: var(--lib-info-700);
  --bs-info-bg-subtle: var(--lib-info-50);
  --bs-info-border-subtle: var(--lib-info-200);

  /* --- Formularios --- */
  --bs-form-valid-color: var(--lib-success-600);
  --bs-form-valid-border-color: var(--lib-success-500);
  --bs-form-invalid-color: var(--lib-danger-600);
  --bs-form-invalid-border-color: var(--lib-danger-500);

  /* --- Tarjetas --- */
  --bs-card-bg: var(--lib-surface);
  --bs-card-border-color: var(--lib-border);
  --bs-card-border-radius: var(--lib-radius-lg);
  --bs-card-cap-bg: transparent;

  /* --- Dropdown --- */
  --bs-dropdown-bg: var(--lib-surface);
  --bs-dropdown-border-color: var(--lib-border);
  --bs-dropdown-link-active-bg: var(--lib-primary-50);
  --bs-dropdown-link-active-color: var(--lib-primary-700);

  /* --- Tablas --- */
  --bs-table-bg: transparent;
  --bs-table-color: var(--lib-text);
  --bs-table-border-color: var(--lib-border);
  --bs-table-striped-bg: var(--lib-surface-muted);
  --bs-table-hover-bg: var(--lib-primary-50);

  /* --- Modales y offcanvas --- */
  --bs-modal-bg: var(--lib-surface);
  --bs-offcanvas-bg: var(--lib-surface);
}

/* ------------------------------------------------------------------
   Modo oscuro. Bootstrap define sus variables en :root, así que aquí
   volvemos a enlazar las --bs-* con los tokens oscuros.
   ------------------------------------------------------------------ */
[data-bs-theme="dark"] {
  --bs-primary-rgb: 109, 130, 255;
  --bs-body-bg: var(--lib-bg);
  --bs-body-bg-rgb: 11, 15, 26;
  --bs-body-color: var(--lib-text);
  --bs-body-color-rgb: 231, 235, 243;
  --bs-emphasis-color: var(--lib-text);
  --bs-secondary-color: var(--lib-text-muted);
  --bs-secondary-bg: var(--lib-surface);
  --bs-tertiary-bg: var(--lib-surface-muted);

  --bs-border-color: var(--lib-border);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.1);

  --bs-link-color: var(--lib-primary-400);
  --bs-link-hover-color: var(--lib-primary-300);

  --bs-primary-text-emphasis: var(--lib-primary-300);
  --bs-primary-bg-subtle: var(--lib-primary-50);
  --bs-primary-border-subtle: var(--lib-primary-800);
  --bs-success-text-emphasis: var(--lib-success-300);
  --bs-success-bg-subtle: var(--lib-success-50);
  --bs-success-border-subtle: var(--lib-success-800);
  --bs-warning-text-emphasis: var(--lib-warning-300);
  --bs-warning-bg-subtle: var(--lib-warning-50);
  --bs-warning-border-subtle: var(--lib-warning-800);
  --bs-danger-text-emphasis: var(--lib-danger-300);
  --bs-danger-bg-subtle: var(--lib-danger-50);
  --bs-danger-border-subtle: var(--lib-danger-800);
  --bs-info-text-emphasis: var(--lib-info-300);
  --bs-info-bg-subtle: var(--lib-info-50);
  --bs-info-border-subtle: var(--lib-info-800);

  --bs-card-bg: var(--lib-surface);
  --bs-card-border-color: var(--lib-border);
  --bs-dropdown-bg: var(--lib-surface);
  --bs-dropdown-border-color: var(--lib-border);
  --bs-dropdown-link-active-bg: var(--lib-primary-50);
  --bs-dropdown-link-active-color: var(--lib-primary-300);
  --bs-table-color: var(--lib-text);
  --bs-table-border-color: var(--lib-border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(109, 130, 255, 0.08);
  --bs-modal-bg: var(--lib-surface);
  --bs-offcanvas-bg: var(--lib-surface);
  --bs-tertiary-color: var(--lib-text-subtle);
}

/* ==========================================================================
   Componentes con colores compilados
   --------------------------------------------------------------------------
   Bootstrap compila los colores de botones, alertas y varios componentes
   como valores literales (#0d6efd, #198754…). Estas reglas vuelven a enlazar
   esos componentes con los tokens --lib-*, de modo que cambiar tokens.css
   actualiza también botones, enlaces, badges, alertas, paginación, etc.
   ========================================================================== */

/* --- Botones sólidos --- */
.btn-primary {
  --bs-btn-bg: var(--lib-primary-500);
  --bs-btn-border-color: var(--lib-primary-500);
  --bs-btn-hover-bg: var(--lib-primary-600);
  --bs-btn-hover-border-color: var(--lib-primary-600);
  --bs-btn-active-bg: var(--lib-primary-700);
  --bs-btn-active-border-color: var(--lib-primary-700);
  --bs-btn-disabled-bg: var(--lib-primary-500);
  --bs-btn-disabled-border-color: var(--lib-primary-500);
  --bs-btn-focus-shadow-rgb: 70, 95, 255;
}

.btn-secondary {
  --bs-btn-bg: var(--lib-secondary-500);
  --bs-btn-border-color: var(--lib-secondary-500);
  --bs-btn-hover-bg: var(--lib-secondary-600);
  --bs-btn-hover-border-color: var(--lib-secondary-600);
  --bs-btn-active-bg: var(--lib-secondary-700);
  --bs-btn-active-border-color: var(--lib-secondary-700);
  --bs-btn-disabled-bg: var(--lib-secondary-500);
  --bs-btn-disabled-border-color: var(--lib-secondary-500);
  --bs-btn-focus-shadow-rgb: 100, 116, 139;
}

.btn-success {
  --bs-btn-bg: var(--lib-success-500);
  --bs-btn-border-color: var(--lib-success-500);
  --bs-btn-hover-bg: var(--lib-success-600);
  --bs-btn-hover-border-color: var(--lib-success-600);
  --bs-btn-active-bg: var(--lib-success-700);
  --bs-btn-active-border-color: var(--lib-success-700);
  --bs-btn-disabled-bg: var(--lib-success-500);
  --bs-btn-disabled-border-color: var(--lib-success-500);
  --bs-btn-focus-shadow-rgb: 18, 183, 106;
}

.btn-danger {
  --bs-btn-bg: var(--lib-danger-500);
  --bs-btn-border-color: var(--lib-danger-500);
  --bs-btn-hover-bg: var(--lib-danger-600);
  --bs-btn-hover-border-color: var(--lib-danger-600);
  --bs-btn-active-bg: var(--lib-danger-700);
  --bs-btn-active-border-color: var(--lib-danger-700);
  --bs-btn-disabled-bg: var(--lib-danger-500);
  --bs-btn-disabled-border-color: var(--lib-danger-500);
  --bs-btn-focus-shadow-rgb: 240, 68, 56;
}

.btn-warning {
  --bs-btn-color: var(--lib-text);
  --bs-btn-hover-color: var(--lib-text);
  --bs-btn-active-color: var(--lib-text);
  --bs-btn-bg: var(--lib-warning-500);
  --bs-btn-border-color: var(--lib-warning-500);
  --bs-btn-hover-bg: var(--lib-warning-600);
  --bs-btn-hover-border-color: var(--lib-warning-600);
  --bs-btn-active-bg: var(--lib-warning-700);
  --bs-btn-active-border-color: var(--lib-warning-700);
  --bs-btn-disabled-bg: var(--lib-warning-500);
  --bs-btn-disabled-border-color: var(--lib-warning-500);
  --bs-btn-focus-shadow-rgb: 247, 144, 9;
}

.btn-info {
  --bs-btn-color: var(--lib-text);
  --bs-btn-hover-color: var(--lib-text);
  --bs-btn-active-color: var(--lib-text);
  --bs-btn-bg: var(--lib-info-500);
  --bs-btn-border-color: var(--lib-info-500);
  --bs-btn-hover-bg: var(--lib-info-600);
  --bs-btn-hover-border-color: var(--lib-info-600);
  --bs-btn-active-bg: var(--lib-info-700);
  --bs-btn-active-border-color: var(--lib-info-700);
  --bs-btn-disabled-bg: var(--lib-info-500);
  --bs-btn-disabled-border-color: var(--lib-info-500);
  --bs-btn-focus-shadow-rgb: 46, 144, 250;
}

.btn-dark {
  --bs-btn-bg: var(--lib-secondary-900);
  --bs-btn-border-color: var(--lib-secondary-900);
  --bs-btn-hover-bg: var(--lib-secondary-800);
  --bs-btn-hover-border-color: var(--lib-secondary-800);
  --bs-btn-active-bg: var(--lib-secondary-700);
  --bs-btn-active-border-color: var(--lib-secondary-700);
  --bs-btn-disabled-bg: var(--lib-secondary-900);
  --bs-btn-disabled-border-color: var(--lib-secondary-900);
  --bs-btn-focus-shadow-rgb: 15, 23, 42;
}

.btn-light {
  --bs-btn-color: var(--lib-text);
  --bs-btn-hover-color: var(--lib-text);
  --bs-btn-active-color: var(--lib-text);
  --bs-btn-bg: var(--lib-secondary-100);
  --bs-btn-border-color: var(--lib-secondary-100);
  --bs-btn-hover-bg: var(--lib-secondary-200);
  --bs-btn-hover-border-color: var(--lib-secondary-200);
  --bs-btn-active-bg: var(--lib-secondary-300);
  --bs-btn-active-border-color: var(--lib-secondary-300);
  --bs-btn-disabled-bg: var(--lib-secondary-100);
  --bs-btn-disabled-border-color: var(--lib-secondary-100);
  --bs-btn-focus-shadow-rgb: 241, 245, 249;
}

/* --- Botones outline --- */
.btn-outline-primary {
  --bs-btn-color: var(--lib-primary-600);
  --bs-btn-border-color: var(--lib-primary-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--lib-primary-500);
  --bs-btn-hover-border-color: var(--lib-primary-500);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--lib-primary-600);
  --bs-btn-active-border-color: var(--lib-primary-600);
  --bs-btn-disabled-color: var(--lib-primary-400);
  --bs-btn-disabled-border-color: var(--lib-primary-300);
  --bs-btn-focus-shadow-rgb: 70, 95, 255;
}

.btn-outline-secondary {
  --bs-btn-color: var(--lib-secondary-600);
  --bs-btn-border-color: var(--lib-secondary-400);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--lib-secondary-500);
  --bs-btn-hover-border-color: var(--lib-secondary-500);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--lib-secondary-600);
  --bs-btn-active-border-color: var(--lib-secondary-600);
  --bs-btn-disabled-color: var(--lib-secondary-400);
  --bs-btn-disabled-border-color: var(--lib-secondary-300);
  --bs-btn-focus-shadow-rgb: 100, 116, 139;
}

.btn-outline-success {
  --bs-btn-color: var(--lib-success-600);
  --bs-btn-border-color: var(--lib-success-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--lib-success-500);
  --bs-btn-hover-border-color: var(--lib-success-500);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--lib-success-600);
  --bs-btn-active-border-color: var(--lib-success-600);
  --bs-btn-disabled-color: var(--lib-success-400);
  --bs-btn-disabled-border-color: var(--lib-success-300);
  --bs-btn-focus-shadow-rgb: 18, 183, 106;
}

.btn-outline-danger {
  --bs-btn-color: var(--lib-danger-600);
  --bs-btn-border-color: var(--lib-danger-500);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--lib-danger-500);
  --bs-btn-hover-border-color: var(--lib-danger-500);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--lib-danger-600);
  --bs-btn-active-border-color: var(--lib-danger-600);
  --bs-btn-disabled-color: var(--lib-danger-400);
  --bs-btn-disabled-border-color: var(--lib-danger-300);
  --bs-btn-focus-shadow-rgb: 240, 68, 56;
}

.btn-outline-warning {
  --bs-btn-color: var(--lib-warning-700);
  --bs-btn-border-color: var(--lib-warning-500);
  --bs-btn-hover-color: var(--lib-text);
  --bs-btn-hover-bg: var(--lib-warning-500);
  --bs-btn-hover-border-color: var(--lib-warning-500);
  --bs-btn-active-color: var(--lib-text);
  --bs-btn-active-bg: var(--lib-warning-600);
  --bs-btn-active-border-color: var(--lib-warning-600);
  --bs-btn-disabled-color: var(--lib-warning-400);
  --bs-btn-disabled-border-color: var(--lib-warning-300);
  --bs-btn-focus-shadow-rgb: 247, 144, 9;
}

.btn-outline-info {
  --bs-btn-color: var(--lib-info-700);
  --bs-btn-border-color: var(--lib-info-500);
  --bs-btn-hover-color: var(--lib-text);
  --bs-btn-hover-bg: var(--lib-info-500);
  --bs-btn-hover-border-color: var(--lib-info-500);
  --bs-btn-active-color: var(--lib-text);
  --bs-btn-active-bg: var(--lib-info-600);
  --bs-btn-active-border-color: var(--lib-info-600);
  --bs-btn-disabled-color: var(--lib-info-400);
  --bs-btn-disabled-border-color: var(--lib-info-300);
  --bs-btn-focus-shadow-rgb: 46, 144, 250;
}

.btn-outline-dark {
  --bs-btn-color: var(--lib-secondary-900);
  --bs-btn-border-color: var(--lib-secondary-900);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--lib-secondary-800);
  --bs-btn-hover-border-color: var(--lib-secondary-800);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--lib-secondary-900);
  --bs-btn-active-border-color: var(--lib-secondary-900);
  --bs-btn-disabled-color: var(--lib-secondary-500);
  --bs-btn-disabled-border-color: var(--lib-secondary-400);
  --bs-btn-focus-shadow-rgb: 15, 23, 42;
}

/* --- Componentes derivados del color primario --- */
.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--lib-primary-500);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  --bs-nav-pills-link-active-bg: var(--lib-primary-500);
  --bs-nav-pills-link-active-color: #fff;
}

.list-group {
  --bs-list-group-active-bg: var(--lib-primary-500);
  --bs-list-group-active-border-color: var(--lib-primary-500);
  --bs-list-group-active-color: #fff;
}

.pagination {
  --bs-pagination-active-bg: var(--lib-primary-500);
  --bs-pagination-active-border-color: var(--lib-primary-500);
  --bs-pagination-active-color: #fff;
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(70, 95, 255, 0.25);
}

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

.form-range::-webkit-slider-thumb {
  background-color: var(--lib-primary-500);
}

.form-range::-moz-range-thumb {
  background-color: var(--lib-primary-500);
}

.accordion-button:not(.collapsed) {
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23465fff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.accordion-button:focus {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(70, 95, 255, 0.25);
}

/* --- Alertas --- */
.alert-primary {
  --bs-alert-color: var(--lib-primary-700);
  --bs-alert-bg: var(--lib-primary-50);
  --bs-alert-border-color: var(--lib-primary-200);
}
.alert-secondary {
  --bs-alert-color: var(--lib-secondary-700);
  --bs-alert-bg: var(--lib-secondary-100);
  --bs-alert-border-color: var(--lib-secondary-300);
}
.alert-success {
  --bs-alert-color: var(--lib-success-700);
  --bs-alert-bg: var(--lib-success-50);
  --bs-alert-border-color: var(--lib-success-200);
}
.alert-warning {
  --bs-alert-color: var(--lib-warning-700);
  --bs-alert-bg: var(--lib-warning-50);
  --bs-alert-border-color: var(--lib-warning-200);
}
.alert-danger {
  --bs-alert-color: var(--lib-danger-700);
  --bs-alert-bg: var(--lib-danger-50);
  --bs-alert-border-color: var(--lib-danger-200);
}
.alert-info {
  --bs-alert-color: var(--lib-info-700);
  --bs-alert-bg: var(--lib-info-50);
  --bs-alert-border-color: var(--lib-info-200);
}
.alert-light {
  --bs-alert-color: var(--lib-text);
  --bs-alert-bg: var(--lib-secondary-100);
  --bs-alert-border-color: var(--lib-secondary-200);
}
.alert-dark {
  --bs-alert-color: #fff;
  --bs-alert-bg: var(--lib-secondary-800);
  --bs-alert-border-color: var(--lib-secondary-900);
}

/* --- Ajustes de modo oscuro --- */
[data-bs-theme="dark"] .btn-close {
  filter: var(--bs-btn-close-white-filter);
}

[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color: var(--lib-text);
  --bs-btn-border-color: var(--lib-border-strong);
  --bs-btn-hover-color: var(--lib-bg);
  --bs-btn-hover-bg: var(--lib-text);
  --bs-btn-hover-border-color: var(--lib-text);
  --bs-btn-active-color: var(--lib-bg);
  --bs-btn-active-bg: var(--lib-text-muted);
  --bs-btn-active-border-color: var(--lib-text-muted);
}

[data-bs-theme="dark"] .alert-primary {
  --bs-alert-color: var(--lib-primary-300);
  --bs-alert-bg: var(--lib-primary-50);
  --bs-alert-border-color: var(--lib-primary-800);
}
[data-bs-theme="dark"] .alert-secondary {
  --bs-alert-color: var(--lib-secondary-200);
  --bs-alert-bg: var(--lib-surface-muted);
  --bs-alert-border-color: var(--lib-border-strong);
}
[data-bs-theme="dark"] .alert-success {
  --bs-alert-color: var(--lib-success-300);
  --bs-alert-bg: var(--lib-success-50);
  --bs-alert-border-color: var(--lib-success-800);
}
[data-bs-theme="dark"] .alert-warning {
  --bs-alert-color: var(--lib-warning-300);
  --bs-alert-bg: var(--lib-warning-50);
  --bs-alert-border-color: var(--lib-warning-800);
}
[data-bs-theme="dark"] .alert-danger {
  --bs-alert-color: var(--lib-danger-300);
  --bs-alert-bg: var(--lib-danger-50);
  --bs-alert-border-color: var(--lib-danger-800);
}
[data-bs-theme="dark"] .alert-info {
  --bs-alert-color: var(--lib-info-300);
  --bs-alert-bg: var(--lib-info-50);
  --bs-alert-border-color: var(--lib-info-800);
}
[data-bs-theme="dark"] .alert-light {
  --bs-alert-color: var(--lib-text);
  --bs-alert-bg: var(--lib-surface-muted);
  --bs-alert-border-color: var(--lib-border-strong);
}
[data-bs-theme="dark"] .alert-dark {
  --bs-alert-color: var(--lib-text);
  --bs-alert-bg: var(--lib-surface-muted);
  --bs-alert-border-color: var(--lib-border-strong);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236d82ff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .pagination {
  --bs-pagination-disabled-bg: var(--lib-surface-muted);
  --bs-pagination-bg: var(--lib-surface);
}

[data-bs-theme="dark"] .text-bg-dark {
  color: var(--lib-text) !important;
  background-color: var(--lib-surface-muted) !important;
}

/* ------------------------------------------------------------------
   Superficies de tarjetas y campos
   ------------------------------------------------------------------
   Bootstrap fija las tarjetas y los controles al fondo del body. Se
   enlazan con la superficie blanca para separarlos del fondo de la
   pagina, tambien en el tema oscuro.
   ------------------------------------------------------------------ */
.card {
  --bs-card-bg: var(--lib-surface);
}

.form-control,
.form-select {
  background-color: var(--lib-surface);
}

.form-check-input {
  --bs-form-check-bg: var(--lib-surface);
}