/* ==========================================================
   Interruptor de modo claro / oscuro - foro.pesretro.net
   Agregado por Lucas - no forma parte del tema original de MyBB
   ========================================================== */

/* --- Apariencia del interruptor (switch) --- */
.theme_switch_container {
	display: inline-block;
	float: left;
	margin: 2px 14px 0 0;
}

.theme_switch {
	position: relative;
	display: inline-block;
	width: 46px;
	height: 22px;
	vertical-align: middle;
	cursor: pointer;
}

.theme_switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.theme_switch_slider {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #666;
	border: 1px solid #222;
	border-radius: 22px;
	transition: background-color .2s ease, border-color .2s ease;
}

.theme_switch_slider:before {
	content: "\2600";
	position: absolute;
	height: 16px;
	width: 16px;
	left: 2px;
	top: 2px;
	background: #fff;
	color: #d59f00;
	border-radius: 50%;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
	transition: transform .2s ease, background-color .2s ease, color .2s ease;
}

.theme_switch input:checked + .theme_switch_slider {
	background: #14181d;
	border-color: #000;
}

.theme_switch input:checked + .theme_switch_slider:before {
	transform: translateX(24px);
	content: "\263E";
	background: #2c3542;
	color: #cfd8e3;
}

.theme_switch input:focus + .theme_switch_slider {
	box-shadow: 0 0 0 2px rgba(0, 114, 188, 0.6);
}

/* ==========================================================
   Modo oscuro (html.dark_mode)
   ========================================================== */

html.dark_mode {
	color-scheme: dark;
}

html.dark_mode body {
	background: #15181c;
	color: #d5d8dc;
}

html.dark_mode #container {
	color: #d5d8dc;
}

html.dark_mode #content {
	background: #15181c;
}

html.dark_mode #logo {
	background: #1b1e23;
	border-bottom: 1px solid #000;
}

html.dark_mode a:link,
html.dark_mode a:visited {
	color: #4da3ff;
}

html.dark_mode a:hover,
html.dark_mode a:active {
	color: #7fc0ff;
}

html.dark_mode table {
	color: #d5d8dc;
}

html.dark_mode .tborder {
	background: #1c1f24;
	border: 1px solid #333;
}

html.dark_mode .trow1 {
	background: #1c1f24;
	border-color: #2c2f33 #101214 #101214 #2c2f33;
}

html.dark_mode .trow2 {
	background: #22262b;
	border-color: #2c2f33 #101214 #101214 #2c2f33;
}

html.dark_mode .trow_sep {
	background: #262a2f;
	color: #d5d8dc;
	border-bottom: 1px solid #101214;
}

html.dark_mode .trow_shaded {
	background: #3a1f22;
	border-color: #4a2a2d #201012 #201012 #4a2a2d;
}

html.dark_mode fieldset {
	border-color: #333;
}

html.dark_mode fieldset.trow1,
html.dark_mode fieldset.trow2 {
	border-color: #3a3d42;
}

html.dark_mode .tfoot {
	background: #1f2226;
	color: #aeb3b8;
	border-top: 1px solid #000;
}

html.dark_mode .tfoot a:link,
html.dark_mode .tfoot a:visited {
	color: #c3c8cd;
}

html.dark_mode #panel .lower {
	background: #1f2226;
	color: #9aa0a6;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

html.dark_mode #panel .lower a:link,
html.dark_mode #panel .lower a:visited,
html.dark_mode #panel .lower a:hover,
html.dark_mode #panel .lower a:active {
	color: #c3c8cd;
}

html.dark_mode #footer .upper {
	background: #1b1e23;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

html.dark_mode #footer .lower {
	color: #9aa0a6;
}

html.dark_mode #footer .lower a:link,
html.dark_mode #footer .lower a:visited {
	color: #c3c8cd;
}

html.dark_mode #footer .lower a:hover,
html.dark_mode #footer .lower a:active {
	color: #ffffff;
}

html.dark_mode #footer .lower #current_time {
	color: #7a8087;
}

html.dark_mode input.textbox,
html.dark_mode textarea,
html.dark_mode select {
	background: #22262b;
	color: #d5d8dc;
	border: 1px solid #3a3d42;
}

html.dark_mode input.error,
html.dark_mode textarea.error,
html.dark_mode select.error {
	border-color: #f30;
}

html.dark_mode .editor {
	background: #1c1f24;
	border-color: #333;
}

html.dark_mode .editor_control_bar,
html.dark_mode .post .editor_control_bar {
	background: #22262b;
	border-color: #333;
}

html.dark_mode .popup_menu {
	background: #1c1f24;
	border-color: #333;
}

html.dark_mode .popup_menu .popup_item {
	background: #22262b;
	color: #d5d8dc;
}

html.dark_mode .popup_menu .popup_item:hover {
	background: #0072BC;
	color: #fff;
}

html.dark_mode blockquote {
	background: #1c1f24;
	border-color: #333;
}

html.dark_mode blockquote cite {
	border-bottom-color: #333;
}

html.dark_mode .codeblock {
	background: #1c1f24;
	border-color: #333;
}

html.dark_mode .codeblock .title {
	border-bottom-color: #333;
}

html.dark_mode hr {
	background-color: #333;
}

html.dark_mode .highlight {
	background: #4a4300;
	color: #fff;
}

html.dark_mode .modal {
	background: #1c1f24;
	color: #d5d8dc;
}

html.dark_mode .post .post_author {
	background: #1c1f24;
	border-top-color: #333;
	border-bottom-color: #333;
}

html.dark_mode .post .post_author div.author_avatar img {
	background: #22262b;
	border-color: #333;
}

html.dark_mode img.attachment {
	border-color: #3a3d42;
}

html.dark_mode .modqueue_message {
	background: #1c1f24;
	border-color: #333;
}

html.dark_mode .modqueue_meta {
	color: #aeb3b8;
}

html.dark_mode .modqueue_mass li a:hover {
	background: #22262b;
}

html.dark_mode #search input.textbox,
html.dark_mode #search input.button {
	border-color: #000;
}

/* ---- Barra de titulo de categoria/subforo (ej. "Acerca del Foro PES Retro") ---- */
html.dark_mode .thead {
	background: #1b2733 !important;
	color: #e8ecf1 !important;
	border-bottom: 1px solid #000 !important;
}

html.dark_mode .thead a:link,
html.dark_mode .thead a:visited {
	color: #e8ecf1 !important;
}

html.dark_mode .thead a:hover,
html.dark_mode .thead a:active {
	color: #7fc0ff !important;
}

html.dark_mode .tcat {
	background: #1c1f24 !important;
	color: #d5d8dc !important;
	border-top: 1px solid #333 !important;
	border-bottom: 1px solid #000 !important;
}

html.dark_mode .tcat a:link,
html.dark_mode .tcat a:visited,
html.dark_mode .tcat a:hover,
html.dark_mode .tcat a:active {
	color: #d5d8dc !important;
}

/* ---- Paginacion (numeros de pagina 1, 2, 3...) ---- */
html.dark_mode .pagination a {
	background: #22262b !important;
	border-color: #3a3d42 !important;
	color: #d5d8dc !important;
}

html.dark_mode .pagination .pagination_current {
	color: #f0f0f0 !important;
}

html.dark_mode .pagination a:hover {
	background: #0072BC !important;
	color: #fff !important;
	border-color: #003a5c !important;
}

/* ---- Botones de accion en los posts (Email, MP, Editar, Responder, Citar...) ---- */
html.dark_mode .postbit_buttons a:link,
html.dark_mode .postbit_buttons a:visited,
html.dark_mode .postbit_buttons a:hover,
html.dark_mode .postbit_buttons a:active {
	background: #22262b !important;
	border-color: #3a3d42 !important;
	color: #d5d8dc !important;
}

html.dark_mode .postbit_buttons a:hover {
	border-color: #0072BC !important;
}

/* ---- Migas de pan (Foro > Categoria > Tema) ---- */
html.dark_mode .navigation {
	color: #aeb3b8;
}

html.dark_mode .navigation .active {
	color: #f0f0f0;
}

/* ---- Icono de expandir/contraer categorias (junto al titulo del subforo) ---- */
html.dark_mode .expcolimage,
html.dark_mode .tcat_menu > .expcolimage {
	filter: invert(1) brightness(1.6);
}

/* ---- Fondo del contenedor de botones de post (post_controls) ---- */
html.dark_mode .post_controls {
	background: #22262b !important;
	border-bottom: 1px solid #3a3d42 !important;
}

html.dark_mode .post.unapproved_post .post_controls {
	border-top-color: #7a3d3d !important;
}

/* ---- Editor de texto (CKEditor): barra de herramientas ---- */
html.dark_mode .cke_chrome {
	border-color: #3a3d42 !important;
}

html.dark_mode .cke_top {
	background: #1c1f24 !important;
	border-bottom-color: #3a3d42 !important;
}

html.dark_mode .cke_bottom {
	background: #1c1f24 !important;
	border-top-color: #3a3d42 !important;
}

/* Nota: no forzamos filter: invert() sobre el area de escritura
   (.cke_wysiwyg_frame / .cke_contents iframe) porque el editor ya
   se pone en modo oscuro desde su propia configuracion. */