/* Estilos para el modo oscuro */
body.dark-mode {
    background-color: #02270D !important;
    color: #F8F7F0 !important;
}

/* Puedes personalizar otros elementos, por ejemplo: */
body.dark-mode header, body.dark-mode #inner-wrap, body.dark-mode .entry-content-wrap, body.dark-mode  .entry-hero-container-inner, body.dark-mode .wp-site-blocks .hero-section-overlay, body.dark-mode #masthead {
    background-color: #02270D !important;
    color: #F8F7F0 !important;}
body.dark-mode p, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5{
        color: #F8F7F0 !important;}

body.dark-mode .entry.single-entry {
    box-shadow: unset !important;
}

body.dark-mode #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.item-hidden-above):not(.site-main-header-wrap), body.dark-mode #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.item-hidden-above) > .site-header-row-container-inner {
    background-color: #02270D !important;
}

.switch {
  position: fixed;
  display: inline-block;
  width: 60px;
  height: 34px;
  bottom: 4px;
  left: 0px;
  z-index: 999;
}

/* Escondemos el checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 6px;
  left: 6px;
  right: 0;
  bottom: 0;
  background-color: #25221d;
  transition: 0.4s;
  border-radius: 34px;
}

/* El círculo del switch */
.slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 2px;
  bottom: 2px;
  background-color: #F8F7F0;
  transition: 0.4s;
  border-radius: 50%;
}

/* Cuando el checkbox esté checked, movemos el círculo */
.switch input:checked + .slider:before {
  transform: translateX(26px);
}

/* Cambiamos el fondo del switch cuando está activo */
.switch input:checked + .slider {
  background-color: #25221d;
}

/* Posicionar los íconos */
.icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #c87026;
  pointer-events: none;
}

.icon.sun {
  left: 6px;
}

.icon.moon {
  right: 8px;
}