/* Bootstrap 5.3 vestido con la marca (tarea 2.16, RB.3).

   Se carga justo después de bootstrap.min.css en las bases. No cambia ninguna
   plantilla: las 2.074 clases de color de Bootstrap (`btn-primary`,
   `text-muted`, `bg-success`…) pasan a pintarse con los tokens de
   liberos-tokens.css, que es donde está cada color de verdad.

   Tres maneras de llegar, según cómo lo lee Bootstrap:

   1. Las variables `--bs-*` que admiten cualquier valor apuntan a un token.
   2. Las `--bs-*-rgb` son tripletes sueltos, porque Bootstrap les aplica una
      opacidad (`bg-primary bg-opacity-10`). No aceptan var(), así que llevan
      el triplete del color de la paleta; tests/test_marca_bootstrap.py
      comprueba que cada uno es un color de la paleta.
   3. Lo que Bootstrap escribe a fuego (el foco de los campos, el azul de las
      casillas marcadas…) se reescribe con su selector.

   Decisiones de marca aplicadas: el violeta es el único color de acción y el
   cian desaparece (D7); `info` pasa a Cielo. `warning` e `info` son fondos
   claros con texto oscuro, igual que en Bootstrap, porque así los usan las
   plantillas (`bg-warning text-dark`).
*/

:root {
  /* --- Colores con opacidad: tripletes de la paleta ----------------------- */
  --bs-primary-rgb: 129, 51, 241;    /* violeta-600 */
  --bs-secondary-rgb: 88, 93, 110;   /* niebla-600 */
  --bs-success-rgb: 11, 118, 67;     /* exito-claro */
  --bs-info-rgb: 130, 204, 251;      /* cielo-300 */
  --bs-warning-rgb: 245, 183, 91;    /* aviso-oscuro */
  --bs-danger-rgb: 204, 39, 46;      /* error-claro */
  --bs-light-rgb: 242, 243, 248;     /* niebla-100 */
  --bs-dark-rgb: 15, 23, 65;         /* niebla-900 */
  --bs-body-color-rgb: 15, 23, 65;   /* niebla-900 */
  --bs-body-bg-rgb: 249, 250, 253;   /* niebla-50 */
  --bs-link-color-rgb: 129, 51, 241; /* violeta-600 */
  --bs-link-hover-color-rgb: 104, 30, 200; /* violeta-700 */

  /* --- Colores con nombre ------------------------------------------------- */
  --bs-primary: var(--lb-accent);
  --bs-secondary: var(--lb-niebla-600);
  --bs-success: var(--lb-exito-claro);
  --bs-info: var(--lb-cielo-300);
  --bs-warning: var(--lb-aviso-oscuro);
  --bs-danger: var(--lb-error-claro);
  --bs-light: var(--lb-niebla-100);
  --bs-dark: var(--lb-niebla-900);

  --bs-primary-text-emphasis: var(--lb-accent-subtle-text);
  --bs-primary-bg-subtle: var(--lb-accent-subtle);
  --bs-primary-border-subtle: var(--lb-violeta-200);
  --bs-secondary-text-emphasis: var(--lb-text-primary);
  --bs-secondary-bg-subtle: var(--lb-bg-surface-2);
  --bs-secondary-border-subtle: var(--lb-border-strong);
  --bs-success-text-emphasis: var(--lb-exito);
  --bs-success-bg-subtle: var(--lb-exito-bg);
  --bs-success-border-subtle: var(--lb-exito-bg);
  --bs-info-text-emphasis: var(--lb-info);
  --bs-info-bg-subtle: var(--lb-info-bg);
  --bs-info-border-subtle: var(--lb-info-bg);
  --bs-warning-text-emphasis: var(--lb-aviso);
  --bs-warning-bg-subtle: var(--lb-aviso-bg);
  --bs-warning-border-subtle: var(--lb-aviso-bg);
  --bs-danger-text-emphasis: var(--lb-error);
  --bs-danger-bg-subtle: var(--lb-error-bg);
  --bs-danger-border-subtle: var(--lb-error-bg);
  --bs-light-text-emphasis: var(--lb-text-secondary);
  --bs-light-bg-subtle: var(--lb-bg-canvas);
  --bs-light-border-subtle: var(--lb-border-subtle);
  --bs-dark-text-emphasis: var(--lb-text-primary);
  --bs-dark-bg-subtle: var(--lb-bg-surface-2);
  --bs-dark-border-subtle: var(--lb-border-strong);

  /* --- Cuerpo, texto y bordes --------------------------------------------- */
  --bs-body-font-family: var(--lb-font);
  --bs-body-color: var(--lb-text-primary);
  --bs-body-bg: var(--lb-bg-canvas);
  --bs-emphasis-color: var(--lb-text-primary);
  --bs-secondary-color: var(--lb-text-secondary);
  --bs-secondary-bg: var(--lb-bg-surface-2);
  --bs-tertiary-color: var(--lb-text-tertiary);
  --bs-tertiary-bg: var(--lb-bg-canvas);
  --bs-link-color: var(--lb-text-link);
  --bs-link-hover-color: var(--lb-text-link-hover);
  --bs-highlight-bg: var(--lb-violeta-100);
  /* `code` venía en el rosa de Bootstrap (#d63384): fuera de la paleta y a
     3,8:1 sobre las tarjetas en oscuro (RB.23) */
  --bs-code-color: var(--lb-accent-subtle-text);
  --bs-border-color: var(--lb-border-subtle);
  --bs-border-color-translucent: var(--lb-border-subtle);
  --bs-form-valid-color: var(--lb-exito);
  --bs-form-valid-border-color: var(--lb-exito);
  --bs-form-invalid-color: var(--lb-error);
  --bs-form-invalid-border-color: var(--lb-error);

  /* --- Forma y elevación (sección 8) --------------------------------------- */
  --bs-border-radius-sm: var(--lb-radius-xs);
  --bs-border-radius: var(--lb-radius-sm);
  --bs-border-radius-lg: var(--lb-radius-md);
  --bs-border-radius-xl: var(--lb-radius-lg);
  --bs-border-radius-xxl: var(--lb-radius-xl);
  --bs-border-radius-pill: var(--lb-radius-full);
  --bs-box-shadow-sm: var(--lb-e1);
  --bs-box-shadow: var(--lb-e2);
  --bs-box-shadow-lg: var(--lb-e3);
}

/* --- Enlaces ------------------------------------------------------------------
   Bootstrap pinta `a` con el triplete, que no cambia con el modo: en oscuro el
   violeta del enlace quedaría a 3:1 sobre Noche. Los tokens de enlace sí
   cambian, y están medidos en los dos. */
a {
  color: var(--lb-text-link);
}

a:hover {
  color: var(--lb-text-link-hover);
}

/* --- Texto de color ----------------------------------------------------------
   Bootstrap usa el mismo triplete para `bg-warning` y `text-warning`, y un
   ámbar que sirve de fondo no se lee como texto sobre blanco (1,9:1). El texto
   va con los tokens de texto, que están medidos en claro y en oscuro. */
.text-primary { color: var(--lb-text-link) !important; }
.text-secondary { color: var(--lb-text-secondary) !important; }
.text-success { color: var(--lb-exito) !important; }
.text-info { color: var(--lb-info) !important; }
.text-warning { color: var(--lb-aviso) !important; }
.text-danger { color: var(--lb-error) !important; }
.text-dark,
.text-body,
.text-black { color: var(--lb-text-primary) !important; }

/* --- Botones (sección 12.2): cápsula, una sola acción en violeta ------------- */
/* Tamaños de la sección 12.2 con el texto en `label` (14/20, 500):
   M 40 px, S 32 px, L 48 px. El alto sale del relleno, no de un min-height,
   para que el texto quede centrado. */
.btn {
  --bs-btn-font-size: var(--lb-fs-label);
  --bs-btn-line-height: var(--lb-lh-label);
  --bs-btn-font-weight: 500;
  --bs-btn-padding-y: 9px;
  --bs-btn-padding-x: 18px;
  --bs-btn-border-radius: var(--lb-radius-full);
  --bs-btn-focus-box-shadow: var(--lb-focus-ring);
  --bs-btn-disabled-opacity: 0.5;
}

.btn-sm {
  --bs-btn-padding-y: 5px;
  --bs-btn-padding-x: 14px;
  --bs-btn-font-size: var(--lb-fs-label);
  --bs-btn-border-radius: var(--lb-radius-full);
}

.btn-lg {
  --bs-btn-padding-y: 11px;
  --bs-btn-padding-x: 24px;
  --bs-btn-font-size: var(--lb-fs-body);
  --bs-btn-line-height: var(--lb-lh-body);
  --bs-btn-border-radius: var(--lb-radius-full);
}

.btn-primary {
  --bs-btn-color: var(--lb-text-on-accent);
  --bs-btn-bg: var(--lb-accent);
  --bs-btn-border-color: var(--lb-accent);
  --bs-btn-hover-color: var(--lb-text-on-accent);
  --bs-btn-hover-bg: var(--lb-accent-hover);
  --bs-btn-hover-border-color: var(--lb-accent-hover);
  --bs-btn-active-color: var(--lb-text-on-accent);
  --bs-btn-active-bg: var(--lb-violeta-800);
  --bs-btn-active-border-color: var(--lb-violeta-800);
  --bs-btn-disabled-color: var(--lb-text-on-accent);
  --bs-btn-disabled-bg: var(--lb-accent);
  --bs-btn-disabled-border-color: var(--lb-accent);
}

/* Secundario: superficie con borde (sección 12.2); claro: relleno suave */
.btn-secondary {
  --bs-btn-color: var(--lb-text-primary);
  --bs-btn-bg: var(--lb-bg-surface);
  --bs-btn-border-color: var(--lb-border-strong);
  --bs-btn-hover-color: var(--lb-text-primary);
  --bs-btn-hover-bg: var(--lb-bg-surface-2);
  --bs-btn-hover-border-color: var(--lb-border-strong);
  --bs-btn-active-color: var(--lb-text-primary);
  --bs-btn-active-bg: var(--lb-bg-surface-2);
  --bs-btn-active-border-color: var(--lb-border-strong);
  --bs-btn-disabled-color: var(--lb-text-primary);
  --bs-btn-disabled-bg: var(--lb-bg-surface);
  --bs-btn-disabled-border-color: var(--lb-border-strong);
}

.btn-light {
  --bs-btn-color: var(--lb-text-primary);
  --bs-btn-bg: var(--lb-bg-surface-2);
  --bs-btn-border-color: var(--lb-border-strong);
  --bs-btn-hover-color: var(--lb-text-primary);
  --bs-btn-hover-bg: var(--lb-border-strong);
  --bs-btn-hover-border-color: var(--lb-border-strong);
  --bs-btn-active-color: var(--lb-text-primary);
  --bs-btn-active-bg: var(--lb-border-strong);
  --bs-btn-active-border-color: var(--lb-border-strong);
  --bs-btn-disabled-color: var(--lb-text-primary);
  --bs-btn-disabled-bg: var(--lb-bg-surface-2);
  --bs-btn-disabled-border-color: var(--lb-border-strong);
}

.btn-dark {
  --bs-btn-color: var(--lb-blanco);
  --bs-btn-bg: var(--lb-niebla-900);
  --bs-btn-border-color: var(--lb-niebla-900);
  --bs-btn-hover-color: var(--lb-blanco);
  --bs-btn-hover-bg: var(--lb-niebla-800);
  --bs-btn-hover-border-color: var(--lb-niebla-800);
  --bs-btn-active-color: var(--lb-blanco);
  --bs-btn-active-bg: var(--lb-niebla-800);
  --bs-btn-active-border-color: var(--lb-niebla-800);
}

/* Éxito y error, sólidos con texto blanco: los tonos claros no cambian con el
   modo, así que el contraste es el mismo en los dos. Sin escala no hay un paso
   más oscuro para el hover: lo da el brillo. */
.btn-success,
.btn-danger {
  --bs-btn-color: var(--lb-blanco);
  --bs-btn-hover-color: var(--lb-blanco);
  --bs-btn-active-color: var(--lb-blanco);
  --bs-btn-disabled-color: var(--lb-blanco);
}

.btn-success {
  --bs-btn-bg: var(--lb-exito-claro);
  --bs-btn-border-color: var(--lb-exito-claro);
  --bs-btn-hover-bg: var(--lb-exito-claro);
  --bs-btn-hover-border-color: var(--lb-exito-claro);
  --bs-btn-active-bg: var(--lb-exito-claro);
  --bs-btn-active-border-color: var(--lb-exito-claro);
  --bs-btn-disabled-bg: var(--lb-exito-claro);
  --bs-btn-disabled-border-color: var(--lb-exito-claro);
}

.btn-danger {
  --bs-btn-bg: var(--lb-error-claro);
  --bs-btn-border-color: var(--lb-error-claro);
  --bs-btn-hover-bg: var(--lb-error-claro);
  --bs-btn-hover-border-color: var(--lb-error-claro);
  --bs-btn-active-bg: var(--lb-error-claro);
  --bs-btn-active-border-color: var(--lb-error-claro);
  --bs-btn-disabled-bg: var(--lb-error-claro);
  --bs-btn-disabled-border-color: var(--lb-error-claro);
}

/* Aviso e información: fondo claro y texto oscuro, como en Bootstrap */
.btn-warning,
.btn-info {
  --bs-btn-color: var(--lb-niebla-900);
  --bs-btn-hover-color: var(--lb-niebla-900);
  --bs-btn-active-color: var(--lb-niebla-900);
  --bs-btn-disabled-color: var(--lb-niebla-900);
}

.btn-warning {
  --bs-btn-bg: var(--lb-aviso-oscuro);
  --bs-btn-border-color: var(--lb-aviso-oscuro);
  --bs-btn-hover-bg: var(--lb-aviso-oscuro);
  --bs-btn-hover-border-color: var(--lb-aviso-oscuro);
  --bs-btn-active-bg: var(--lb-aviso-oscuro);
  --bs-btn-active-border-color: var(--lb-aviso-oscuro);
  --bs-btn-disabled-bg: var(--lb-aviso-oscuro);
  --bs-btn-disabled-border-color: var(--lb-aviso-oscuro);
}

.btn-info {
  --bs-btn-bg: var(--lb-cielo-300);
  --bs-btn-border-color: var(--lb-cielo-300);
  --bs-btn-hover-bg: var(--lb-cielo-300);
  --bs-btn-hover-border-color: var(--lb-cielo-300);
  --bs-btn-active-bg: var(--lb-cielo-300);
  --bs-btn-active-border-color: var(--lb-cielo-300);
  --bs-btn-disabled-bg: var(--lb-cielo-300);
  --bs-btn-disabled-border-color: var(--lb-cielo-300);
}

.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover {
  filter: brightness(0.92);
}

/* Contorno: el texto es el color de texto del rol; al pasar, se rellena */
.btn-outline-primary {
  --bs-btn-color: var(--lb-text-link);
  --bs-btn-border-color: var(--lb-accent);
  --bs-btn-hover-color: var(--lb-text-on-accent);
  --bs-btn-hover-bg: var(--lb-accent);
  --bs-btn-hover-border-color: var(--lb-accent);
  --bs-btn-active-color: var(--lb-text-on-accent);
  --bs-btn-active-bg: var(--lb-accent-hover);
  --bs-btn-active-border-color: var(--lb-accent-hover);
  --bs-btn-disabled-color: var(--lb-text-link);
  --bs-btn-disabled-border-color: var(--lb-accent);
}

.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-light {
  --bs-btn-color: var(--lb-text-secondary);
  --bs-btn-border-color: var(--lb-border-strong);
  --bs-btn-hover-color: var(--lb-text-primary);
  --bs-btn-hover-bg: var(--lb-bg-surface-2);
  --bs-btn-hover-border-color: var(--lb-border-strong);
  --bs-btn-active-color: var(--lb-text-primary);
  --bs-btn-active-bg: var(--lb-border-strong);
  --bs-btn-active-border-color: var(--lb-border-strong);
  --bs-btn-disabled-color: var(--lb-text-secondary);
  --bs-btn-disabled-border-color: var(--lb-border-strong);
}

.btn-outline-success {
  --bs-btn-color: var(--lb-exito);
  --bs-btn-border-color: var(--lb-exito);
  --bs-btn-hover-color: var(--lb-exito);
  --bs-btn-hover-bg: var(--lb-exito-bg);
  --bs-btn-hover-border-color: var(--lb-exito);
  --bs-btn-active-color: var(--lb-exito);
  --bs-btn-active-bg: var(--lb-exito-bg);
  --bs-btn-active-border-color: var(--lb-exito);
  --bs-btn-disabled-color: var(--lb-exito);
  --bs-btn-disabled-border-color: var(--lb-exito);
}

.btn-outline-danger {
  --bs-btn-color: var(--lb-error);
  --bs-btn-border-color: var(--lb-error);
  --bs-btn-hover-color: var(--lb-error);
  --bs-btn-hover-bg: var(--lb-error-bg);
  --bs-btn-hover-border-color: var(--lb-error);
  --bs-btn-active-color: var(--lb-error);
  --bs-btn-active-bg: var(--lb-error-bg);
  --bs-btn-active-border-color: var(--lb-error);
  --bs-btn-disabled-color: var(--lb-error);
  --bs-btn-disabled-border-color: var(--lb-error);
}

.btn-outline-warning {
  --bs-btn-color: var(--lb-aviso);
  --bs-btn-border-color: var(--lb-aviso);
  --bs-btn-hover-color: var(--lb-aviso);
  --bs-btn-hover-bg: var(--lb-aviso-bg);
  --bs-btn-hover-border-color: var(--lb-aviso);
  --bs-btn-active-color: var(--lb-aviso);
  --bs-btn-active-bg: var(--lb-aviso-bg);
  --bs-btn-active-border-color: var(--lb-aviso);
  --bs-btn-disabled-color: var(--lb-aviso);
  --bs-btn-disabled-border-color: var(--lb-aviso);
}

.btn-outline-info {
  --bs-btn-color: var(--lb-info);
  --bs-btn-border-color: var(--lb-info);
  --bs-btn-hover-color: var(--lb-info);
  --bs-btn-hover-bg: var(--lb-info-bg);
  --bs-btn-hover-border-color: var(--lb-info);
  --bs-btn-active-color: var(--lb-info);
  --bs-btn-active-bg: var(--lb-info-bg);
  --bs-btn-active-border-color: var(--lb-info);
  --bs-btn-disabled-color: var(--lb-info);
  --bs-btn-disabled-border-color: var(--lb-info);
}

.btn-link {
  --bs-btn-color: var(--lb-text-link);
  --bs-btn-hover-color: var(--lb-text-link-hover);
  --bs-btn-active-color: var(--lb-text-link-hover);
  --bs-btn-disabled-color: var(--lb-text-tertiary);
}

/* --- Insignias (sección 12.7) ------------------------------------------------ */
/* Cápsula de 24 px en `caption` (sección 12.7) */
.badge {
  --bs-badge-padding-x: 10px;
  --bs-badge-padding-y: 4px;
  --bs-badge-font-size: var(--lb-fs-caption);
  --bs-badge-font-weight: 500;
  --bs-badge-color: var(--lb-blanco);
  --bs-badge-border-radius: var(--lb-radius-full);
  line-height: var(--lb-lh-caption);
}

/* Sobre los fondos claros el blanco no se lee: 1,9:1 sobre el ámbar */
.badge.bg-warning,
.badge.bg-info,
.badge.bg-light {
  --bs-badge-color: var(--lb-niebla-900);
}

/* --- Campos (sección 12.3) ---------------------------------------------------- */
/* 44 px de alto, que es además el área táctil mínima */
.form-control,
.form-select {
  min-height: 44px;
  border-color: var(--lb-border-strong);
  background-color: var(--lb-bg-surface);
  color: var(--lb-text-primary);
}

/* De sólo lectura (readonly): con el mismo aspecto que uno editable, «Editar mis
   datos» dejaba escribir un nombre verificado que la ruta no guarda. */
.form-control[readonly] {
  background-color: var(--lb-bg-surface-2);
  color: var(--lb-text-secondary);
  cursor: default;
}

.form-label {
  font-size: var(--lb-fs-label);
  line-height: var(--lb-lh-label);
  font-weight: 500;
  color: var(--lb-text-secondary);
}

.form-text {
  font-size: var(--lb-fs-body-sm);
  color: var(--lb-text-secondary);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--lb-focus);
  outline: 0;
  box-shadow: var(--lb-focus-ring);
}

/* Sin marcar, la casilla necesita 3:1 contra su fondo (WCAG 1.4.11): con el
   borde de Bootstrap, en oscuro apenas se veía, y el de los campos
   (--lb-border-strong) se queda en 1,5:1 (RB.13). */
.form-check-input {
  border-color: var(--lb-text-tertiary);
  background-color: var(--lb-bg-surface);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--lb-accent);
  border-color: var(--lb-accent);
}

.form-range::-webkit-slider-thumb { background-color: var(--lb-accent); }
.form-range::-moz-range-thumb { background-color: var(--lb-accent); }

/* Sin el botón propio de «ver contraseña» de cada navegador: las pantallas que
   lo necesitan traen el suyo. Venía de style.css. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-contacts-auto-fill-button,
input[type="password"]::-webkit-credentials-auto-fill-button {
  display: none !important;
}

/* --- Cifras (sección 6.1) ------------------------------------------------------
   Importes, porcentajes y tablas con cifras tabulares: los dígitos ocupan lo
   mismo y las columnas se alinean. */
.table,
.lb-cifra {
  font-variant-numeric: tabular-nums;
}

/* --- Tarjetas, tablas y avisos (secciones 12.4, 12.8 y 12.9) ----------------- */
/* Superficie sólida, radio de 20 px, borde suave y E1 (sección 12.4) */
.card {
  --bs-card-border-color: var(--lb-border-subtle);
  --bs-card-border-radius: var(--lb-radius-lg);
  --bs-card-inner-border-radius: calc(var(--lb-radius-lg) - 1px);
  --bs-card-box-shadow: var(--lb-e1);
  box-shadow: var(--bs-card-box-shadow);
  --bs-card-cap-bg: var(--lb-bg-surface-2);
  --bs-card-bg: var(--lb-bg-surface);
  --bs-card-color: var(--lb-text-primary);
}

/* Una tarjeta al final de una columna de una fila con separación (`row g-4`):
   el hueco entre filas ya lo pone la separación, y el `mb-4` de `ui.tarjeta` lo
   duplicaba (48 px entre tarjetas apiladas a 390 px, en unas 99 plantillas).
   La tarjeta pierde su margen y la fila lo recupera por abajo, para no pegarse
   a lo siguiente. */
.row:is([class^="g-"], [class*=" g-"], [class*=" gy-"]) > [class*="col"] > .card.mb-4:last-child {
  margin-bottom: 0 !important;
}

.row:is([class^="g-"], [class*=" g-"], [class*=" gy-"]):has(> [class*="col"] > .card.mb-4:last-child) {
  margin-bottom: 1.5rem;
}

.table {
  --bs-table-color: var(--lb-text-primary);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--lb-border-subtle);
  --bs-table-striped-color: var(--lb-text-primary);
  --bs-table-striped-bg: var(--lb-bg-canvas);
  --bs-table-hover-color: var(--lb-text-primary);
  --bs-table-hover-bg: var(--lb-bg-surface-2);
  --bs-table-active-color: var(--lb-text-primary);
  --bs-table-active-bg: var(--lb-bg-surface-2);
}

/* Cabecera en `caption` y filas de 48 px (sección 12.8) */
.table > thead th {
  font-size: var(--lb-fs-caption);
  line-height: var(--lb-lh-caption);
  font-weight: 500;
  color: var(--lb-text-secondary);
}

.table > tbody > tr > * {
  padding-top: 14px;
  padding-bottom: 14px;
}

.table-light,
.table-secondary {
  --bs-table-color: var(--lb-text-primary);
  --bs-table-bg: var(--lb-bg-surface-2);
  --bs-table-border-color: var(--lb-border-subtle);
}

.alert {
  --bs-alert-border-radius: var(--lb-radius-md);
}

.alert-light {
  --bs-alert-color: var(--lb-text-secondary);
  --bs-alert-bg: var(--lb-bg-surface-2);
  --bs-alert-border-color: var(--lb-border-subtle);
}

.modal-backdrop {
  --bs-backdrop-bg: var(--lb-niebla-950);
  --bs-backdrop-opacity: 0.32;
}

.modal {
  --bs-modal-border-radius: var(--lb-radius-xl);
  --bs-modal-box-shadow: var(--lb-e4);
  --bs-modal-bg: var(--lb-bg-surface);
  --bs-modal-color: var(--lb-text-primary);
}

.dropdown-menu {
  --bs-dropdown-border-radius: var(--lb-radius-md);
  --bs-dropdown-box-shadow: var(--lb-e3);
  --bs-dropdown-link-color: var(--lb-text-primary);
  --bs-dropdown-link-hover-bg: var(--lb-bg-surface-2);
  --bs-dropdown-link-active-color: var(--lb-text-on-accent);
  --bs-dropdown-link-active-bg: var(--lb-accent);
}

/* --- Navegación, paginación, listas y progreso ------------------------------- */
.nav-pills {
  --bs-nav-pills-border-radius: var(--lb-radius-full);
  --bs-nav-pills-link-active-color: var(--lb-text-on-accent);
  --bs-nav-pills-link-active-bg: var(--lb-accent);
}

.nav-tabs {
  --bs-nav-tabs-link-active-color: var(--lb-text-primary);
  --bs-nav-tabs-link-active-border-color: var(--lb-border-subtle) var(--lb-border-subtle) var(--lb-bg-surface);
}

.pagination {
  --bs-pagination-color: var(--lb-text-link);
  --bs-pagination-hover-color: var(--lb-text-link-hover);
  --bs-pagination-focus-color: var(--lb-text-link-hover);
  --bs-pagination-focus-box-shadow: var(--lb-focus-ring);
  --bs-pagination-active-color: var(--lb-text-on-accent);
  --bs-pagination-active-bg: var(--lb-accent);
  --bs-pagination-active-border-color: var(--lb-accent);
}

.list-group {
  --bs-list-group-active-color: var(--lb-text-on-accent);
  --bs-list-group-active-bg: var(--lb-accent);
  --bs-list-group-active-border-color: var(--lb-accent);
}

/* Dentro de una tarjeta, la lista toma el fondo de la tarjeta: con el de la
   página, en oscuro quedaba una franja más negra (RB.18). */
.card .list-group {
  --bs-list-group-bg: transparent;
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--lb-accent);
  --bs-progress-border-radius: var(--lb-radius-full);
}

/* --- Iconos que Bootstrap dibuja con un SVG (RB.23) ------------------------------
   La flecha de los desplegables, la del acordeón y la X de cerrar son imágenes
   con el color escrito dentro: #343a40 y #212529, grises de Bootstrap, que en
   oscuro casi no se veían (1,3:1 sobre el campo). Bootstrap los cambia con
   `data-bs-theme="dark"`, que esta aplicación no usa: el modo lo llevan los
   tokens. Un SVG en data: no puede leer var(), así que el color va escrito,
   pero es siempre el de un token de la paleta (%23 es «#»):
   niebla-600 585d6e y violeta-700 681ec8 en claro, grafito-400 a1a1a8 y
   violeta-300 c7b6fe en oscuro. tests/test_revision_final.py comprueba que
   cada uno es el valor de su token y que se ve contra el campo. */
.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23585d6e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.accordion {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23585d6e' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
  --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='%23681ec8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a1a1a8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  }

  :root:not([data-theme="light"]) .accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a1a1a8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --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='%23c7b6fe' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
  }

  :root:not([data-theme="light"]) .btn-close {
    filter: var(--bs-btn-close-white-filter);
  }
}

:root[data-theme="dark"] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a1a1a8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

:root[data-theme="dark"] .accordion {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a1a1a8' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
  --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='%23c7b6fe' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

:root[data-theme="dark"] .btn-close {
  filter: var(--bs-btn-close-white-filter);
}