/* ==========================================
   1. ESTRUCTURA Y VARIABLES
   ========================================== */
:root {
    --transition-speed: 0.3s;
}

body {
    transition: background-color var(--transition-speed), color var(--transition-speed);
    background: #000000 !important;
}


/* ==========================================
   2. MAGIA DEL MODO OSCURO (INVERSIÓN GLOBAL)
   ========================================= */



.theme-dark {
    /* background-color: #121212 !important; */
    filter: invert(1) hue-rotate(180deg);
}

.theme-dark body {
    /* Al invertirse, el blanco (#fff) se convertirá en negro */
    background-color: #ffffff !important; 
    color: #333333 !important; 
}

/* Re-invertir elementos multimedia para que se vean normales */
.theme-dark img, 
.theme-dark iframe, 
.theme-dark .mycode_img,
.theme-dark .avatar,
.theme-dark .ps_status,
.theme-dark .slider,
.theme-dark .subforum_icon {
    filter: invert(1) hue-rotate(180deg) brightness(1.1) !important;
}

/* ==========================================
   3. HEADERS, PANEL Y TEXTOS DE SESIÓN (FIX)
   ========================================= */

/* Forzamos que el área superior tenga colores claros para que la inversión los haga oscuros */
.theme-dark #header,
.theme-dark #logo,
.theme-dark #panel,
.theme-dark #panel .upper,
.theme-dark #panel .lower,
.theme-dark .thead, 
.theme-dark .tcat {
    background: #e5e5e5 !important; 
    filter: none !important; 
	border-top: 1px solid #d6d6d6;
	border-bottom: 1px solid #d6d6d6;
}

/* Degradados claros (se verán oscuros al invertir) */
.theme-dark #logo,
.theme-dark #header {
    background: linear-gradient(to bottom, #f5f5f5 0%, #e0e0e0 100%) !important;
}

.theme-dark .thead {
    background: linear-gradient(to bottom, #eeeeee 0%, #dddddd 100%) !important;
}

/* --- SOLUCIÓN PARA TEXTOS NEGROS EN EL HEADER --- */
/* Forzamos que el texto sea negro puro antes de invertir para que sea BLANCO puro después */
.theme-dark #panel,
.theme-dark #panel .upper,
.theme-dark #panel .lower,
.theme-dark #panel .welcome,
.theme-dark .thead, 
.theme-dark .tcat,
.theme-dark .smalltext {
    color: #000000 !important; /* Se vuelve BLANCO tras invertir */
}

/* Enlaces del panel y headers (Hora, Miembros, Cerrar sesión, etc.) */
.theme-dark #panel a,
.theme-dark #header a,
.theme-dark .thead a,
.theme-dark .tcat a {
    color: #1a1a1a !important; /* Se vuelve BLANCO/GRIS CLARO tras invertir */
    font-weight: bold;
}

/* Arreglo para inputs y botones que puedan quedar invisibles */
.theme-dark input.textbox, 
.theme-dark textarea, 
.theme-dark select {
    background: #fff !important; 
    color: #000 !important; /* Se invierten a fondo oscuro texto claro */
}

/* ==========================================
   4. EL INTERRUPTOR (SWITCH)
   ========================================== */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    float: right;
    top: 10px;
    z-index: 1000;
}

.switch input { opacity: 0; width: 0; height: 0; }

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

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    transition: 0.4s;
    background: white url(https://i.ibb.co/FxzBYR9/night.png) no-repeat center;
    background-size: 16px;
    border-radius: 50%;
}

input:checked + .slider { background-color: #2196f3; }

input:checked + .slider:before {
    transform: translateX(26px);
    background: white url(https://i.ibb.co/7JfqXxB/sunny.png) no-repeat center;
    background-size: 16px;
}

/* ==========================================
   5. AJUSTES DE FILAS Y POSTS
   ========================================== */

.theme-dark .trow1, 
.theme-dark .trow2 {
    background-image: none !important;
    background-color: #ffffff !important; /* Se verá oscuro por la inversión */
    color: #000 !important; /* Texto se verá claro */
}

/* Fix para cuadros de estadísticas y MyCode */
.theme-dark .stats, 
.theme-dark .doc, 
.theme-dark .download {
    border: 1px solid #444 !important;
    background: #f0f0f0 !important; 
    color: #111 !important;
}



/* Re-invertir el bloqueador de ventanas modales/popups */
.theme-dark .blocker {
    background-color: rgba(255,255,255,0.75) !important; /* Mantendrá el tono oscuro */
}


/* Esto hará que el marco del avatar se vea oscuro al invertirse */
.theme-dark .post .post_author div.author_avatar img {
    background: #222222 !important; /* Se invertirá a Negro */
    border-color: #222222 !important; /* Se invertirá a Gris muy claro/blanco (ajusta según prefieras) */
    padding: 5px;
}

.deleted_post_collapsed {
	border-top: 3px solid #d6d6d6;
	padding: 15px;
}








/* ==========================================
   FIX PARA EL CUADRO DE ESCRITURA (IFRAME)
   ========================================== */

/* 1. Evitamos que el área donde se escribe se vuelva a invertir */
.theme-dark .cke_contents iframe,
.theme-dark .cke_wysiwyg_frame,
.theme-dark .cke_wysiwyg_div {
    /* Si el padre ya está invertido, esto lo devuelve al estado invertido simple (oscuro) */
    filter: none !important; 
    background-color: #ffffff !important; /* Se verá negro por la inversión del body/html */
}

/* 2. Si el fondo sigue blanco, probamos la técnica de "cancelación" */
.theme-dark .cke_contents {
    filter: none !important;
    background-color: #ffffff !important; /* Blanco en CSS = Negro en pantalla */
}

/* 3. Aseguramos que el texto que escribes sea negro en el código (blanco en pantalla) */
.theme-dark .cke_editable,
.theme-dark iframe.cke_wysiwyg_frame {
    color: #000000 !important;
}






/* ==========================================
   AJUSTE DE FILAS (PARA INVERSIÓN)
   ========================================== */

/* Fila 1: Gris muy claro -> Se verá Gris casi negro */
.theme-dark .trow1 {
    background: #f5f5f5 !important;
    border: 1px solid !important;
    /* Bordes claros para que al invertir se vean oscuros/sutiles */
    border-color: #ffffff #dddddd #dddddd #ffffff !important;
}

/* Fila 2: Gris un poco más oscuro -> Se verá un poco más claro que la trow1 */
.theme-dark .trow2 {
    background: #efefef !important;
    border: 1px solid !important;
    border-color: #ffffff #dddddd #dddddd #ffffff !important;
}

/* Fila Shaded (Rosa): Al invertir, el rosa se convierte en un azul/cian oscuro */
.theme-dark .trow_shaded {
    background: #ffdde0 !important;
    border: 1px solid !important;
    border-color: #ffffff #ffb8be #ffb8be #ffffff !important;
}

/* Aseguramos que el texto dentro de estas filas sea negro puro 
   para que el resultado final tras la inversión sea blanco puro */
.theme-dark .trow1, 
.theme-dark .trow2, 
.theme-dark .trow_shaded {
    color: #000000 !important;
}