/* Activador general */
body.dark-mode {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
}

/* Enlaces */
body.dark-mode a,
body.dark-mode .post-title a,
body.dark-mode .nav-menu > li > a {
  color: #e0e0e0 !important;
}
body.dark-mode a:hover {
  color: var(--primary-color) !important;
}

/* Secciones principales */
body.dark-mode .top-bar,
body.dark-mode .header-middle,
body.dark-mode .footer-top,
body.dark-mode .footer-bottom,
body.dark-mode .ts-grid-box,
body.dark-mode .ts-overlay-style .item,
body.dark-mode .post-list-item,
body.dark-mode .ts-breaking-news,
body.dark-mode .navigation {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}

/* Títulos */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode .ts-title,
body.dark-mode .widget-title {
  color: #ffffff !important;
}

/* Borde y líneas */
body.dark-mode hr,
body.dark-mode .border-top {
  border-color: #444 !important;
}

/* Formularios */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border-color: #555 !important;
}

/* Botones */
body.dark-mode .btn {
  background-color: #333 !important;
  color: #fff !important;
}
body.dark-mode .btn:hover {
  background-color: #555 !important;
  color: var(--primary-color) !important;
}

/* Menú activo o hover */
body.dark-mode .nav-menu > li > a:hover,
body.dark-mode .nav-menu > li.active > a {
  background-color: #333 !important;
  color: var(--primary-color) !important;
}

/* Categorías */
body.dark-mode .post-cat {
  background-color: var(--primary-color) !important;
  color: #000 !important;
}

/* Footer texto */
body.dark-mode .copy-right-text p,
body.dark-mode .copy-right-text p a {
  color: #aaa !important;
}

/* Owl carousel dots */
body.dark-mode .owl-dots .owl-dot span {
  background-color: #999 !important;
}
body.dark-mode .owl-dots .owl-dot.active span {
  background-color: var(--primary-color) !important;
}

/* Opcional: destacar imágenes con overlay */
body.dark-mode .ts-overlay-style .item:before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.95)) !important;
}