/* ===== MODO OSCURO ===== */
body.dark-mode {
  background-color: #121212 !important;
  color: #f0f0f0 !important;
}

body.dark-mode .principal {
  background-color: #1e1e1e;
  color: #f1f1f1;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

body.dark-mode h1 {
  color: #f1f1f1;
}

body.dark-mode .list-group-item {
  background-color: #2a2a2a;
  color: #f1f1f1;
  border-color: #444;
}

body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: #2a2a2a;
  color: #f1f1f1;
  border-color: #555;
}

body.dark-mode .input-group-text {
  background-color: #333;
  color: #f1f1f1;
}

body.dark-mode input::placeholder {
  color: #4d4c4c;
}

body.dark-mode .btn-danger {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}

body.dark-mode .btn-success {
  background-color: #198754 !important;
  border-color: #136841 !important;
}

body.dark-mode .badge {
  background-color: #444;
  color: #f1f1f1;
}

body.dark-mode .footer {
  background-color: #222;
  color: #f1f1f1;
}

body.dark-mode #header {
  background-color: #222;
}

body.dark-mode input {
  background-color: #1e1e1e !important;
  color: #f0f0f0 !important;
  border-color: #444 !important;
}

body.dark-mode input::placeholder {
  color: #aaa !important;
}

body.dark-mode .social-btn {
  background-color: #1e1e1e !important;
  border-color: #444 !important;
}

body.dark-mode .social-btn:hover {
  background-color: #2a2a2a !important;
  border-color: #666 !important;
}

body.dark-mode a {
  color: #90caf9;
}

body.dark-mode a:hover {
  color: #bbdefb;
}

body.dark-mode .modal-content {
  background-color: #1e1e1e;
  color: #f1f1f1;
  border: 1px solid #444;
}

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

body.dark-mode .btn-close {
  filter: invert(1);
}

body.dark-mode #modal-nueva-lista input {
  background-color: #2a2a2a;
  color: #f1f1f1;
  border-color: #555;
}

body.dark-mode #modal-nueva-lista input::placeholder {
  color: #aaa;
}

body.dark-mode .list-group-item a:visited {
  color: inherit;
  background-color: #333;
}

body.dark-mode .list-group-item:hover {
  background-color: #333;
  color: #fff;
}

body.dark-mode .list-group-item a:active {
  color: inherit;
  background-color: #333;
}