/* ============================================================================
   ExpedienteGine — Bootstrap Bridge
   Mapea Bootstrap 5 al tema activo sin reemplazar Bootstrap.
   ============================================================================ */

:root {
  --bs-primary: var(--color-primary);
  --bs-secondary: var(--color-secondary);
  --bs-success: var(--color-accent);
  --bs-danger: var(--color-error);
  --bs-warning: var(--color-warning);
  --bs-info: var(--color-secondary);
  --bs-light: var(--color-bg-secondary);
  --bs-dark: var(--color-primary);
  --bs-body-bg: var(--color-background);
  --bs-body-color: var(--color-text);
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-font-sans-serif: var(--font-sans);
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-primary);
}

.btn {
  --bs-btn-border-radius: var(--radius-md);
  --bs-btn-font-family: var(--font-sans);
  --bs-btn-font-weight: 500;
}

.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--color-primary) 90%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--color-primary) 88%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--color-primary) 82%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--color-primary) 82%, #000);
  --bs-btn-color: #fff;
}

.btn-outline-primary,
.btn-outline {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-hover-color: #fff;
}

.card {
  --bs-card-bg: var(--color-surface);
  --bs-card-color: var(--color-text);
  --bs-card-border-color: var(--color-border);
  --bs-card-border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.form-control,
.form-select {
  border-color: var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 .2rem rgba(var(--color-accent-rgb), .18);
}

.table {
  --bs-table-bg: var(--color-surface);
  --bs-table-color: var(--color-text-primary);
  --bs-table-border-color: var(--color-border);
  --bs-table-hover-bg: var(--color-bg-secondary);
}

.modal {
  --bs-modal-bg: var(--color-surface);
  --bs-modal-border-color: var(--color-border);
  --bs-modal-border-radius: var(--radius-lg);
  --bs-modal-box-shadow: var(--shadow-elevated);
}

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