/* themes.css - Sistema de temas para Imperio SGE */

/* Tema por defecto - Carbon Blue (oscuro) - solo si no hay preferencia del sistema */
:root:not([data-bs-theme]) {
  --bs-body-bg: #121826;
  --bs-body-color: #e9ecef;
  --bs-secondary-color: #9ca3af;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #e9ecef;
  --bs-dark: #121826;
  --bs-border-color: #6b7280;
  --bs-card-bg: #1e293b;
  --bs-card-color: #e9ecef;
  --bs-navbar-bg: #1a202c;
  --bs-sidebar-bg: #1a202c;
  --bs-table-bg: #1e293b;
  --bs-table-color: #e9ecef;
  --bs-table-border-color: #6b7280;
  /* Variables adicionales para Select2 */
  --bs-form-control-bg: #1e293b;
  --bs-dropdown-bg: #1e293b;
  --bs-dropdown-link-color: #e9ecef;
  --bs-primary-bg-subtle: rgba(13, 110, 253, 0.2);
  --bs-primary-text-emphasis: #a6d4fa;
  --bs-tertiary-bg: #2d3748;
  --bs-secondary-bg: #374151;
}

/* Fallback para prefers-color-scheme - se aplican DESPUÉS del fallback para sobrescribirlo */
@media (prefers-color-scheme: light) {
  :root:not([data-bs-theme]) {
    --bs-body-bg: #f8f9fa !important;
    --bs-body-color: #212529 !important;
    --bs-secondary-color: #6c757d !important;
    --bs-primary: #0d6efd !important;
    --bs-secondary: #6c757d !important;
    --bs-success: #198754 !important;
    --bs-info: #0dcaf0 !important;
    --bs-warning: #ffc107 !important;
    --bs-danger: #dc3545 !important;
    --bs-light: #f8f9fa !important;
    --bs-dark: #212529 !important;
    --bs-border-color: #dee2e6 !important;
    --bs-card-bg: #ffffff !important;
    --bs-card-color: #212529 !important;
    --bs-navbar-bg: #ffffff !important;
    --bs-sidebar-bg: #f8f9fa !important;
    --bs-table-bg: #ffffff !important;
    --bs-table-color: #212529 !important;
    --bs-table-border-color: #dee2e6 !important;
    /* Variables adicionales para Select2 */
    --bs-form-control-bg: #ffffff !important;
    --bs-dropdown-bg: #ffffff !important;
    --bs-dropdown-link-color: #212529 !important;
    --bs-primary-bg-subtle: rgba(13, 110, 253, 0.1) !important;
    --bs-primary-text-emphasis: #0a58ca !important;
    --bs-tertiary-bg: #f8f9fa !important;
    --bs-secondary-bg: #e9ecef !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) {
    --bs-body-bg: #121826 !important;
    --bs-body-color: #e9ecef !important;
    --bs-secondary-color: #9ca3af !important;
    --bs-primary: #0d6efd !important;
    --bs-secondary: #6c757d !important;
    --bs-success: #198754 !important;
    --bs-info: #0dcaf0 !important;
    --bs-warning: #ffc107 !important;
    --bs-danger: #dc3545 !important;
    --bs-light: #e9ecef !important;
    --bs-dark: #121826 !important;
    --bs-border-color: #6b7280 !important;
    --bs-card-bg: #1e293b !important;
    --bs-card-color: #e9ecef !important;
    --bs-navbar-bg: #1a202c !important;
    --bs-sidebar-bg: #1a202c !important;
    --bs-table-bg: #1e293b !important;
    --bs-table-color: #e9ecef !important;
    --bs-table-border-color: #6b7280 !important;
    /* Variables adicionales para Select2 */
    --bs-form-control-bg: #1e293b !important;
    --bs-dropdown-bg: #1e293b !important;
    --bs-dropdown-link-color: #e9ecef !important;
    --bs-primary-bg-subtle: rgba(13, 110, 253, 0.2) !important;
    --bs-primary-text-emphasis: #a6d4fa !important;
    --bs-tertiary-bg: #2d3748 !important;
    --bs-secondary-bg: #374151 !important;
  }
}

/* Aplicar variables a elementos Bootstrap */
body {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

.card {
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-card-color) !important;
  border-color: var(--bs-border-color) !important;
  border-width: 1px;
}

.card-body {
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-card-color) !important;
}

.card-header {
  background-color: var(--bs-navbar-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

.card-footer {
  background-color: var(--bs-navbar-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

.navbar {
  background-color: var(--bs-navbar-bg) !important;
  color: var(--bs-body-color) !important;
}

.navbar-brand {
  color: var(--bs-body-color) !important;
}

.navbar-brand:hover {
  color: var(--bs-primary) !important;
}

.navbar-toggler {
  border-color: var(--bs-border-color) !important;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

.sidebar {
  background-color: var(--bs-sidebar-bg) !important;
  color: var(--bs-body-color) !important;
}

.table {
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color) !important;
  border-color: var(--bs-table-border-color) !important;
}

/* Clases específicas para reemplazar estilos comunes */
.bg-body {
  background-color: var(--bs-body-bg) !important;
}

.text-body {
  color: var(--bs-body-color) !important;
}

/* Ajustes para elementos específicos */
.alert {
  background-color: var(--bs-card-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-card-color) !important;
}

.modal-content {
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-card-color) !important;
}

.form-control, .form-select {
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-card-color) !important;
  border-color: var(--bs-border-color) !important;
}

.form-control:focus, .form-select:focus {
  background-color: var(--bs-card-bg) !important;
  color: var(--bs-card-color) !important;
  border-color: var(--bs-primary) !important;
}

/* Corregir links hardcodeados con link-dark */
.link-dark {
  color: var(--bs-body-color) !important;
  text-decoration: none;
}

.link-dark:hover,
.link-dark:focus {
  color: var(--bs-primary) !important;
  text-decoration: underline;
}

a.link-dark.rounded {
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  display: block;
  margin: 0.125rem 0;
}

a.link-dark.rounded:hover {
  background-color: var(--bs-card-bg);
}