@font-face {
	font-family: 'panchang';
	src: url(https://dl.dropboxusercontent.com/scl/fi/qffpn1gia54yiasw5n783/Panchang-Regular.otf?rlkey=flricalnsyeahgm6akf4d6tec&st=35bhi8sc&dl=0) format('opentype');
}

@font-face {
	font-family: 'panchang';
	src: url(https://dl.dropboxusercontent.com/scl/fi/ga4514964894jn3ymsyii/Panchang-Light.otf?rlkey=r9mp7vp4adubdrpgnfjlsurn2&st=z4f6ljk9&dl=0) format('opentype');
	font-weight: 100;
}

@font-face {
	font-family: 'panchang';
	src: url(https://dl.dropboxusercontent.com/scl/fi/5ji5h0a6hcx3nj7ba0dx3/Panchang-Semibold.otf?rlkey=hyu17wya3ea46wa0upqaa889x&st=fcjovcyl&dl=0) format('opentype');
	font-weight: 600;
}

@font-face {
	font-family: 'panchang';
	src: url(https://dl.dropboxusercontent.com/scl/fi/pefdergt5lgt1yowscsjs/Panchang-Bold.otf?rlkey=r79ot3y48xev0562fym3bhjyq&st=4lc8nvxy&dl=0) format('opentype');
	font-weight: 900;
}

@font-face {
	font-family: 'naori';
	src: url(https://dl.dropboxusercontent.com/scl/fi/y10l4he3smyf99woz6vw1/Naori.otf?rlkey=be4q02ruwcnjzjj20bm80tii4&st=8yqrwec1&dl=0) format('opentype');
}

@font-face {
	font-family: 'fira';
	src: url(https://dl.dropboxusercontent.com/scl/fi/n6zo8wnwclwzctpbzolzb/FiraSans-Thin.ttf?rlkey=55w13xd33uaxlvvn0yl96z0p7&st=rsbiyzkn&dl=0) format('opentype');
}

@font-face {
	font-family: 'aero';
	src: url(https://dl.dropboxusercontent.com/scl/fi/iy8tlco95nm2x9y6y3cfn/fragordemoversionregular-wyxq9.otf?rlkey=qyujz3pwqqrlxe40j0s40vrfn&st=d2ozrpsu&dl=0) format('opentype');
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cousine:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
	--nav_size: 40px;
	--width_general: 90vw;
	--margen_general: 10vh auto;
	--borde_general: 1px solid color-mix(in srgb, var(--negro), white 20%);

	--negro: #121212;
	--blanco: #FFFFFF;
	--acento: color-mix(in srgb, #574737, white 10%);

	--texto: "Montserrat", sans-serif;
	--deco: naori;
	--deco2: aero;
	--titulo: panchang;
	--mono: "Cousine", monospace;
	--links: "Cousine", monospace;
	--botones: fira;

	--fs_xs: .5rem;
	--fs_s: .75rem;
	--fs_e: 1rem;
	--fs_m: 3rem;
	--fs_l: 4rem;
	--fs_xl: 10rem;

	&:has(input[name="color-scheme"][value="light"]:checked) {
		color-scheme: light;
	}

	&:has(input[name="color-scheme"][value="dark"]:checked) {
		color-scheme: dark;
	}

}

/* === RESET Y BASE === */
@layer reset {

	*,
	::after,
	::before {
		box-sizing: border-box;
		margin: 0;
		padding: 0
	}

	:where(html, body) {
		min-height: 100vh
	}

	:where(ul, ol, menu) {
		list-style: none;
		padding-left: 0
	}

	:where(h1, h2, h3, h4, h5, h6) {
		margin: 0;
		padding: 0;
		font-size: inherit;
		font-weight: inherit;
		line-height: inherit
	}

	:where(img, svg, video, canvas, picture) {
		display: block;
		max-width: 100%
	}

	:where(a, button, input, textarea, select) {
		color: inherit;
		font: inherit;
		text-decoration: none
	}

	:where(button, input[type=button], input[type=reset], input[type=submit]) {
		cursor: pointer
	}

	div[style="height:3px"] {
		display: none !important
	}
}

@layer base {
	body {
		font: 1rem var(--texto);
		width: 100%;
		min-height: 100vh;
		background-color: var(--negro);
		scroll-behavior: smooth;
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	.avatar {
		&>img {
			object-fit: cover;
			height: 100%;
			width: 100%;
		}

		&>a>img {
			object-fit: cover;
			height: 100%;
			width: 100%;
		}
	}

	.generatednavbar {
		li {
			list-style: none;
			padding: 0;
			margin: 0;
		}
	}

}

/* === Componentes === */

@layer components {

	/* === Botones === */
	.button {

		&:is(a) {
			/* Estilos específicos cuando es un enlace a> */
		}

		&:is(button) {
			/* Estilos específicos cuando es un elemento button> */
		}

		&:is(input) {
			/* Estilos específicos cuando es un input (type="button/submit") */
		}

		&:has(> i:only-child) {
			aspect-ratio: 1;
		}

		&:has(> i:not(:only-child)) {
			gap: 0.5rem;
		}

		/* Botón con solo texto */
		&:not(:has(> i)) {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		/* Botones en contenedor especial */
		.form-buttons & {
			padding: .5rem;
			background: var(--color_grupo);
			color: white;
			font: 12px var(--texto);
			text-transform: uppercase;
			border: 0;
		}

		.mark-buttons & {
			padding: .5rem;
			background: var(--color_grupo);
			color: white;
			font: 12px var(--texto);
			text-transform: uppercase;
			border: 0;
		}

		/* Estados interactivos */
		&:hover {
			/* Estilos hover */
		}

		&:active {
			/* Estilos active */
		}

		&:focus-visible {
			/* Estilos focus */
		}

		&[disabled] {
			/* Estilos disabled */
		}
	}

	input {
		&:focus {
			border: var(--borde_general);
		}

		&[type="button"] {}

		&[type="text"] {
			border: var(--borde_general);
			padding: .5rem;
			flex-grow: 1;
		}

		&[type="submit"] {

			/* Estilos para botones de envío */
			&:hover {
				transform: scale(0.98);
			}
		}
	}

	/* === SELECT === */
	.select {
		select {

			&,
			&::picker(select) {
				appearance: base-select;
				padding: 5%;
				width: 15em;
			}
		}
	}

	/* === SORTBOX === */
	#sort-box {
		display: flex;

		.button {}

		.sort-form {
			display: flex;
			gap: .75rem;
			align-items: center;

			form.forumline.sort-form {
				padding: 1%;
				margin: 1% 0;
				width: 100%;
			}

			b {}

			.group {
				.group {
					#sort_order_d {}

					label {}
				}
			}

			.button {}
		}
	}

	/* === JUMPBOX === */

	.jumpbox {
		label {
			display: flex;
			gap: 1em;
			padding: 1em;
			align-items: center;

			span {}

			.jumpbox-wrap {
				display: flex;
				/* border: var(--borde_general); */
				border-radius: 0px;
				gap: 1em;
				align-items: center;

				.select {
					select {
						padding: 1em;
						border: var(--borde_general);
						border-radius: 0px;
					}

					border: var(--borde_general);
					border-radius: 0px;
				}

				input {}

				.button {}
			}
		}
	}
}

/* NAVEGACIÓN */
button[popovertarget="menu_forum"] {
	--btn-size: var(--nav_size);
	--icon-size: var(--fs_e);
	--hover-elevation: -2px;
	--active-elevation: 0;

	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--btn-size);
	height: var(--btn-size);
	border: none;
	cursor: pointer;
	background-color: var(--acento);
	color: var(--blanco);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	font-family: var(--botones);

	&:hover {
		transform: translateY(var(--hover-elevation));

		&::after {
			transform: scale(1);
			opacity: 0.3;
		}
	}

	&:active {
		transform: translateY(var(--active-elevation));
	}

	& i {
		font-size: var(--icon-size);
		z-index: 1;
		transition: transform 0.3s ease;
	}

	&[popovertargetanchor="menu_forum"] {
		background-color: color-mix(in srgb, var(--acento), black 20%);

		& i {
			transform: rotate(90deg);
		}
	}
}

/* MENÚ DE NAVEGACIÓN */
.generatednavbar {
	--nav-item-size: var(--nav_size);
	--nav-icon-size: var(--fs_e);
	--nav-gap: 0.5rem;
	--tooltip-font: 0.8rem;

	display: grid;
	grid-template-columns: repeat(auto-fit, var(--nav-item-size));
	justify-content: center;
	gap: var(--nav-gap);
	padding: var(--nav-gap);
	background-color: color-mix(in srgb, var(--negro), transparent 95%);
	font-family: var(--texto);

	&>li:nth-child(2),
	&>li:nth-child(3) {
		display: none;
	}

	& a.mainmenu {
		display: grid;
		width: var(--nav-item-size);
		color: var(--negro);
		text-decoration: none;
		position: relative;
		transition: all 0.3s ease;
		overflow: hidden;

		&> :not(i) {
			display: none;
		}

		& i {
			font-size: var(--nav-icon-size);
			color: var(--negro);
			transition: all 0.3s ease;
		}

		&:hover {
			color: var(--blanco);
			transform: translateY(var(--hover-elevation));
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

			& i {
				color: var(--blanco);
				transform: scale(1.1);
			}
		}
	}

	/* Asignación de iconos*/
	#i_icon_mini_index::before {
		content: "f015";
	}

	#i_icon_mini_faq::before {
		content: "f293";
	}

	#i_icon_mini_search::before {
		content: "f52a";
	}

	#i_icon_mini_members::before {
		content: "f135";
	}

	#i_icon_mini_groups::before {
		content: "f1c3";
	}

	#i_icon_mini_profile::before {
		content: "f13e";
	}

	#i_icon_mini_message::before {
		content: "f12b";
	}

	#i_icon_mini_logout::before {
		content: "f134";
	}
}

/* TEMA OSCURO */
:root:has(input[name="color-scheme"][value="dark"]:checked) {
	button[popovertarget="menu_forum"] {
		&:hover {
			background-color: var(--acento);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
		}

		&[popovertargetanchor="menu_forum"] {
			background-color: color-mix(in srgb, var(--acento), white 20%);
		}
	}

	.generatednavbar {
		background-color: color-mix(in srgb, var(--blanco), transparent 95%);

		& a.mainmenu {
			color: var(--blanco);

			& i {
				color: var(--blanco);
			}

			&:hover {
				&::after {
					background-color: var(--blanco);
					color: var(--negro);
				}
			}
		}
	}
}


/* ==citas y spoiler y demas == */



/* === Header === */

@layer header {
	header {
		width: 100%;
		height: var(--nav_size);
		position: fixed;
		top: 0;
		left: 0;
		background: var(--negro);
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		align-items: center;
		justify-items: center;
		z-index: 999;

		.header_wrapper {
			align-content: center;

			&:first-of-type {
				justify-self: start;
			}

			&:last-of-type {
				justify-self: end;
				display: flex;
				align-items: center;
			}

			&:nth-of-type(2) {
				display: flex;
				gap: .25rem;
				width: 100%;
				justify-content: center;

				#breadcrumbs {
					display: flex;
					font-size: 0;

					&>a {
						font-size: .75rem;
						display: flex;
						align-items: center;
						gap: .25rem;

						&:before {
							content: "\ea50";
							font-family: boxicons;
						}
					}

					@media (max-width: 768px) {
						display: none;
					}
				}
			}
		}

		button {
			border: none;
			transition: all 0.3s;
			cursor: pointer;

			&:hover,
			&:active,
			&:focus {
				background-color: var(--color_grupo);
			}

			&:focus {
				border-color: var(--color_grupo);
			}

			&[popovertarget="menu_user"] {
				.avatar {
					height: var(--nav_size);
					width: var(--nav_size);
				}
			}
		}
	}

	[popover] {
		border: none;
		display: flex;
		flex-direction: column;
		transition: translate 0.3s ease-out, display 0.3s ease-out allow-discrete;
	}


	#menu_forum[popover] {
		width: 30vw;
		margin: 0;
		padding: 0;
		height: 100vh;
		translate: -31vw;

		&:popover-open {
			translate: 0;
		}

		&::backdrop {
			backdrop-filter: blur(3px);
			background-color: rgb(0 0 0 / 0%);
			transition: all 0.3s allow-discrete;
		}

		&:popover-open::backdrop {
			background-color: color-mix(in srgb, black, transparent 50%);
		}
	}

	#menu_notifications[popover] {
		width: 80vw;
		margin: var(--margen_general);
		padding: 1%;
		height: 80vh;
		translate: -100vw;
		border: var(--borde_general);

		&:popover-open {
			translate: 0;
		}
	}

	#menu_user[popover] {
		width: 30vw;
		margin: 0;
		padding: 0;
		height: 100vh;
		translate: 131vw;

		&:popover-open {
			translate: 70vw;
		}
	}


	@starting-style {
		#menu_forum[popover]:popover-open {
			translate: -31vw;

			&::backdrop {
				background-color: color-mix(in srgb, black, transparent 100%);
			}
		}

		#menu_notifications[popover]:popover-open {
			translate: -100vw;
		}

		#menu_user[popover]:popover-open {
			translate: 131vw;
		}
	}

	.menu-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.5rem;
	}

	.theme-selector {
		display: flex;
		gap: 1rem;
		align-items: center;
		background: var(--acento);
		padding: var(--fs_xs);
		justify-content: flex-end;
		font-family: var(--mono);

		input[type="radio"] {
			position: absolute;
			opacity: 0;
			width: 0;
			height: 0;
		}

		label {
			cursor: pointer;
			display: inline-flex;
			position: relative;

			i {
				transition: all 0.3s ease;
			}
		}
	}

	#header-banner {
		width: 100%;
		height: 100vh;
		background-image: linear-gradient(color-mix(in srgb, var(--color_grupo), transparent 90%), var(--negro));
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.header_img {
			mix-blend-mode: lighten;
			height: 200px;
			width: 200px;
		}

		a.header_title {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: var(--fs_xl);

			& span {
				line-height: 1;

				&:first-of-type {
					font-size: var(--fs_xl);
					font-family: var(--deco2);
					line-height: .5;
					text-transform: uppercase;
				}

				&:nth-of-type(2) {
					font: 900 calc(var(--fs_xl) * .7) var(--titulo);
					text-transform: uppercase;
					color: transparent;
					-webkit-text-stroke: 1px var(--blanco);
				}
			}
		}
	}

	#tablon {
		background: var(--negro);
		width: var(--width_general);
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1.5fr .5fr;
		gap: 1rem;

		& .modulo {

			&:has(.cronologia) {
				position: relative;
				background-color: var(--color_grupo);

				&>img {
					position: absolute;
					top: 0;
					left: 0;
					object-fit: cover;
					height: 100%;
					width: 100%;
					filter: grayscale(1) brightness(.5) contrast(1.2);
					mix-blend-mode: multiply;
				}

				& .cronologia {
					background: var(--negro);
					clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
					font: var(--fs_s) var(--titulo);
					text-transform: uppercase;
					width: 50%;
					padding-bottom: .5rem;
				}

				& .mision {
					padding: 2rem;
					display: flex;
					flex-direction: column;
					gap: 1rem;
					position: relative;

					&>a {
						font: var(--fs_e) var(--titulo);
						text-transform: uppercase;
					}

					&>span {
						text-align: justify;
					}
				}

			}

			&:has(.anuncio) {
				display: flex;
				flex-direction: column;
				gap: .5rem;

				&>a {
					background: var(--color_grupo);
					padding: .5rem .75rem;
					font: var(--fs_e) var(--titulo);
					text-transform: uppercase;
					text-align: center;
				}
			}

			&:has(.ultimotema) {
				grid-column: span 2;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 1rem;

				& .ultimotema {
					border: var(--borde_general);
					padding: .75rem 1rem;
				}
			}
		}

	}
}

/* === Footer === */

@layer footer {
	.leyendagrupos {
		font-size: 0;

		a {
			font: var(--fs_e) var(--titulo);
			text-transform: uppercase;
			display: flex;
			position: relative;

			&[href*="g3-"] {
				&::before {
					content: "\ef59";
					font: 2rem boxicons;
				}
			}

			&[href*="g4-"] {
				&::before {
					content: "\eb28";
					font: 2rem boxicons;
				}
			}

			&[href*="g5-"] {
				&::before {
					content: "\ef23";
					font: 2rem boxicons;
				}
			}

			&[href*="g6-"] {
				&::before {
					
					content: "\ed15";
					font: 2rem boxicons;
				}
			}

			&[href*="g7-"] {
				&::before {
					content: "\ec93";
					font: 2rem boxicons;
				}
			}
		}
	}

	#footer_widgets {
		--background_image: url(https://i.imgur.com/6JYtcNZ.png);

		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 2rem;
		padding: 2rem;
		background-image: var(--background_image);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;

		.widgetlogo {
			.titulo {
				font: var(--fs_m) var(--deco);
				display: flex;
				flex-direction: column;
				line-height: 1;

				span {
					font-size: calc(var(--fs_m)*1.3);
				}
			}

			& p {
				font-size: var(--fs_s);
				text-align: justify;
				margin-bottom: .5rem;
			}
		}
	}

	#page-footer {
		font: var(--fs_xs) var(--titulo);
		text-transform: uppercase;
		padding: 1rem;
		background: var(--negro);
		color: var(--blanco);

		.wrap {
			display: flex;
			align-items: center;

			.navbar {
				flex-grow: 1;

				.rightside {
					display: flex;
					justify-content: space-evenly;
				}
			}

			.copyright {
				display: flex;
				align-items: center;
				font-size: 0;
				gap: 1rem;

				&>a {
					font: var(--fs_xs) var(--mono);
					text-transform: uppercase;
				}
			}
		}
	}
}

/* === Subforos === */

@layer subforos {

	#index {
		width: var(--width_general);
		margin: var(--margen_general);
		background: var(--negro);

		.main-inner {
			display: flex;
			flex-direction: column;
			gap: 20vh;
		}
	}

	#wrap {
		background-color: var(--negro);
		padding: 10vh 0;
	}

	.forum {

		.category-title {
			/**general**/
			font: 900 var(--fs_l) var(--titulo);
			text-transform: uppercase;
			position: relative;
			display: flex;
			flex-direction: column;
			line-height: .8;

			#c7 & {
				font: 600 calc(var(--fs_e) * 1.5) var(--titulo);
				flex-direction: row;
				align-items: center;
				gap: 1rem;

				&::after {
					content: "";
					width: 2rem;
					height: .75rem;
					background: var(--acento);
				}

				&::before {
					content: "";
					min-width: 5rem;
					flex-grow: 1;
					height: .75rem;
					background: var(--acento);
				}
			}

			#c5 & {
				align-items: center;
				text-align: center;
				font-size: calc(var(--fs_l) * 1.8);

				&::after {
					content: "SUBTÍTULO";
					text-align: left;
					font: 600 var(--fs_s) var(--texto);
					text-transform: uppercase;
					width: 100%;
					padding: .5rem 1rem;
					background: var(--acento);
					margin-top: 5rem;
					clip-path: polygon(98% 0, 100% 50%, 100% 100%, 0 100%, 0 0);
				}
			}

			#c2 & {
				&::before {
					content: "ZONA DE USUARIOS";
					font: 600 var(--fs_s) var(--texto);
					text-transform: uppercase;
					width: 100%;
					border-bottom: var(--borde_general);
					padding: .5rem 0;
					letter-spacing: 2px;
					margin-bottom: 2rem;
				}
			}

			#c4 & {
				& span {
					font-size: calc(var(--fs_l) * 1.5);
					color: transparent;
					-webkit-text-stroke: 1px var(--blanco);
				}

				&::before {
					content: "PERSONAJES";
					font: 600 var(--fs_s) var(--texto);
					text-transform: uppercase;
					width: 100%;
					border-bottom: var(--borde_general);
					padding: .5rem 0;
					letter-spacing: 2px;
					margin-bottom: 2rem;
				}
			}

			/*acaba category-title*/
		}

		.forum-wrap {
			/*general*/
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
			justify-content: center;
			gap: 1rem;

			#c2 & {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 0;
				background-image: url(https://i.imgur.com/GloLpOo.gif);
				background-size: auto 100%;
				background-repeat: no-repeat;
				background-position: 10vw bottom;
			}

			#c5 & {
				display: flex;
				flex-direction: column;
				gap: 0;

				.cat-tabs {
					font: var(--fs_e) var(--titulo);
					text-transform: uppercase;
					cursor: pointer;
					display: flex;
					gap: 1rem;
					justify-content: flex-end;
					margin-bottom: -1.5rem;
					padding: .5rem 0;
					z-index: 1;
					background: var(--negro);
					clip-path: polygon(42% 0, 100% 0%, 100% 100%, 45% 100%);
				}
			}

			#c3 & {
				grid-template-columns: repeat(2, 1fr);
			}

			#c4 & {
				grid-template-columns: .5fr 1.5fr;
			}

			.forum-section {
				/*general*/
				display: grid;
				grid-template-rows: subgrid;
				grid-row: span 6;
				border: var(--borde_general);
				padding: 1rem;

				#c2 & {
					grid-column-start: 2;
					border: 0;
					border-bottom: var(--borde_general);
					grid-row: span 1;
				}

				#c5 & {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-row: span 3;
					padding: 0;
					border: 0;
				}

				#c3 & {
					&:first-of-type {
						grid-row: span 12;
					}

					&:last-of-type {
						grid-column: span 2;
						display: grid;
						grid-template-columns: repeat(4, 1fr);
						grid-row: span 1;
						position: relative;
						border: 0;

						&:before {
							content: "";
							position: absolute;
							inset: 0;
							background: color-mix(in srgb, var(--negro), var(--blanco) 20%);
							clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px), 0 0, 1px 1px, 1px calc(100% - 30px - 0.41px), calc(30px + 0.41px) calc(100% - 1px), calc(100% - 30px - 0.41px) calc(100% - 1px), calc(100% - 1px) calc(100% - 30px - 0.41px), calc(100% - 1px) 1px, 1px 1px);
						}
					}
				}

				#c4 & {
					&:first-of-type {
						grid-column: 1 / -1;
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						border: 0;
						padding: 1rem 0;
					}
				}

				.title {
					/*general*/
					font: var(--fs_e) var(--titulo);
					text-transform: uppercase;

					#c2 & {
						display: flex;
						justify-content: space-between;

						&:after {
							content: "\ebe6";
							font-family: boxicons;
						}
					}

					#c5 & {
						grid-column-start: 1;
						grid-row-start: 1;
						font-size: var(--fs_m);
						z-index: 1;
						display: flex;
						align-items: flex-end;

						&>a {
							width: 100%;
							background: var(--negro);
							clip-path: polygon(0 0, 55% 0, 63% 100%, 0 100%);
							padding-top: .5rem;
						}
					}

					#f8 & {
						font-size: var(--fs_m);
						grid-column: 1 / -1;
						background: var(--color_grupo);
						padding: .5rem 1rem;
						clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);


					}

					/*acaba titulo*/
				}

				.image {
					width: var(--width);
					height: var(--height);

					&>img {
						object-fit: cover;
						height: 100%;
						width: 100%;
					}

					&:empty {
						display: none;
					}

					#f10 & {
						--height: 30vh;
					}

					#c2 & {
						display: none;
					}

					#c5 & {
						--height: 50vh;
						filter: grayscale(1) brightness(.8);
						grid-column: span 2 / span 2;
						grid-column-start: 1;
						grid-row-start: 1;
						border-bottom: 1px solid var(--negro);
					}

					/*acaba imagen*/
				}

				.description {
					text-align: justify;

					br,
					&:empty,
					#c2 & {
						display: none;
					}

					#c5 & {
						grid-column-start: 2;
						grid-row-start: 2;
						padding-top: 1rem;
						font-size: var(--fs_s);
					}

					/*acaba description*/
				}

				.statistics {
					display: none;
				}

				.links {
					--font: 300 var(--fs_s) var(--links);
					letter-spacing: 2px;

					.forum_links {
						display: flex;

						&>a {
							font: var(--font);
						}
					}

					&:empty {
						display: none;
					}

					#c5 & {
						grid-column: span 2 / span 2;
						grid-column-start: 1;
						grid-row-start: 3;

						.forum_links {
							width: 100%;
							padding: 1rem 0;
							display: flex;
							gap: .5rem;

							&>a {
								flex: 1;
							}
						}
					}

					#f8 & {
						grid-column: 1 / -1;
						grid-row: 2;

						.forum_links {
							border-top: var(--borde_general);
							padding: .5rem 0;
							display: flex;
							gap: 1rem;
						}
					}

					#f10 & {
						.forum_links {
							display: flex;
							flex-direction: column;
						}
					}

					/*acaba links*/
				}

				.lastpost {
					display: flex;
					align-items: center;
					gap: 1rem;

					#c2 &,
					#f10 & {
						display: none;
					}

					#c5 & {
						grid-column-start: 1;
						grid-row-start: 2;
						padding-top: 1rem;
					}

					#f8 & {
						display: flex;
						flex-direction: column;
						align-items: center;
					}

					.avatar {
						--avatar-size: 60px;
						width: var(--avatar-size);
						height: var(--avatar-size);
						border: 5px solid var(--color_miembro);

						#f8 & {
							--avatar-size: 150px;
						}
					}

					.data {
						.topic {
							font: var(--font);
						}

						.user {
							font: var(--font);
						}

						.last-post-icon {
							display: none;

							img {}
						}

						.date {
							font: var(--font);
						}

						/*acaba data*/
					}
				}

			}
		}
	}
}

/* === Lista temas o mensajes === */

@layer temas {
	.viewforum_body {
		width: var(--width_general);
		margin: var(--margen_general);

		.page-header {

			.forum_name {
				font: var(--fs_m) var(--titulo);
				text-transform: uppercase;
			}

			#forum_description {

				.forum_links {
					a {}
				}

				/*acaba page header*/
			}

			.pagination {}
		}

		.posts {

			width: 100%;

			.posts-header {
				font: 600 var(--fs_e) var(--texto);
				text-transform: uppercase;
				letter-spacing: 8px;
				border-top: var(--borde_general);
				padding: 1rem 0;
				margin: 5vh 0;
				text-align: right;
			}

			.posts-section {
				display: flex;
				gap: .5rem;
				margin-bottom: 2.5vh;
				padding: 1rem;
				position: relative;

				&:before {
					content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--negro), var(--blanco) 20%);
  clip-path: polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 0,1px  1px ,1px calc(100% - 1px),calc(100% - 20px - 0.41px) calc(100% - 1px),calc(100% - 1px) calc(100% - 20px - 0.41px),calc(100% - 1px) 1px,1px 1px);
				}

				.posts-icon {
					.material-icons {}

					.participate-check {
						.material-icons {}
					}
				}

				.posts-content {
					flex-grow: 1;
					display: grid;
					grid-template-columns: repeat(3, 1fr);

					.posts-description {
						.topic_title {
							font: var(--fs_e) var(--titulo);
							text-transform: uppercase;
						}

						.topic_author {
							font: var(--fs_s) var(--texto);
							text-transform: uppercase;

							a {}
						}
					}

					.statistics {
						justify-self: center;
						display: flex;
						flex-direction: column;

						.posts_statistics-replies,
						.posts_statistics-views {}
					}

					.lastpost {
						justify-self: end;
						display: flex;
						flex-direction: row-reverse;
						align-items: center;
						gap: .5rem;

						.avatar {
							--avatarsize: 50px;
							width: var(--avatarsize);
							height: var(--avatarsize);
							position: relative;

							&:before {
								content: "";
								position: absolute;
								inset: 0;
								background: var(--color_miembro);
								clip-path: polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 0,1px  1px ,1px calc(100% - 1px),calc(100% - 10px - 0.41px) calc(100% - 1px),calc(100% - 1px) calc(100% - 10px - 0.41px),calc(100% - 1px) 1px,1px 1px);
							}

							img {
								clip-path: polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);

							}
						}

						.data {
							text-align: right;

							.user {}

							.date {}
						}
					}
				}
			}
		}
	}
}

/* === Tema === */

@layer topic {

	.topic-actions {
		.material-icons {
			display: none !important;
		}

		&>a {
			font: var(--font);
			padding: var(--padding);
			background: var(--background);
			color: var(--color);
		}
	}

	#topic {
		width: var(--width_general);
		margin: var(--margen_general);

		.header {
			.titulo {
				font: var(--fs_m) var(--titulo);
				text-transform: uppercase;
			}
		}

		.topic-actions {
			&>a {
				--font: var(--fs_s) var(--texto);
				--padding: .75rem;
				--background: var(--acento);
				--color: var(--blanco);
				text-transform: uppercase;
				letter-spacing: 2px;
			}
		}

		.post-wrap {
			--width: 100%;
			display: grid;
			grid-template-columns: repeat(2, 1fr) 150px 150px;
			grid-template-rows: 150px max-content;
			margin-bottom: 10vh;

			>.header {
				width: 100%;
				grid-column: span 2;
				display: grid;
				grid-template-rows: repeat(2, max-content);
				grid-template-columns: 100px calc(100% - 100px);
				align-content: end;
				padding-bottom: 1rem;

				.username {
					font: 100 40px var(--titulo);
					text-transform: uppercase;
					grid-column-start: 2;
				}

				.rank {
					grid-column-start: 1;
					grid-row: span 2;
					display: flex;
					justify-content: center;
					align-items: center;
					color: var(--color_miembro);
					font-size: 3rem;
				}

				.contact {
					display: flex;
					gap: 1rem;
				}

				/**ACABA HEADER**/

			}

			.avatar {
				--avatar-size: 300px;
				height: var(--avatar-size);
				width: var(--avatar-size);
				z-index: 1;
				grid-column: span 2 / span 2;
				grid-row: span 2 / span 2;
				grid-column-start: 3;
				grid-row-start: 1;
				position: relative;

				&::before {
					position: absolute;
					top: 0;
					left: 0;
					height: 300px;
					width: 300px;
					content: "";
					background: var(--color_miembro);
					mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Capa_2' data-name='Capa 2' version='1.1' viewBox='0 0 476.3 475.8'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B stroke-width: 4px; %7D .cls-1, .cls-2 %7B fill: none; stroke: %23000; stroke-miterlimit: 10; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cg%3E%3Cpolyline class='cls-2' points='2 238 2 44.5 42.7 2 238 2'/%3E%3Cpolyline class='cls-1' points='112 2 42.7 2 2 44.5 2 112.5'/%3E%3C/g%3E%3Cg%3E%3Cpolyline class='cls-2' points='474.1 238.1 474.1 44.6 433.3 2.1 238.1 2.1'/%3E%3Cpolyline class='cls-1' points='364.1 2.1 433.3 2.1 474.1 44.6 474.1 112.6'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpolyline class='cls-2' points='2.2 237.8 2.2 431.2 42.9 473.8 238.2 473.8'/%3E%3Cpolyline class='cls-1' points='112.2 473.8 42.9 473.8 2.2 431.2 2.2 363.3'/%3E%3C/g%3E%3Cg%3E%3Cpolyline class='cls-2' points='474.3 237.7 474.3 431.1 433.5 473.7 238.3 473.7'/%3E%3Cpolyline class='cls-1' points='364.3 473.7 433.5 473.7 474.3 431.1 474.3 363.2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
					-webkit-mask-size: contain;
					mask-size: contain;
					mask-repeat: no-repeat;
					mask-position: center center;
					z-index: 1;
				}

				&>a>img {
					clip-path: polygon(9% 0, 91% 0, 100% 9%, 100% 91%, 91% 100%, 9% 100%, 0 91%, 0 9%);
					width: calc(100% - 2px);
					height: calc(100% - 2px);
					margin-top: 1px;
					margin-left: 1px;
				}

				/***ACABA AVATAR***/
			}

			.awards,
			.details,
			.rpg {
				display: none;
			}




			.post {
				font: 1rem var(--texto);
				border: var(--borde_general);

				grid-column: span 3 / span 3;
				grid-row: span 2 / span 2;
				grid-column-start: 1;
				grid-row-start: 2;
				position: relative;

				&::after {
					content: "";
					height: 100px;
					width: 100px;
					background: var(--negro);
					border-left: var(--borde_general);
					transform: rotate(45deg);
					position: absolute;
					bottom: -50px;
					right: -50px;
				}

				.post-content {
					width: calc(100% - 150px);
					padding: 5rem;
					text-align: justify;

					& strong {
						color: var(--color_miembro);
					}

					& h2 {
						font: 900 var(--fs_l) var(--titulo);
					}

					& h3 {
						font: 600 var(--fs_m) var(--titulo);
						color: transparent;
						-webkit-text-stroke: 1px var(--blanco);
					}

					& blockquote {
						cite {}

						.quote_content {}
					}
				}

				>.header {
					display: flex;
					padding: 1rem;
					background: color-mix(in srgb, var(--negro), white 5%);
					padding-right: calc(150px + 5rem);
					justify-content: space-between;

					.link {}

					.date {
						font: .75rem var(--mono);
						text-transform: uppercase;
					}

					.buttons {
						>ul {
							display: flex;
							gap: .5rem;
						}
					}

					/**ACABA HEADER**/
				}

				/**ACABA POST**/
			}

			&:has(post_admin, sinperfil) {
				>.header {
					display: none;
				}

				.avatar {
					display: none;
				}

				.post {
					grid-column: span 4 / span 4;
					grid-row: span 3 / span 3;
					grid-row-start: 1;

					>.header {
						padding-right: 1rem;

						.date {
							display: none;
						}
					}

					.post-content {
						width: 100%;
					}
				}
			}

			&:has(sinavatar) {
				.avatar {
					display: none;
				}

				.post {
					grid-column: span 4 / span 4;
					>.header {
						padding-right: 1rem;
					}

					.post-content {
						width: 100%;
					}
				}
			}

			
		}

		.topic_bottom {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
			justify-content: center;
			border: var(--borde_general);
			padding: 2%;
			font-size: var(--fs_s);

			.jumpbox {
				label {
					display: flex;

					span {}

					.jumpbox-wrap {
						display: flex;

						.select {
							select {}
						}

						input {}

						.btn {}
					}
				}

				/*acaba topic bottom*/
			}

			.quickmod {
				justify-self: center;

				input {}

				label {
					display: flex;
					align-items: center;
					gap: 1em;

					span {}

					.quickmod-wrap {
						display: flex;
						align-items: center;
						gap: 1em;

						.select {
							select {
								border: var(--borde_general);
								padding: 1em;
							}
						}

						input {
							background: var(--acento);
							padding: 1em 2em;
							border: 0px;
							display: block;
							font-family: var(--mono);
							color: var(--negro);
							font-weight: bolder;
						}
					}
				}
			}

			.topic-admin {
				justify-self: end;
				align-self: center;

				.btn {
					.material-icons {}
				}
			}

			.block {

				.block-header {
					strong {}
				}

				.block-content {
					strong {}

					br {}

					a {}
				}
			}
		}
	}
}

/* === POSTEAR === */

@layer postear {
	#posting_body {
		width: var(--width_general);
		margin: var(--margen_general);

		.page-header {
			font: var(--fs_m) var(--titulo);
			text-transform: uppercase;
		}

		#preview {
			.block-header {}

			.block-content {
				font-size: var(--fs_e);
			}
		}

		#postingbox {
			display: grid;
			grid-template-columns: calc(100% - 250px) 250px;
			gap: 1rem;

			&>.group.vertical {
				grid-row: span 1 !important;
				gap: 1em;

				&>.group {
					display: grid !important;
					grid-template-columns: .3fr 1.7fr;

					&:has(#add_username) {
						display: flex !important;
					}
				}
			}

			&>#smiley-box {
				grid-column-start: 2;
				grid-row-start: 2;
			}

			&>#message-box {
				grid-column-start: 1;
				grid-row-start: 2;

				#textarea_content {
					width: 100% !important;
					height: 100% !important;

					#text_editor_textarea {}
				}

				/*acaba message-box*/
			}

			&>.form-buttons {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 1rem;
				border: 0;
			}

			form[action="/privmsg"] & {
				&>.form-buttons {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 1rem;
					border: 0;
				}
			}
		}
	}

	.topic_review {

		.page-title {
			font-family: var(--deco);
			font-size: var(--fs_m);
			background: var(--acento);
			padding: 1em;
		}

		br {}

		.block {
			display: flex;
			gap: 1rem;

			.avatar {
				--avatar_size: 200px;
				width: var(--avatar_size);
				height: var(--avatar_size);
			}

			.block-content {
				flex-grow: 1;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: repeat(2, max-content);

				.message {
					text-align: justify;
					grid-column: span 2 / span 2;
					grid-column-start: 1;
					grid-row-start: 2;
				}

				.user {
					font: var(--fs_e) var(--titulo);
					grid-column-start: 1;
					grid-row-start: 1;
				}

				.date {
					font: var(--fs_s) var(--mono);
					justify-self: end;
					grid-column-start: 2;
					grid-row-start: 1;
				}
			}
		}

		/*acaba topic review*/
	}

}

/* === SCEDITOR === */

@layer sceditor {
	.sceditor-container {

		width: 100% !important;
		height: 100% !important;
		position: static !important;
		box-sizing: border-box !important;
		background-clip: border-box !important;
		border: var(--border) !important;
		border-radius: 0 !important;
		font-size: 1rem var(--texto) !important;
		background: var(--background) !important;


		&>textarea {

			box-sizing: border-box !important;
			width: 100% !important;
			height: var(--height) !important;
			background: transparent !important;
			color: var(--color) !important;
			margin: 0 !important;
			resize: none !important;
			padding: 1rem !important;
			font: 100 1rem var(--texto) !important;
		}

		.sceditor-toolbar {
			background: var(--background) !important;
			height: 50px !important;
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
			border-radius: 0 !important;
			background-clip: border-box !important;
			border-bottom: 0 !important;
			border-radius: 0 !important;
			padding: .25rem !important;
			gap: .25rem !important;

			.sceditor-group {
				background: transparent !important;
				background-clip: border-box !important;
				border-bottom: 0 !important;
				border-radius: 0 !important;
				display: flex !important;
				gap: .25rem !important;
				margin: 0 !important;
				padding: 0 !important;

				.sceditor-button {

					height: 20px !important;
					width: 20px !important;
					padding: .25rem !important;

					background-clip: border-box !important;
					border-radius: 0 !important;

					display: flex !important;
					justify-content: center !important;
					align-items: center !important;
					background-size: contain !important;
					background-position: center !important;

					&:active {
						background-color: transparent !important;
						box-shadow: none !important;
					}

					&:hover {
						background-color: transparent !important;
						box-shadow: none !important;
						filter: drop-shadow(0 0 10px white);
					}

					div {
						background: transparent !important;
						background-clip: padding-box;
						border-bottom: 0 !important;
						border-radius: 0 !important;
						padding: 0 !important;
					}

				}

				.sceditor-button-bold {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M17.061 11.22A4.46 4.46 0 0 0 18 8.5C18 6.019 15.981 4 13.5 4H6v15h8c2.481 0 4.5-2.019 4.5-4.5a4.48 4.48 0 0 0-1.439-3.28zM13.5 7c.827 0 1.5.673 1.5 1.5s-.673 1.5-1.5 1.5H9V7h4.5zm.5 9H9v-3h5c.827 0 1.5.673 1.5 1.5S14.827 16 14 16z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-italic {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M19 7V4H9v3h2.868L9.012 17H5v3h10v-3h-2.868l2.856-10z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-underline {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M5 18h14v2H5zM6 4v6c0 3.309 2.691 6 6 6s6-2.691 6-6V4h-2v6c0 2.206-1.794 4-4 4s-4-1.794-4-4V4H6z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-strike {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M20 11h-8c-4 0-4-1.816-4-2.5C8 7.882 8 6 12 6c2.8 0 2.99 1.678 3 2.014L16 8h1c0-1.384-1.045-4-5-4-5.416 0-6 3.147-6 4.5 0 .728.148 1.667.736 2.5H4v2h16v-2zm-8 7c-3.793 0-3.99-1.815-4-2H6c0 .04.069 4 6 4 5.221 0 6-2.819 6-4.5 0-.146-.009-.317-.028-.5h-2.006c.032.2.034.376.034.5 0 .684 0 2.5-4 2.5z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-left {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M4 19h16v2H4zm0-4h11v2H4zm0-4h16v2H4zm0-8h16v2H4zm0 4h11v2H4z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-center {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M4 19h16v2H4zm3-4h10v2H7zm-3-4h16v2H4zm0-8h16v2H4zm3 4h10v2H7z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-right {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M4 19h16v2H4zm5-4h11v2H9zm-5-4h16v2H4zm0-8h16v2H4zm5 4h11v2H9z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-justify {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M4 7h16v2H4zm0-4h16v2H4zm0 8h16v2H4zm0 4h16v2H4zm2 4h12v2H6z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-bulletlist {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M4 6h2v2H4zm0 5h2v2H4zm0 5h2v2H4zm16-8V6H8.023v2H18.8zM8 11h12v2H8zm0 5h12v2H8z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-orderedlist {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M5.282 12.064c-.428.328-.72.609-.875.851-.155.24-.249.498-.279.768h2.679v-.748H5.413c.081-.081.152-.151.212-.201.062-.05.182-.142.361-.27.303-.218.511-.42.626-.604.116-.186.173-.375.173-.578a.898.898 0 0 0-.151-.512.892.892 0 0 0-.412-.341c-.174-.076-.419-.111-.733-.111-.3 0-.537.038-.706.114a.889.889 0 0 0-.396.338c-.094.143-.159.346-.194.604l.894.076c.025-.188.074-.317.147-.394a.375.375 0 0 1 .279-.108c.11 0 .2.035.272.108a.344.344 0 0 1 .108.258.55.55 0 0 1-.108.297c-.074.102-.241.254-.503.453zm.055 6.386a.398.398 0 0 1-.282-.105c-.074-.07-.128-.195-.162-.378L4 18.085c.059.204.142.372.251.506.109.133.248.235.417.306.168.069.399.103.692.103.3 0 .541-.047.725-.14a1 1 0 0 0 .424-.403c.098-.175.146-.354.146-.544a.823.823 0 0 0-.088-.393.708.708 0 0 0-.249-.261 1.015 1.015 0 0 0-.286-.11.943.943 0 0 0 .345-.299.673.673 0 0 0 .113-.383.747.747 0 0 0-.281-.596c-.187-.159-.49-.238-.909-.238-.365 0-.648.072-.847.219-.2.143-.334.353-.404.626l.844.151c.023-.162.067-.274.133-.338s.151-.098.257-.098a.33.33 0 0 1 .241.089c.059.06.087.139.087.238 0 .104-.038.193-.117.27s-.177.112-.293.112a.907.907 0 0 1-.116-.011l-.045.649a1.13 1.13 0 0 1 .289-.056c.132 0 .237.041.313.126.077.082.115.199.115.352 0 .146-.04.266-.119.354a.394.394 0 0 1-.301.134zm.948-10.083V5h-.739a1.47 1.47 0 0 1-.394.523c-.168.142-.404.262-.708.365v.754a2.595 2.595 0 0 0 .937-.48v2.206h.904zM9 6h11v2H9zm0 5h11v2H9zm0 5h11v2H9z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-horizontalrule {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M20.875 7H3.125C1.953 7 1 7.897 1 9v6c0 1.103.953 2 2.125 2h17.75C22.047 17 23 16.103 23 15V9c0-1.103-.953-2-2.125-2zm0 8H3.125c-.057 0-.096-.016-.113-.016-.007 0-.011.002-.012.008l-.012-5.946c.007-.01.052-.046.137-.046H5v3h2V9h2v4h2V9h2v3h2V9h2v4h2V9h1.875c.079.001.122.028.125.008l.012 5.946c-.007.01-.052.046-.137.046z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-quote {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M3.691 6.292C5.094 4.771 7.217 4 10 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.902 2.902 0 0 0 6.925 10H10a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2H3a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789zM20 20h-6a1 1 0 0 1-1-1v-5l.003-2.919c-.009-.111-.199-2.741 1.688-4.789C16.094 4.771 18.217 4 21 4h1v2.819l-.804.161c-1.37.274-2.323.813-2.833 1.604A2.902 2.902 0 0 0 17.925 10H21a1 1 0 0 1 1 1v7c0 1.103-.897 2-2 2z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-code {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='m7.375 16.781 1.25-1.562L4.601 12l4.024-3.219-1.25-1.562-5 4a1 1 0 0 0 0 1.562l5 4zm9.25-9.562-1.25 1.562L19.399 12l-4.024 3.219 1.25 1.562 5-4a1 1 0 0 0 0-1.562l-5-4zm-1.649-4.003-4 18-1.953-.434 4-18z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-faspoiler {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M12 4.998c-1.836 0-3.356.389-4.617.971L3.707 2.293 2.293 3.707l3.315 3.316c-2.613 1.952-3.543 4.618-3.557 4.66l-.105.316.105.316C2.073 12.382 4.367 19 12 19c1.835 0 3.354-.389 4.615-.971l3.678 3.678 1.414-1.414-3.317-3.317c2.614-1.952 3.545-4.618 3.559-4.66l.105-.316-.105-.316c-.022-.068-2.316-6.686-9.949-6.686zM4.074 12c.103-.236.274-.586.521-.989l5.867 5.867C6.249 16.23 4.523 13.035 4.074 12zm9.247 4.907-7.48-7.481a8.138 8.138 0 0 1 1.188-.982l8.055 8.054a8.835 8.835 0 0 1-1.763.409zm3.648-1.352-1.541-1.541c.354-.596.572-1.28.572-2.015 0-.474-.099-.924-.255-1.349A.983.983 0 0 1 15 11a1 1 0 0 1-1-1c0-.439.288-.802.682-.936A3.97 3.97 0 0 0 12 7.999c-.735 0-1.419.218-2.015.572l-1.07-1.07A9.292 9.292 0 0 1 12 6.998c5.351 0 7.425 3.847 7.926 5a8.573 8.573 0 0 1-2.957 3.557z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-fahide {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M8.073 12.194 4.212 8.333c-1.52 1.657-2.096 3.317-2.106 3.351L2 12l.105.316C2.127 12.383 4.421 19 12.054 19c.929 0 1.775-.102 2.552-.273l-2.746-2.746a3.987 3.987 0 0 1-3.787-3.787zM12.054 5c-1.855 0-3.375.404-4.642.998L3.707 2.293 2.293 3.707l18 18 1.414-1.414-3.298-3.298c2.638-1.953 3.579-4.637 3.593-4.679l.105-.316-.105-.316C21.98 11.617 19.687 5 12.054 5zm1.906 7.546c.187-.677.028-1.439-.492-1.96s-1.283-.679-1.96-.492L10 8.586A3.955 3.955 0 0 1 12.054 8c2.206 0 4 1.794 4 4a3.94 3.94 0 0 1-.587 2.053l-1.507-1.507z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-table {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M4 21h15.893c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zm0-2v-5h4v5H4zM14 7v5h-4V7h4zM8 7v5H4V7h4zm2 12v-5h4v5h-4zm6 0v-5h3.894v5H16zm3.893-7H16V7h3.893v5z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-servimg {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='m9 13 3-4 3 4.5V12h4V5c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h8v-4H5l3-4 1 2z'%3E%3C/path%3E%3Cpath d='M19 14h-2v3h-3v2h3v3h2v-3h3v-2h-3z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-image {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M19 3H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zM5 19V5h14l.002 14H5z'%3E%3C/path%3E%3Cpath d='m10 14-1-1-3 4h12l-5-7z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-link {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M8.465 11.293c1.133-1.133 3.109-1.133 4.242 0l.707.707 1.414-1.414-.707-.707c-.943-.944-2.199-1.465-3.535-1.465s-2.592.521-3.535 1.465L4.929 12a5.008 5.008 0 0 0 0 7.071 4.983 4.983 0 0 0 3.535 1.462A4.982 4.982 0 0 0 12 19.071l.707-.707-1.414-1.414-.707.707a3.007 3.007 0 0 1-4.243 0 3.005 3.005 0 0 1 0-4.243l2.122-2.121z'%3E%3C/path%3E%3Cpath d='m12 4.929-.707.707 1.414 1.414.707-.707a3.007 3.007 0 0 1 4.243 0 3.005 3.005 0 0 1 0 4.243l-2.122 2.121c-1.133 1.133-3.109 1.133-4.242 0L10.586 12l-1.414 1.414.707.707c.943.944 2.199 1.465 3.535 1.465s2.592-.521 3.535-1.465L19.071 12a5.008 5.008 0 0 0 0-7.071 5.006 5.006 0 0 0-7.071 0z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-embed {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='m10.998 16 5-4-5-4v3h-9v2h9z'%3E%3C/path%3E%3Cpath d='M12.999 2.999a8.938 8.938 0 0 0-6.364 2.637L8.049 7.05c1.322-1.322 3.08-2.051 4.95-2.051s3.628.729 4.95 2.051S20 10.13 20 12s-.729 3.628-2.051 4.95-3.08 2.051-4.95 2.051-3.628-.729-4.95-2.051l-1.414 1.414c1.699 1.7 3.959 2.637 6.364 2.637s4.665-.937 6.364-2.637C21.063 16.665 22 14.405 22 12s-.937-4.665-2.637-6.364a8.938 8.938 0 0 0-6.364-2.637z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-youtube {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M21.593 7.203a2.506 2.506 0 0 0-1.762-1.766C18.265 5.007 12 5 12 5s-6.264-.007-7.831.404a2.56 2.56 0 0 0-1.766 1.778c-.413 1.566-.417 4.814-.417 4.814s-.004 3.264.406 4.814c.23.857.905 1.534 1.763 1.765 1.582.43 7.83.437 7.83.437s6.265.007 7.831-.403a2.515 2.515 0 0 0 1.767-1.763c.414-1.565.417-4.812.417-4.812s.02-3.265-.407-4.831zM9.996 15.005l.005-6 5.207 3.005-5.212 2.995z'%3E%3C/path%3E%3C/svg%3E");
				}

				.sceditor-button-headers {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M18 20V4h-3v6H9V4H6v16h3v-7h6v7z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-size {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='m22 6-3-4-3 4h2v4h-2l3 4 3-4h-2V6zM9.307 4l-6 16h2.137l1.875-5h6.363l1.875 5h2.137l-6-16H9.307zm-1.239 9L10.5 6.515 12.932 13H8.068z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-color {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M5 18h14v3H5zm7.5-14h-1c-.401 0-.764.24-.921.609L5.745 16h2.173l1.273-3h5.604l1.268 3h2.171L13.421 4.61A1 1 0 0 0 12.5 4zm-2.46 7 1.959-4.616L13.95 11h-3.91z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-font {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M15 4h7v2h-7zm1 4h6v2h-6zm2 4h4v2h-4zM9.307 4l-6 16h2.137l1.875-5h6.363l1.875 5h2.137l-6-16H9.307zm-1.239 9L10.5 6.515 12.932 13H8.068z'%3E%3C/path%3E%3C/svg%3E") !important;
				}

				.sceditor-button-removeformat {}

				.sceditor-button-more {
					display: none !important;
				}

				.sceditor-button-subscript {
					display: none !important;
				}

				.sceditor-button-superscript {
					display: none !important;
				}

				.sceditor-button-mention {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23000000' height='800px' width='800px' version='1.1' id='Capa_1' viewBox='0 0 495.554 495.554' xml:space='preserve'%3E%3Cg id='XMLID_115_'%3E%3Cg id='XMLID_116_'%3E%3Cpath id='XMLID_117_' d='M353.732,451.163c3.388,10.912-2.324,22.536-13.024,26.545c-35.256,13.208-68.455,17.846-111.453,17.846 c-118.188,0-222.136-84.711-222.136-224.283C7.118,126.042,112.492,0,273.4,0c125.316,0,215.036,86.156,215.036,205.784 c0,103.949-58.388,169.434-135.282,169.434c-33.456,0-57.69-17.076-61.225-54.813h-1.423 c-22.095,36.324-54.124,54.813-91.861,54.813c-46.298,0-79.753-34.171-79.753-92.557c0-86.842,64.092-165.898,166.625-165.898 c17.074,0,35.438,2.328,51.491,6.064c19.1,4.444,31.434,22.886,28.295,42.243l-16.411,101.212 c-7.14,42.037-2.152,61.253,17.79,61.949c30.619,0.728,69.051-38.442,69.051-120.326c0-92.557-59.801-164.484-170.16-164.484 c-108.937,0-204.36,85.459-204.36,221.447c0,118.902,76.209,186.558,182.278,186.558c28.226,0,57.728-4.744,82.85-13.864 c5.426-1.969,11.42-1.629,16.591,0.935c5.171,2.565,9.08,7.133,10.792,12.646L353.732,451.163z M296.189,175.873 c-5.686-1.423-12.815-2.847-22.064-2.847c-47.017,0-84.035,46.27-84.035,101.11c0,27.053,12.117,44.117,35.594,44.117 c26.346,0,54.125-33.443,60.527-74.754L296.189,175.873z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
				}

				.sceditor-button-pastetext,
				.sceditor-button-source,
				.sceditor-button-time,
				.sceditor-button-date,
				.sceditor-button-twemojifa,
				.sceditor-button-farand,
				.sceditor-button-faupdown,
				.sceditor-button-fascroll {
					display: none !important;
				}



			}
		}

		.sceditor-grip,
		.sceditor-resize-cover {
			display: none !important;
		}

	}

	.quick-reply-textarea-wrap {
		.sceditor-container {
			&>textarea {
				height: var(--height) !important;
			}
		}
	}

	#quick-reply-avatar,
	.quick-reply-upload {
		display: none;
	}
}

/* === MODIFICAR PERFIL === */

@layer cp {
	#wrap:has(.cp) {
		width: 100%;
		padding: 5rem !important;
		display: grid;
		grid-template-columns: 15vw calc(100% - 15vw);

		.cp-mobile-menu {
			display: none;
		}

		.cp-sidebar {
			grid-column-start: 1;
			grid-row-start: 1;
			position: relative;

			#tabs {
				position: sticky;
				top: var(--nav_size);

				li {
					font: var(--fs_e) var(--mono);
					padding: .5rem;
					transition: .3s linear;

					&:hover {
						background-color: var(--color_grupo);
						color: white;
						transition: .3s linear;
					}
				}

				& .activetab {
					background: var(--color_grupo);
					color: white;
				}
			}
		}

		.cp {
			grid-column-start: 2;
			grid-row-start: 1;

			#smiley-box {
				display: none;
			}

			#postingbox {
				.fields1 {
					border: 0;

					#textarea_content {
						width: 100% !important;
					}
				}
			}

			.block-avatar {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 1rem;
			}

			.mark-buttons {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 1rem;

				.material-icons {
					display: none !important;
				}

				.btn,
				.button {
					background: var(--color_grupo);
					color: var(--blanco);
					padding: .5rem;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.form-buttons {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 1rem;
				margin-top: 1rem;
				border: 0;

				.btn {
					background: var(--color_grupo);
					color: var(--blanco);
					padding: .5rem;
					border: 0;

					&:only-child {
						grid-column-start: 2;
					}
				}

				& .group {
					grid-column: span 2;
				}
			}

			.submit-buttons {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 1rem;
				border: 0;
				margin-top: 1rem;

				input {}

				.button1,
				.button2 {
					font: var(--fs_e) var(--mono);
					background: var(--color_grupo);
					color: var(--blanco);
					padding: .5rem;
					border: 0;
				}

				.button1 {
					grid-column-start: 2;
					grid-row-start: 1;
				}

				.button2 {
					grid-column-start: 1;
					grid-row-start: 1;
				}
			}
		}

		.group {
			.block-content & {
				display: grid !important;
				grid-template-columns: .8fr 1.2fr;

				.inputbox {
					width: 100% !important;
				}

				&:has(#profile_field_4_-12_0) {
					display: none !important;
				}

				&:has(#profile_field_16_-7) {
					display: none !important;
				}
			}
		}

		.profile_field_list {
			display: flex;

			&>li {
				display: flex;
			}
		}

		#profile-notifications {
			.block-header {}

			br {}

			form {
				#checkboxes {
					width: 100%;

					thead {
						background: var(--color_grupo);
						color: var(--blanco);

						tr {
							display: grid;
							grid-template-columns: 1.4fr .8fr .8fr;
							padding: 1rem;

							th {
								width: 100%;

								&:has(.material-icons) {
									display: none;
								}
							}
						}
					}

					tbody {
						tr {
							display: grid;
							grid-template-columns: 1.4fr .8fr .8fr;
							padding: .5rem 0;

							&:nth-child(even) {
								background-color: lightyellow;
							}
						}
					}
				}
			}

			.cp_notifs {
				.block-header {}

				.notification-row {
					display: flex;
					align-items: center;
					gap: 1rem;

					.notification-check {
						display: flex;
						align-items: center;
					}

					.notification-content {
						flex-grow: 1;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
			}
		}
	}
}

/* === TEMAS Y MENSAJES SUPERVISADOS === */

@layer supervisados {
	#wrap:has(> form[action="/search?search_id=watchsearch"]) {
		width: var(--width_general);
		margin: var(--margen_general);
	}

	form[action="/search?search_id=watchsearch"] {
		.material-icons {
			display: none !important;
		}

		/***PÁGINA***/

		.block-topics {
			display: flex;
			flex-direction: column;
			gap: 1rem;

			.block-topics-content {
				display: flex;
				border: var(--borde_general);
				padding: 1rem;
				gap: 1em;
				align-items: center;

				.block-topics-details {
					display: flex;
					gap: 1rem;

					.block-topics-lastpost {
						display: flex;
					}
				}

				.block-topics-rightside {
					display: flex;
				}
			}
		}

		/***CP***/

		.cp & {
			.posts-header {
				display: none;
			}

			.posts-content {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				padding: 1rem;
				margin-bottom: 1rem;

				.posts-description {
					h3 {
						padding-right: 0 !important;
					}
				}

				.posts-statistics {
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				.posts-lastpost {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
				}
			}
		}
	}
}

/* === Utilidades === */

@layer utilities {
	.vertical {
		display: flex;
		flex-direction: column;
	}

	.horizontal {
		display: flex;
	}

	.group {
		--gap: 1rem;
		display: flex;
		gap: var(--gap);
	}

	.group.vertical {
		justify-content: center;
	}

	.group.horizontal {
		align-items: center;
	}
}




:root {
	--gap-size: 16px;
	--ease: cubic-bezier(0.4, 0.0, 0.2, 1);
	--ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56);
}

.switcheroo {
	transition: .2s ease;
	opacity: 1;
}

/* BARRE SWITCHEROO --- */
.switcheroo {
	&[position="static"] {
		position: relative;
	}
}


/* Positionnement des ronds */
.switcheroo__squircles {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	padding: var(--gap-size);
	gap: var(--gap-size);
}

/* BARRE --- */
.switcheroo {
	color: var(--blanco);
	background-color: var(--negro);
	font-size: 1rem;
}


/* AFFICHAGE DES COMPTES ---*/

/* Rond */
.switcheroo__squircle {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 5px;
	cursor: pointer;
}

/* Contenenur de l'avatar */
.switcheroo__avatar {

	>img {
		width: 40px;
		height: 40px;
		object-fit: cover;
		object-position: center;
		border-radius: 5px;
		position: relative;
	}
}



/* Avatar du compte connecté */
.switcheroo__squircle.active {
	box-shadow: 0 0 20px red;

	&>img {
		border-radius: 5px;
		cursor: default;
	}
}


/* Bouton de suppression */
.switcheroo__delete {
	display: flex;
	border-radius: 100%;
	justify-content: center;
	align-items: center;
	background: var(--acento);
	transform: scale(0);
	opacity: 1;
	transition: transform 128ms var(--ease), opacity 64ms var(--ease);
	cursor: pointer;
	color: var(--blanco);
	position: absolute;
	top: -5px;
	right: -5px;
	height: 15px;
	width: 15px;
}

.switcheroo__squircle:hover .switcheroo__delete {
	opacity: 1;
	transform: scale(1);
}



/* TOOLTIP - INFOBULLE DU PSEUDO ---*/

/* Conteneur du pseudo */
.switcheroo__popper {
	background-color: var(--negro);
	padding: 0.68rem 1rem;
	position: absolute;
	width: -webkit-max-content;
	width: max-content;
	border-radius: 4px;
	z-index: 0;
	opacity: 0;
	transition: opacity 64ms var(--ease), transform 128ms var(--ease-bounce);
	pointer-events: none;
	color: var(--blanco);
}

/* Conteneur du pseudo : si horizontal */
.switcheroo__popper {
	top: 155%;
	left: 50%;
	transform-origin: top;
	transform: translateX(-50%) scale(0.98);
}

/* Flèche tooltip */
.switcheroo__popper:before {
	content: "";
	position: absolute;
	width: 24px;
	height: 24px;
	background-color: var(--negro);
	z-index: -1;
}

.switcheroo__popper:before {
	left: 50%;
	top: -2px;
	transform: translateX(-50%) rotate(-45deg);
}

.switcheroo__squircle:hover .switcheroo__popper {
	opacity: 1;
	transform: translateX(-50%) scale(1);
}


/* DIVIDER : barre de séparation --- */
.switcheroo__divider {
	display: none;
}


/* AJOUTER UN COMPTE ---*/

/* button : ajouter un compte */
.switcheroo__squircle--button {
	transition: border-radius 128ms var(--ease);
	color: var(--negro);
	background: var(--acento);
}

.switcheroo__squircle--button:hover {
	color: var(--blanco);
	font-weight: bold;
}


/* MODAL : FENETRE DE CONNEXION --- */

/* Fond de l'afficage connexion */
.monomer-overlay {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	transition: 0.2s opacity ease;
	background: color-mix(in srgb, var(--negro), transparent 50%);
}

/* Boîte de connexion */
.monomer-modal {
	position: fixed;
	z-index: 999;
	top: 50%;
	left: 50%;
	opacity: 0;
	width: 94%;
	padding: 24px 20px;
	transition: 0.2s opacity ease;
	transform: translate(-50%, -50%);
	border-radius: 5px;
	background: var(--negro);
	border: var(--borde_general);
	color: var(--blanco);
}

/* Formulaire */
.switcheroo__form {
	padding: 48px;
	background: var(--negro);
	border-radius: 5px;
}

/* Champs à remplir */
.switcheroo__form-row {
	display: flex;
	flex-flow: column;
	align-items: flex-start;
	margin-bottom: 16px;
}

/* Nom du champs */
.switcheroo__form-label {
	margin-bottom: 8px;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 600;
}

/* Zone de texte */
.switcheroo__form-input {
	padding: 6px;
	font-size: 16px;
	border-radius: 4px;
	width: 100%;
	background-color: var(--negro);
	border: var(--borde_general) !important;
	color: var(--blanco);
	cursor: text;
}

/* Bouton de connexion */
.switcheroo__form-button {
	border-radius: 8px;
	padding: 4px 6px;
	border: none;
	outline: none;
	box-shadow: none;
	text-transform: uppercase;
	font-size: 14px;
	align-self: flex-end;
	background-color: var(--acento);
	border: var(--borde_general);
	cursor: pointer;
}

.switcheroo__form-button:hover {
	border: 1px solid transparent;
	background: var(--acento);
	color: var(--blanco);
}

.monomer-modal.monomer-open,
.monomer-overlay.monomer-open {
	opacity: 1;
}

/* Fermer la boîte de connexion */
.monomer-close {
	font-size: 20px;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	position: absolute;
	top: -7px;
	right: -7px;
	padding: 5px;
	cursor: pointer;
	color: #fff;
	border: 0;
	outline: none;
	background: var(--negro);
	border-radius: 50%;
	padding: 0;
}

.monomer-close:hover {
	background: var(--acento);

}



.sceditor-container {
	--border: var(--borde_general);
	--background: var(--negro);

	&>textarea {
		--height: 500px;
		--color: var(--blanco);
	}

	.sceditor-toolbar {
		--background: var(--color_grupo);

		.sceditor-button {
			filter: invert(1);
			transition: linear .3s;

			&:hover {
				transform: scale(1.2);
				transition: linear .3s;
			}
		}
	}
}

.quick-reply-textarea-wrap {
	.sceditor-container {
		&>textarea {
			--height: 300px;
		}
	}
}

.quick-reply-side-btns {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	padding: .5rem 0;

	.quick-reply-send {
		display: flex;
		padding: .5rem .75rem;
		border: 0;
		background: var(--color_grupo);
		font-size: 0;

		&::before {
			content: "ENVIAR";
			font: 12px var(--texto) !important;
			color: var(--blanco);
			letter-spacing: 2px;
		}
	}

	.quick-reply-preview {
		display: flex;
		padding: .5rem .75rem;
		border: 0;
		background: var(--color_grupo);
		font-size: 0;

		&::before {
			content: "PREVISUALIZAR";
			font: 12px var(--texto) !important;
			color: var(--blanco);
			letter-spacing: 2px;
		}
	}
}









/* === Para el movil === */
@media (max-width: 768px) {
	:root {
		--width_general: 95vw;
		--fs_xs: 0.6rem;
		--fs_s: 0.8rem;
		--fs_e: 0.9rem;
		--fs_m: 1.8rem;
		--fs_l: 2.5rem;
		--fs_xl: 5rem;
	}

	/* Header */
	header {
		grid-template-columns: auto 1fr auto !important;
		padding: 0 1rem;

		.header_wrapper:nth-of-type(2) {
			justify-content: flex-end;
		}
	}

	/* Menús popover */
	[popover] {
		width: 100vw !important;
		height: 100vh !important;
		translate: 0 !important;

		&[popover]:not(:popover-open) {
			display: none !important;
		}

		&:popover-open {
			translate: 0 !important;
		}
	}

	#menu_forum[popover],
	#menu_user[popover] {
		&:popover-open {
			translate: 0 !important;
		}
	}

	/* Navegación */
	.generatednavbar {
		grid-template-columns: repeat(4, 1fr) !important;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: color-mix(in srgb, var(--negro), transparent 80%) !important;
		backdrop-filter: blur(10px);
		padding: 0.5rem;
		z-index: 999;

		&>li {
			display: flex !important;
			justify-content: center;
		}

		a.mainmenu {
			width: 100%;
			height: 100%;
			padding: 0.5rem;

			i {
				font-size: 1.5rem !important;
			}
		}
	}

	/* Contenido principal */
	#index,
	#wrap,
	#topic,
	#posting_body,
	#viewforum_body {
		margin: 5vh auto !important;
		width: 95vw !important;
	}

	/* Tablón */
	#tablon {
		grid-template-columns: 1fr !important;

		.modulo {
			&:has(.ultimotema) {
				grid-column: span 1 !important;
				grid-template-columns: 1fr !important;
			}
		}
	}

	/* Subforos */
	.forum-wrap {
		grid-template-columns: 1fr !important;

		#c2 &,
		#c3 &,
		#c5 & {
			grid-template-columns: 1fr !important;
			background-image: none !important;
		}

		.forum-section {
			#c5 & {
				grid-template-columns: 1fr !important;
			}

			.image {
				#c5 & {
					height: 30vh !important;
				}
			}
		}
	}

	/* Temas */
	.posts-section {
		flex-direction: column;

		.posts-content {
			grid-template-columns: 1fr !important;
			gap: 0.5rem;

			.statistics,
			.lastpost {
				justify-self: start !important;
			}
		}
	}

	/* Mensajes en tema */
	.post-wrap {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto !important;
		position: relative;

		.avatar {
			grid-column: 1 !important;
			grid-row: auto !important;
			width: 100% !important;
			height: auto !important;
			aspect-ratio: 1/1;
		}

		.post {
			grid-column: 1 !important;

			&::after {
				display: none;
			}

			.post-content {
				width: 100% !important;
				padding: 1rem !important;
			}

			>.header {
				padding-right: 1rem !important;
			}
		}
	}

	/* Editor de mensajes */
	#postingbox {
		grid-template-columns: 1fr !important;

		#message-box {
			grid-row: auto !important;
		}

		#smiley-box {
			display: none !important;
		}

		.form-buttons {
			grid-template-columns: 1fr !important;
		}
	}

	/* Panel de control */
	#wrap:has(.cp) {
		grid-template-columns: 1fr !important;
		padding: 1rem !important;

		.cp-sidebar {
			display: none;
		}

		.cp-mobile-menu {
			display: block;
			position: sticky;
			top: var(--nav_size);
			background: var(--negro);
			z-index: 10;
			padding: 1rem 0;

			select {
				width: 100%;
				padding: 0.5rem;
				background: var(--negro);
				color: var(--blanco);
				border: var(--borde_general);
			}
		}

		.cp {
			grid-column: 1 !important;
		}
	}

	/* Footer */
	#footer_widgets {
		grid-template-columns: 1fr !important;
		padding: 1rem !important;
	}

	/* Editor SCEditor */
	.sceditor-container {
		.sceditor-toolbar {
			flex-wrap: wrap !important;
			height: auto !important;
			padding: 0.5rem !important;

			.sceditor-group {
				flex-wrap: wrap;
			}
		}
	}

	/* Quick reply */
	.quick-reply-textarea-wrap {
		.sceditor-container>textarea {
			height: 200px !important;
		}
	}

	/* Switcheroo (selector de cuentas) */
	.switcheroo {
		position: fixed;
		bottom: 60px;
		right: 10px;
		z-index: 999;

		.switcheroo__squircles {
			flex-direction: column;
		}

		.switcheroo__popper {
			top: auto !important;
			bottom: 100%;
			left: 50% !important;
			transform-origin: bottom !important;

			&:before {
				top: auto !important;
				bottom: -2px;
			}
		}
	}
}