/* --- Refactor: Modo Oscuro basado en body class --- */
body {
  transition:
    background-color 0.3s ease,
    color 0.3s ease !important;
}

body.dark {
  background-color: #13161c !important;
  color: #f9fafb !important;
}

/* Todos los textos dentro de body.dark */
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark p,
body.dark span,
body.dark li,
body.dark em,
body.dark strong,
body.dark b {
  color: #f9fafb !important;
}

/* Enlaces de contenido: cyan visible y distinguible del texto */
body.dark a {
  color: #00bcd4 !important;
  transition: color 0.2s ease;
}

/* Spans y texto negrita dentro de enlaces deben heredar el color cyan */
body.dark a span,
body.dark a b,
body.dark a strong {
  color: inherit !important;
}

body.dark a:hover,
body.dark a:focus {
  color: #4dd0e1 !important;
  text-decoration: underline;
}

/* Enlace de hoja de vida con estilo hover permanente (Modo Oscuro) */
body.dark a[data-i18n="about-resume-link"] {
  color: #4dd0e1 !important;
  text-decoration: underline !important;
}

body.dark .resume-item,
body.dark .textMovil,
body.dark .subheading,
body.dark .fa-ul {
  background-color: transparent !important;
  border: 2px solid transparent !important; /* Grosor aumentado para sincronización */
  box-shadow: none !important;
  transition: background-color 0.3s ease !important; /* Asegurar transición suave */
}

body.dark .resume-item {
  border-left: 5px solid transparent !important; /* Preservar el acento lateral de 5px */
}

/* Efecto hover suave para estos contenedores en modo oscuro */
body.dark .resume-item:hover {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border-left-color: #00bcd4 !important;
}

body.dark .subheading:hover,
body.dark .fa-ul:hover {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Ajuste para el subheading: mantener sincronización de dimensiones */
body.dark .subheading {
  background-color: transparent !important;
}

/* No aplicar fondos individuales a textos para evitar el efecto de "resaltado" */
body.dark p,
body.dark h3,
body.dark b,
body.dark span,
body.dark a {
  background-color: transparent !important;
  box-shadow: none !important;
  /* Eliminado padding: 0 para mantener sincronización con el modo claro */
}

/* Ajustes específicos de contenedores */
body.dark #sideNav,
body.dark nav,
body.dark .navbar-brand,
body.dark .navbar {
  background-color: #010101 !important;
}

body.dark hr {
  border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
}

/* Flechas del slider en modo oscuro: solo contorno */
body.dark .slick-prev,
body.dark .slick-next {
  border: 1px solid #00bcd4 !important;
  background-color: #1a1e24 !important; /* Fondo oscuro sólido */
  color: #00bcd4 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

body.dark .slick-prev:before,
body.dark .slick-next:before {
  color: #00bcd4 !important;
}

body.dark .slick-prev:hover,
body.dark .slick-next:hover {
  background-color: #00bcd4 !important;
  color: #13161c !important;
}

body.dark .slick-prev:hover:before,
body.dark .slick-next:hover:before {
  color: #13161c !important;
}

body.dark #sideNav {
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark ul.horizontal {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background-color: #010101 !important; /* Asegurar fondo sólido */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important; /* Sombra más profunda para modo oscuro */
}

body.dark ul.horizontal li {
  background-color: #010101 !important;
  border-right-color: rgba(255, 255, 255, 0.1) !important;
  transition: background-color 0.3s ease;
}

body.dark ul.horizontal li:hover,
body.dark ul.horizontal li:has(a.active) {
  background-color: #1a1e24 !important; /* Color sólido para evitar transparencia al scroll */
}

body.dark ul.horizontal li a:hover,
body.dark ul.horizontal li a.active {
  text-shadow: 0.5px 0 0 currentColor !important; /* Simula negrita sin desplazamiento */
}

body.dark ul.horizontal li a {
  color: #f9fafb !important;
}

body.dark .text-primary {
  color: #00bcd4 !important; /* Un cyan más vibrante para modo oscuro */
  font-weight: 700;
}

/* Correcciones de iconos y elementos interactivos */
body.dark .navbar-toggler-icon,
body.dark .ir-arriba,
body.dark .toogleContainer,
body.dark .flags-lang,
body.dark .flags {
  background-color: transparent !important;
}

/* Fix específico para el botón "Volver arriba": Sólido y del tamaño de los botones del carrusel */
body.dark .ir-arriba .fa-circle {
  color: #00bcd4 !important; /* Círculo cyan sólido */
}

body.dark .ir-arriba .fa-arrow-up,
body.dark .ir-arriba .fa-arrow-up:before {
  color: #13161c !important; /* Flecha oscura sobre fondo cyan */
}

/* Estilo para el interruptor (switch) de modo oscuro */
body.dark .sliderContrast {
  box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.4) !important;
}

body.dark .sliderContrast:before {
  background-color: #00bcd4 !important;
}

/* Pausa carrusel en modo oscuro */
body.dark .slick-autoplay-toggle-button {
  color: #00bcd4 !important;
  background-color: #1e2229 !important;
  border: 1px solid rgba(0, 188, 212, 0.3) !important;
  border-radius: 8px;
}

body.dark .slick-autoplay-toggle-button:hover {
  background-color: #00bcd4 !important;
  color: #13161c !important;
}

/* Asegurar que los enlaces en el sideNav se vean bien */
body.dark #sideNav .nav-link {
  color: rgba(255, 255, 255, 0.6) !important;
  background-color: transparent !important;
  border-left: 5px solid transparent !important; /* Indicador lateral izquierdo */
  padding: 0.5rem 1rem !important; /* Sincronización de padding con modo claro */
  transition: all 0.3s ease !important;
}

body.dark #sideNav .nav-link:hover,
body.dark #sideNav .nav-link.active {
  color: #00bcd4 !important;
  background-color: rgba(
    0,
    188,
    212,
    0.05
  ) !important; /* Resalte suave en cyan */
  border-left-color: #00bcd4 !important; /* Accent recto y grueso en cyan */
}

/* --- Mejoras Menú Hamburguesa en Modo Oscuro --- */

/* Borde visible para el botón del menú */
body.dark .navbar-toggler {
  border: 2px solid #00bcd4 !important;
  border-radius: 8px !important;
}

/* Color del icono de hamburguesa */
body.dark .navbar-toggler-icon {
  filter: brightness(0) invert(1) !important; /* Hacer las líneas blancas */
  opacity: 0.8;
}

/* Fondo para el menú desplegado (evitar que sea todo plano) */
@media screen and (max-width: 991px) {
  body.dark #navbarSupportedContent {
    background-color: #1e2229 !important; /* Tono de gris carbón para profundidad */
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  }

  body.dark #navbarSupportedContent .nav-link {
    border-bottom: none !important; /* Quitar líneas de separación */
    transition: background-color 0.2s ease;
  }

  body.dark #navbarSupportedContent .nav-link:hover {
    background-color: rgba(0, 188, 212, 0.1) !important;
    color: #00bcd4 !important;
  }
}

/* Iconos sociales en modo oscuro */
body.dark .social-icons a {
  background-color: #1e2229 !important;
  border: 1px solid rgba(0, 188, 212, 0.3) !important;
  color: #00bcd4 !important; /* Iconos en cyan para mejor visibilidad */
}

body.dark .social-icons a:hover {
  background-color: #00bcd4 !important;
  color: #13161c !important;
  border-color: #00bcd4 !important;
}

/* --- Carrusel de Eventos en modo oscuro --- */
body.dark .events-carousel .img-responsive {
  background-color: #1e2229;
}

body.dark .events-carousel:not(.slick-initialized) {
  background: linear-gradient(90deg, #1a1e24 25%, #2c323a 50%, #1a1e24 75%);
  background-size: 200% 100%;
}

body.dark .events-carousel .slick-dots li button:before,
body.dark .events-carousel .slick-dots li button .slick-dot-icon:before {
  color: #00bcd4 !important;
  opacity: 0.4;
}

body.dark .events-carousel .slick-dots li.slick-active button:before,
body.dark
  .events-carousel
  .slick-dots
  li.slick-active
  button
  .slick-dot-icon:before {
  color: #00bcd4 !important;
  opacity: 1;
}

/* --- Research Focus Section en modo oscuro --- */
body.dark .research-box {
  background-color: #1a1e24 !important;
  border-color: #2c323a !important;
  border-left-color: #00bcd4 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

body.dark .research-box h3 {
  color: #00bcd4 !important;
}

body.dark .research-box p {
  color: rgba(255, 255, 255, 0.8) !important;
}

body.dark .research-link-chip {
  background-color: #2c323a !important;
  border-color: #00bcd4 !important;
  color: #00bcd4 !important;
}

body.dark .research-link-chip:hover,
body.dark .research-link-chip:focus {
  background-color: #00bcd4 !important;
  color: #13161c !important;
  box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3) !important;
}

/* --- Miniaturas de diplomas en modo oscuro --- */
body.dark .diploma-thumbnail-link {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark .diploma-thumbnail-link:hover,
body.dark .diploma-thumbnail-link:focus {
  box-shadow: 0 6px 20px rgba(0, 188, 212, 0.3);
  border-color: #00bcd4;
}

body.dark .diploma-label {
  background-color: #1e2229 !important;
  color: #00bcd4 !important;
}

body.dark .diploma-thumbnail-link:hover .diploma-label,
body.dark .diploma-thumbnail-link:focus .diploma-label {
  background-color: #00bcd4 !important;
  color: #13161c !important;
}