:root {
  --drac-bg: #282a36;
  --drac-bg2: #44475a;
  --drac-bg3: #3b3f58;
  --drac-fg: #f8f8f2;
  --drac-comment: #6272a4;
  --drac-cyan: #8be9fd;
  --drac-green: #50fa7b;
  --drac-orange: #ffb86c;
  --drac-pink: #ff79c6;
  --drac-purple: #bd93f9;
  --drac-red: #ff5555;
  --drac-yellow: #f1fa8c;
  --muted: rgba(248, 248, 242, 0.7);
  --card-bg: rgba(40, 42, 54, 0.6);
}

html,
body {
  background: var(--drac-bg) !important;
  color: var(--drac-fg) !important;
}

.module-page {
  padding-top: 0.75rem;
}

.module-title {
  margin: 0;
  color: var(--drac-fg);
  font-size: clamp(1.45rem, 1.2rem + 0.8vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.module-title i {
  color: var(--drac-cyan);
}

.badge-exceso {
  background-color: #ff6b6b !important;
  color: #f8f8f2 !important;
  font-weight: 500;
}

/*
 * Cross-platform select rendering:
 * Keep dark input style in the closed control, but force readable option colors
 * in native OS dropdown menus (notably Windows).
 */
select.form-select,
select,
.form-select {
  color: var(--drac-fg);
  background-color: rgba(255, 255, 255, 0.03);
}

select.form-select option,
select option,
.form-select option,
select.form-select optgroup,
select optgroup,
.form-select optgroup {
  color: #1f2430 !important;
  background-color: #ffffff !important;
}