/* ====================================================
   1. SOBRESCRIBIR VARIABLES DE BLOCKSY
   ==================================================== */
html[data-theme="dark"] {
    /* Forzamos las variables nativas del tema */
    --theme-palette-color-8: #121212 !important; /* Fondo oscuro */
    --theme-text-color: #ffffff !important;      /* Texto blanco puro */
    --borde-oscuro: #333333;
}

:root{
	--theme-icon-size: 33px;
}

/* ====================================================
   2. ESTILOS DEL BOTÓN CON SVG
   ==================================================== */
.moi-btn {
    background: transparent;
    border: none; /* Quitamos el borde para que se vea como un icono nativo del menú */
    cursor: pointer;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: transform 0.3s ease;
}

.moi-icon svg{
	width: var(--theme-icon-size, 15px);
	height: var(--theme-icon-size, 15px);
}

.moi-btn:hover {
    transform: scale(1.1); /* Pequeño efecto de zoom al pasar el ratón */
}

/* Control de qué SVG mostrar */
html[data-theme="dark"] .moi-sun { display: inline-flex; }
html[data-theme="dark"] .moi-moon { display: none; }
html:not([data-theme="dark"]) .moi-sun { display: none; }
html:not([data-theme="dark"]) .moi-moon { display: inline-flex; }


/* ====================================================
   3. FONDOS (Aplicando la variable de Blocksy)
   ==================================================== */
/* Aplicamos el fondo a body, main, section, nav y header, EXCLUYENDO el footer */
html[data-theme="dark"] body:not(footer),
html[data-theme="dark"] main:not(footer main),
html[data-theme="dark"] section:not(footer section),
html[data-theme="dark"] nav:not(footer nav),
html[data-theme="dark"] header:not(footer header) {
    background-color: var(--theme-palette-color-8) !important;
}

/* Transparencia para contenedores internos de Blocksy (para que no tapen el fondo) */
html[data-theme="dark"] .ct-container,
html[data-theme="dark"] .entry-content,
html[data-theme="dark"] div:not(footer div) {
    background-color: transparent !important;
}


/* ====================================================
   4. TEXTOS (La mayoría de etiquetas, excluyendo footer)
   ==================================================== */
/* Usamos la variable de texto de Blocksy para forzar el blanco */
html[data-theme="dark"] p:not(footer p),
html[data-theme="dark"] span:not(footer span),
html[data-theme="dark"] h1:not(footer h1),
html[data-theme="dark"] h2:not(footer h2),
html[data-theme="dark"] h3:not(footer h3),
html[data-theme="dark"] h4:not(footer h4),
html[data-theme="dark"] h5:not(footer h5),
html[data-theme="dark"] h6:not(footer h6),
html[data-theme="dark"] li:not(footer li),
html[data-theme="dark"] a:not(footer a),
html[data-theme="dark"] strong:not(footer strong),
html[data-theme="dark"] em:not(footer em),
html[data-theme="dark"] blockquote:not(footer blockquote) {
    color: var(--theme-text-color) !important;
}

/* Efecto suave para los enlaces al pasar el ratón */
html[data-theme="dark"] a:not(footer a):hover {
    opacity: 0.8;
}