/* ============================================================
   CUSTOM STYLES — DARK MODE
   Overrides y estilos especificos para modo oscuro.
   Usa variables del design system, redefinidas para dark.
   ============================================================ */

/* --- Variables Dark Mode --- */
body.dark,
.dark {
  --ds-bg-body:           #0c1222;
  --ds-bg-surface:        #1a2332;
  --ds-bg-surface-raised: #212d3f;
  --ds-bg-sidebar:        #131c2b;
  --ds-bg-navbar:         #131c2b;
  --ds-bg-input:          #1a2332;
  --ds-bg-hover:          #212d3f;
  --ds-bg-active:         #1e3a5f;

  --ds-text-primary:      #f1f5f9;
  --ds-text-secondary:    #cbd5e1;
  --ds-text-muted:        #7a8a9e;
  --ds-text-disabled:     #475569;
  --ds-text-inverse:      #ffffff;
  --ds-text-link:         #60a5fa;
  --ds-text-link-hover:   #93bbfd;

  --ds-border-color:      #2a3a4e;
  --ds-border-light:      #1e293b;
  --ds-border-strong:     #3d5068;
  --ds-border-focus:      #3b82f6;

  --ds-gray-50:           #1a2332;
  --ds-gray-100:          #212d3f;
  --ds-gray-200:          #2a3a4e;
  --ds-gray-300:          #3d5068;
  --ds-gray-400:          #64748b;

  --ds-primary-light:     rgba(37, 99, 235, 0.25);
  --ds-primary-subtle:    rgba(37, 99, 235, 0.12);
  --ds-success-light:     rgba(16, 185, 129, 0.25);
  --ds-success-subtle:    rgba(16, 185, 129, 0.12);
  --ds-warning-light:     rgba(245, 158, 11, 0.25);
  --ds-warning-subtle:    rgba(245, 158, 11, 0.12);
  --ds-danger-light:      rgba(239, 68, 68, 0.25);
  --ds-danger-subtle:     rgba(239, 68, 68, 0.12);
  --ds-info-light:        rgba(14, 165, 233, 0.25);
  --ds-info-subtle:       rgba(14, 165, 233, 0.12);

  --ds-shadow-xs:         0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --ds-shadow-sm:         0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.5);
  --ds-shadow-md:         0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --ds-shadow-lg:         0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --ds-shadow-xl:         0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  --ds-shadow-focus:      0 0 0 3px rgba(59, 130, 246, 0.4);
}


/* --- Body --- */
body.dark {
  background-color: var(--ds-bg-body);
  color: var(--ds-text-secondary);
}


/* --- Boton Inicio --- */
.dark #button_inicio {
  color: var(--ds-text-primary);
  background-color: var(--ds-bg-surface);
  box-shadow: var(--ds-shadow-md);
}

.dark #button_inicio:hover {
  background-color: var(--ds-primary);
  box-shadow: var(--ds-shadow-lg), 0 0 0 4px rgba(var(--ds-primary-rgb), 0.2);
  color: var(--ds-text-inverse);
  transform: translateY(-3px);
}

.dark #button_inicio:active {
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-sm);
}


/* --- Cards --- */
.dark .card {
  background: var(--ds-bg-surface);
  border: 1px solid var(--ds-border-color);
  box-shadow: var(--ds-shadow-md);
}

.dark .card-header {
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--ds-border-color);
  color: var(--ds-text-primary);
}

.dark .card-footer {
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--ds-border-color);
}

.dark .card-hover:hover {
  box-shadow: var(--ds-shadow-lg);
  border-color: var(--ds-border-strong);
  transform: translateY(-2px);
}

.dark .card-simple-hover:hover {
  box-shadow: var(--ds-shadow-lg);
  border-color: var(--ds-border-strong);
}


/* --- Sidebar --- */
.dark .sidebar-left {
  background-color: var(--ds-bg-sidebar) !important;
  border-right-color: var(--ds-border-color) !important;
}

.dark .sidebar-left .nav-link {
  color: var(--ds-text-secondary);
  border-radius: var(--ds-radius-md);
  margin: 1px var(--ds-space-2);
  padding: var(--ds-space-2) var(--ds-space-3);
}

.dark .sidebar-left .nav-link:hover {
  color: var(--ds-text-link);
  background-color: var(--ds-primary-subtle);
}

.dark .sidebar-left .nav-link.active,
.dark .sidebar-left .nav-link[aria-expanded="true"] {
  color: var(--ds-text-link);
  background-color: var(--ds-primary-subtle);
  font-weight: var(--ds-font-medium);
}

.dark .sidebar-left .nav-heading,
.dark .sidebar-left .text-muted.nav-heading {
  color: var(--ds-text-muted) !important;
}


/* --- Navbar --- */
.dark .topnav.navbar {
  background-color: var(--ds-bg-navbar) !important;
  border-bottom: 1px solid var(--ds-border-color);
  box-shadow: var(--ds-shadow-xs);
}

.dark .topnav .nav-link {
  color: var(--ds-text-muted);
}

.dark .topnav .nav-link:hover {
  color: var(--ds-text-primary);
}

.dark .topnav .form-control {
  background-color: var(--ds-bg-hover);
  border: 1px solid transparent;
  color: var(--ds-text-primary);
}

.dark .topnav .form-control::placeholder {
  color: var(--ds-text-muted);
}

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


/* --- Tables --- */
.dark .table {
  color: var(--ds-text-primary);
}

.dark .table thead th {
  background-color: var(--ds-gray-50);
  color: var(--ds-text-muted);
  border-bottom-color: var(--ds-border-color);
}

.dark .table tbody td {
  border-bottom-color: var(--ds-border-color);
  color: var(--ds-text-secondary);
}

.dark .table-hover tbody tr:hover {
  background-color: var(--ds-bg-hover);
}

.dark .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--ds-gray-50);
}


/* --- Formularios --- */
.dark .form-control {
  background-color: var(--ds-bg-input);
  border-color: var(--ds-border-color);
  color: var(--ds-text-primary);
}

.dark .form-control::placeholder {
  color: var(--ds-text-muted);
}

.dark .form-control:focus {
  background-color: var(--ds-bg-input);
  border-color: var(--ds-border-focus);
  box-shadow: var(--ds-shadow-focus);
  color: var(--ds-text-primary);
}

.dark label,
.dark .form-label {
  color: var(--ds-text-secondary);
}

.dark .form-text {
  color: var(--ds-text-muted);
}

.dark .custom-select {
  background-color: var(--ds-bg-input);
  border-color: var(--ds-border-color);
  color: var(--ds-text-primary);
}


/* --- Dropdowns --- */
.dark .dropdown-menu {
  background-color: var(--ds-bg-surface-raised);
  border-color: var(--ds-border-color);
  box-shadow: var(--ds-shadow-lg);
}

.dark .dropdown-item {
  color: var(--ds-text-secondary);
}

.dark .dropdown-item:hover,
.dark .dropdown-item:focus {
  background-color: var(--ds-bg-hover);
  color: var(--ds-text-primary);
}

.dark .dropdown-divider {
  border-top-color: var(--ds-border-color);
}


/* --- Modales --- */
.dark .modal-content {
  background-color: var(--ds-bg-surface);
  border-color: var(--ds-border-color);
}

.dark .modal-header {
  border-bottom-color: var(--ds-border-color);
  color: var(--ds-text-primary);
}

.dark .modal-body {
  color: var(--ds-text-secondary);
}

.dark .modal-footer {
  border-top-color: var(--ds-border-color);
}


/* --- Badges dark --- */
.dark .badge-primary {
  background-color: var(--ds-primary-light);
  color: #60a5fa;
}

.dark .badge-success {
  background-color: var(--ds-success-light);
  color: #34d399;
}

.dark .badge-warning {
  background-color: var(--ds-warning-light);
  color: #fbbf24;
}

.dark .badge-danger {
  background-color: var(--ds-danger-light);
  color: #f87171;
}

.dark .badge-info {
  background-color: var(--ds-info-light);
  color: #38bdf8;
}


/* --- Alertas dark --- */
.dark .alert-success {
  background-color: var(--ds-success-subtle);
  border-color: rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.dark .alert-danger {
  background-color: var(--ds-danger-subtle);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.dark .alert-warning {
  background-color: var(--ds-warning-subtle);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

.dark .alert-info {
  background-color: var(--ds-info-subtle);
  border-color: rgba(14, 165, 233, 0.3);
  color: #38bdf8;
}


/* --- Paginacion dark --- */
.dark .page-link {
  background-color: var(--ds-bg-surface);
  border-color: var(--ds-border-color);
  color: var(--ds-text-secondary);
}

.dark .page-link:hover {
  background-color: var(--ds-bg-hover);
  border-color: var(--ds-border-strong);
  color: var(--ds-text-primary);
}

.dark .page-item.active .page-link {
  background-color: var(--ds-primary);
  border-color: var(--ds-primary);
}

.dark .page-item.disabled .page-link {
  background-color: var(--ds-bg-surface);
  color: var(--ds-text-disabled);
}


/* --- Footer dark --- */
.dark footer span.text-muted {
  color: var(--ds-text-muted) !important;
}


/* --- Iconos dark --- */
.dark .icon {
  font-size: 2rem;
  color: var(--ds-text-primary);
}


/* --- Links dark --- */
.dark a {
  color: var(--ds-text-link);
}

.dark a:hover {
  color: var(--ds-text-link-hover);
}


/* --- Scrollbar dark --- */
.dark ::-webkit-scrollbar-track {
  background: var(--ds-gray-100);
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--ds-gray-300);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--ds-gray-400);
}


/* --- DataTables dark --- */
.dark .dataTables_wrapper .dataTables_length,
.dark .dataTables_wrapper .dataTables_filter,
.dark .dataTables_wrapper .dataTables_info,
.dark .dataTables_wrapper .dataTables_paginate {
  color: var(--ds-text-muted);
}

.dark .dataTables_wrapper .dataTables_filter input {
  background-color: var(--ds-bg-input);
  border-color: var(--ds-border-color);
  color: var(--ds-text-primary);
}

.dark .dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--ds-border-focus);
  box-shadow: var(--ds-shadow-focus);
}

.dark .dataTables_wrapper .dataTables_length select {
  background-color: var(--ds-bg-input);
  border-color: var(--ds-border-color);
  color: var(--ds-text-primary);
}

.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--ds-text-secondary) !important;
}

.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--ds-bg-hover) !important;
  border-color: var(--ds-border-color) !important;
  color: var(--ds-text-primary) !important;
}

.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: var(--ds-primary) !important;
  border-color: var(--ds-primary) !important;
  color: var(--ds-text-inverse) !important;
}


/* --- Select2 dark --- */
.dark .select2-container--default .select2-selection--single {
  background-color: var(--ds-bg-input);
  border-color: var(--ds-border-color);
  color: var(--ds-text-primary);
}

.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ds-text-primary);
}

.dark .select2-dropdown {
  background-color: var(--ds-bg-surface-raised);
  border-color: var(--ds-border-color);
}

.dark .select2-container--default .select2-results__option {
  color: var(--ds-text-secondary);
}

.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ds-primary);
  color: var(--ds-text-inverse);
}

.dark .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--ds-bg-input);
  border-color: var(--ds-border-color);
  color: var(--ds-text-primary);
}


/* --- Selection color dark --- */
.dark ::selection {
  background-color: rgba(37, 99, 235, 0.3);
  color: #93bbfd;
}


/* --- Password eye icon --- */
.dark .bi-eye {
  color: var(--ds-text-muted);
}

.dark .bi-eye:hover {
  color: var(--ds-text-primary);
}