/* Estilos del contenedor del botón de toggle */
.dark-mode-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: transparent; /* Aseguramos que no tenga fondo */
    border: none; /* Quitamos cualquier borde */
    border-radius: 0; /* Ya no es un círculo en sí mismo */
    width: 70px; /* Ancho para el contenedor total (ajusta si los círculos son más grandes) */
    height: 100px; /* Mayor altura para contener dos círculos verticalmente */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    padding: 0;
    /* QUITAMOS LA SOMBRA Y LAS TRANSICIONES DE SOMBRA DE AQUÍ */
}

/* Estilos base para los círculos individuales (blanco y negro) */
.dark-mode-toggle .circle-white,
.dark-mode-toggle .circle-black {
    border-radius: 50%;
    margin: 5px 0; /* Separación vertical entre ellos */
    /* Transiciones suaves para los cambios de tamaño y color */
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out,
                background-color 0.3s ease-in-out, margin 0.3s ease-in-out,
                box-shadow 0.3s ease-in-out; /* Agregamos transición para la sombra */
}

/* Estilos específicos para el círculo blanco en MODO CLARO (estado por defecto) */
.dark-mode-toggle .circle-white {
    background-color: #ffffff;
    width: 40px; /* Tamaño GRANDE en modo claro */
    height: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra para el círculo activo */
}

/* Estilos específicos para el círculo negro en MODO CLARO (estado por defecto) */
.dark-mode-toggle .circle-black {
    background-color: #080808;
    width: 20px; /* Tamaño PEQUEÑO en modo claro */
    height: 20px;
    box-shadow: none; /* Sin sombra para el círculo inactivo */
}


/* Círculo blanco en MODO OSCURO: Se hace pequeño y pierde la sombra */
body.dark-mode .dark-mode-toggle .circle-white {
    background-color: #f0f0f0; /* Color claro en modo oscuro para el "sol" */
    width: 20px;
    height: 20px;
    box-shadow: none; /* Sin sombra para el círculo inactivo */
}

/* Círculo negro en MODO OSCURO: Se hace grande y gana la sombra */
body.dark-mode .dark-mode-toggle .circle-black {
    background-color: #080808;
    width: 40px;
    height: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* Sombra para el círculo activo */
}

/* ---------------------------------------------------- */
/* --- Estilos generales para el MODO OSCURO del SITIO --- */
/* (Mantén tus estilos existentes aquí) */
/* ---------------------------------------------------- */

body.dark-mode {
    background-color: #000;
    color: #f0f0f0;
}

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



body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #f0f0f0;
}

body.dark-mode .site-header {
    background-color: #333;
    color: #f0f0f0;
    border-bottom-color: #555;
}

body.dark-mode .site-footer {
    background-color: #333;
    color: #f0f0f0;
    border-top-color: #555;
}

body.dark-mode .entry-content {
    background-color: #2b2b2b;
    color: #f0f0f0;
}

body.dark-mode .widget {
    background-color: #2b2b2b;
    color: #f0f0f0;
    border: 1px solid #444;
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    position: absolute !important;
    height: 1px;
    width: 1px;
    word-wrap: normal !important;
}


body.dark-mode .kw-details-title {
    
    color: white !important;   
    
}

body.dark-mode .pagination-item-active-span, 
body.dark-mode .pagination-item, 
body.dark-mode .pagination-item-link,
body.dark-mode li.pagination-item {
    color: rgb(255, 255, 255) !important;
	transition: color 0.3s ease;

}

body.dark-mode .pagination-item-link {
  color: white;
}

body.dark-mode .pagination-item-span {
  color: white;
}