:root {
  --bg-color: #f0f2f5;
  --card-bg: #ffffff;
  --text-color: #000000;
  --input-bg: #ffffff;
  --input-color: #000000;
  --input-border: #ced4da;
}

.dark-mode {
  --bg-color: #2b2a36;
  --card-bg: #373543;
  --text-color: #f0f0f0;
  --input-bg: #2b2a36;
  --input-color: #ffffff;
  --input-border: #444444;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.card, .table, .navbar {
  background-color: var(--card-bg);
  color: var(--text-color);
}

.form-control {
  background-color: var(--input-bg);
  color: var(--input-color);
  border-color: var(--input-border);
}

.form-control::placeholder {
  color: #bbb;
}

.table th, .table td {
  color: var(--text-color);
}

/* DataTables ajustes oscuros */
.dark-mode table.dataTable,
.dark-mode table.dataTable tbody,
.dark-mode table.dataTable thead {
  background-color: #2b2a36 !important;
  color: #ffffff !important;
}

.dark-mode table.dataTable thead th {
  background-color: #373543 !important;
  color: #ffffff !important;
  border-bottom: 1px solid #444 !important;
}

.dark-mode table.dataTable tbody td {
  background-color: #2b2a36 !important;
  color: #ffffff !important;
}

.dark-mode table.dataTable tbody tr:hover {
  background-color: #3c3b4d !important;
}

.dark-mode .dataTables_filter input,
.dark-mode .dataTables_length select {
  background-color: #2b2a36 !important;
  color: #ffffff !important;
  border: 1px solid #555 !important;
}

/* DataTables paging, info, etc. */
.dark-mode .dataTables_paginate,
.dark-mode .dataTables_info {
  color: #ffffff !important;
}

/* 🌗 Modal en modo oscuro */
.dark-mode .modal-content {
  background-color: #373543;
  color: #ffffff;
}

.dark-mode .modal-header,
.dark-mode .modal-body,
.dark-mode .modal-footer {
  border-color: #444;
}

.dark-mode .modal .form-control {
  background-color: #2b2a36;
  color: #ffffff;
  border: 1px solid #555;
}

/* Sobreescribe la clase text-muted en dark mode */
.dark-mode .text-muted {
  color: #cccccc !important; /* 🔥 Un gris más claro (o blanco si prefieres #ffffff) */
}