.contenido-principal {
  flex: 1;
}


.rodape_1{
  background: #090F40;
  width: 100%;
  padding: 50px 20px 20px;
  box-sizing: border-box;
  margin-top: auto; /* empurra pro fim quando a página é baixa */
  font-weight: 500;
}



@media (min-width: 769px) {
  .rodape_1 {
    padding: 50px 20px 20px 65px; 
  }
}

    .rodape_1.tema-escuro {
      background: #080808;
    }

.nomeep {
  font-size: 1.5rem;
  color: #adadad;
  font-family: 'Outfit', Roboto, sans-serif;
  font-weight: 300;
  font-style: normal; 

}

.nomeep2 {
  font-size: 1.5rem;
  color: #fff;
  font-family: 'Outfit', Roboto, sans-serif;
  font-weight: 300;
  font-style: normal; 
}

.elpreg {
  flex: 1; min-width: 280px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; white-space: nowrap; 
}

@media (max-width: 769px) {
  .elpreg {
    align-items: center;
  }
}

@media (max-width: 1068px) {
  .rodape_1 > div {
  	margin-top: 35px;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }



.rodape_1 {
  	margin-top: 35px;
}}



.links_rdp {
	font-size: 35px;
	margin: 10px 0px;
}
        .links_rdp a {
            color: #5a5e83;
            text-decoration: none;
            
            
            
        }

 .links_rdp.tema-escuro a {
            color: #595757;

}
.links_rdp.wpp_rdp a:hover {
    text-decoration: none;
    color: green;
}

.links_rdp.ig_rdp a:hover {
    text-decoration: none;
    color: #e00664;
}


@import url(fontawesome-all.min.css);
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400';

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">



p {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}



ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}


/* Basic */

	@-ms-viewport {
		width: device-width;
	}



	@media screen and (max-width: 480px) {

		html, body {
			min-width: 320px;
		}

	}

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}
		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

/* Type */





	em, i {
		font-style: italic;
	}

	p {
		margin: 0 0 0em 0;
	}

		p.content {
			-moz-columns: 20em 2;
			-webkit-columns: 20em 2;
			-ms-columns: 20em 2;
			columns: 20em 2;
			-moz-column-gap: 2em;
			-webkit-column-gap: 2em;
			-ms-column-gap: 2em;
			column-gap: 2em;
			text-align: justify;
		}



	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	blockquote {
		border-left: solid 4px;
		font-style: italic;
		margin: 0 0 2em 0;
		padding: 0.5em 0 0.5em 2em;
	}


		pre code {
			display: block;
			line-height: 1.75;
			padding: 1em 1.5em;
			overflow-x: auto;
		}

	hr {
		border: 0;
		border-bottom: solid 1px;
		margin: 2em 0;
	}

		hr.major {
			margin: 3em 0;
		}

	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

	.align-right {
		text-align: right;
	}






	h1, h2, h3, h4, h5, h6 {
		color: #000;
	}

.tema-escuro h1,
.tema-escuro h2,
.tema-escuro h3,
.tema-escuro h4,
.tema-escuro h5,
.tema-escuro h6 {
	color: #fff;
}


	blockquote {
		border-left-color: rgba(255, 255, 255, 0.35);
	}

	code {
		background: rgba(255, 255, 255, 0.075);
		border-color: rgba(255, 255, 255, 0.35);
	}

	hr {
		border-bottom-color: rgba(255, 255, 255, 0.35);
	}


/* Box */

	.box {
		border-radius: 7px;
		border: solid;
		padding: 1.5em;
	}

		.box > :last-child,
		.box > :last-child > :last-child,
		.box > :last-child > :last-child > :last-child {
			margin-bottom: 0;
		}

		.box.alt {
			border: 0;
			border-radius: 0;
			padding: 0;
		}

	.box {
		border-color: rgba(255, 255, 255, 0.35);
	}


	.image {
		border-radius: 8px;
		border: 0;
		display: inline-block;
		position: relative;
	}

		.image img {
			border-radius: 8px;
			display: block;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.left {
			float: left;
			margin: 0 1.5em 1em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
			margin: 0 0 1em 1.5em;
			top: 0.25em;
		}

		.image.fit {
			display: block;
			margin: 0 0 2em 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

		.image.main {
			display: block;
			margin: 0 0 3em 0;
			width: 100%;
		}

			.image.main img {
				width: 100%;
			}

/* List */

	ol {
		list-style: decimal;
		margin: 0 0 2em 0;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

	ul {
		list-style: disc;
		margin: 0 0 2em 0;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
				border-top: solid 1px;
				padding: 0.5em 0;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}

	dl {
		margin: 0 0 2em 0;
	}

		dl dt {
			display: block;
			font-weight: 400;
			margin: 0 0 1em 0;
		}

		dl dd {
			margin-left: 2em;
		}

		dl.alt dt {
			display: block;
			width: 3em;
			margin: 0;
			clear: left;
			float: left;
		}

		dl.alt dd {
			margin: 0 0 0.85em 5.5em;
		}

		dl.alt:after {
			content: '';
			display: block;
			clear: both;
		}

	ul.alt li {
		border-top-color: rgba(255, 255, 255, 0.35);
	}

	dl dt {
		color: #ffffff;
	}




/* Icons */

	ul.icons {
		cursor: default;
		list-style: none;
		padding-left: 0;
	}

		ul.icons li {
			display: inline-block;
			padding: 0 0.65em 0 0;
		}

			ul.icons li:last-child {
				padding-right: 0 !important;
			}

/* Section/Article */

	section.special, article.special {
		text-align: center;
	}

	header.major {
	}

		header.major h2 {
			font-size: 2em;
		}

			header.major h2:after {
				display: block;
				content: '';
				width: 3.25em;
				height: 2px;
				margin: 0.7em 0 1em 0;
				border-radius: 2px;
			}

				section.special header.major h2:after, article.special header.major h2:after {
					margin-left: auto;
					margin-right: auto;
				}

		header.major p {
			font-size: 1.25em;
			letter-spacing: -0.025em;
		}

		header.major.special {
			text-align: center;
		}

			header.major.special h2:after {
				margin-left: auto;
				margin-right: auto;
			}

	footer.major {
		margin-top: 3em;
	}

	@media screen and (max-width: 736px) {

		header.major {
			margin-bottom: 1em;
		}

			header.major h2 {
				font-size: 1.5em;
			}

			header.major p {
				font-size: 1em;
				letter-spacing: 0;
			}

				header.major p br {
					display: none;
				}

		footer.major {
			margin-top: 0;
		}

	}

	header.major h2:after {
		background-color: rgba(255, 255, 255, 0.35);
	}


	.features {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		width: calc(100% + 2em);
		margin: 0 0 3em -2em;
		padding: 0;
		list-style: none;
	}

		.features li {
			width: calc(33.33333% - 2em);
			margin-left: 2em;
			margin-top: 3em;
			padding: 0;
		}

			.features li:nth-child(1), .features li:nth-child(2), .features li:nth-child(3) {
				margin-top: 0;
			}

			.features li > :last-child {
				margin-bottom: 0;
			}

		@media screen and (max-width: 980px) {

			.features li {
				width: calc(50% - 2em);
			}

				.features li:nth-child(3) {
					margin-top: 3em;
				}

		}

		@media screen and (max-width: 736px) {

			.features {
				width: 100%;
				margin: 0 0 2em 0;
			}

				.features li {
					width: 100%;
					margin-left: 0;
					margin-top: 2em;
				}

					.features li:nth-child(2), .features li:nth-child(3) {
						margin-top: 2em;
					}

		}

/* Statistics */

	.statistics {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		width: 100%;
		margin: 0 0 3em 0;
		padding: 0;
		list-style: none;
		cursor: default;
	}

		.statistics li {
			-moz-flex: 1;
			-webkit-flex: 1;
			-ms-flex: 1;
			flex: 1;
			padding: 1.5em;
			color: #ffffff;
			text-align: center;
		}

			.statistics li.style1 {
				background-color: #efa8b0;
			}

			.statistics li.style2 {
				background-color: #c79cc8;
			}

			.statistics li.style3 {
				background-color: #a89cc8;
			}

			.statistics li.style4 {
				background-color: #9bb2e1;
			}

			.statistics li.style5 {
				background-color: #8cc9f0;
			}

			.statistics li b {
				display: block;
				font-size: 2em;
				line-height: 1.1;
				color: inherit !important;
				font-weight: 300;
				letter-spacing: -0.025em;
			}

			.statistics li:first-child {
				border-top-left-radius: 8px;
				border-bottom-left-radius: 8px;
			}

			.statistics li:last-child {
				border-top-right-radius: 8px;
				border-bottom-right-radius: 8px;
			}

			.statistics li .icon {
				display: inline-block;
			}

				.statistics li .icon:before {
					font-size: 2.75rem;
					line-height: 1.3;
				}

		@media screen and (max-width: 980px) {

			 .statistics li b {
				font-size: 1.5em;
			}

		}

		@media screen and (max-width: 736px) {

			.statistics {
				display: block;
				width: 20em;
				max-width: 100%;
				margin: 0 auto 2em auto;
			}

				.statistics li:first-child {
					border-bottom-left-radius: 0;
					border-top-right-radius: 8px;
				}

				.statistics li:last-child {
					border-top-right-radius: 0;
					border-bottom-left-radius: 8px;
				}

				.statistics li .icon:before {
					font-size: 3.75rem;
				}

				 .statistics li b {
					font-size: 2.5em;
				}

		}

/* Spotlight */

	.spotlight {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		margin: 0 0 2em 0;
	}

		.spotlight .content {
			-moz-flex: 1;
			-webkit-flex: 1;
			-ms-flex: 1;
			flex: 1;
		}

			.spotlight .content > :last-child {
				margin-bottom: 0;
			}

			.spotlight .content header.major {
				margin: 0 0 1em 0;
			}

		.spotlight .image {
			display: inline-block;
			margin-left: 4em;
			padding: 0.65em;
			border-radius: 100%;
			border: solid 1px;
		}

			.spotlight .image img {
				display: block;
				border-radius: 100%;
				width: 16em;
			}

		@media screen and (max-width: 980px) {

			.spotlight {
				-moz-flex-direction: column-reverse;
				-webkit-flex-direction: column-reverse;
				-ms-flex-direction: column-reverse;
				flex-direction: column-reverse;
				text-align: center;
			}

				.spotlight .content {
					-moz-flex: 0 1 auto;
					-webkit-flex: 0 1 auto;
					-ms-flex: 0 1 auto;
					flex: 0 1 auto;
					width: 100%;
				}

					.spotlight .content header.major h2:after {
						margin-left: auto;
						margin-right: auto;
					}

					.spotlight .content .actions {
						-moz-justify-content: center;
						-webkit-justify-content: center;
						-ms-justify-content: center;
						justify-content: center;
						width: calc(100% + 1em);
					}

				.spotlight .image {
					-moz-flex: 0 1 auto;
					-webkit-flex: 0 1 auto;
					-ms-flex: 0 1 auto;
					flex: 0 1 auto;
					margin-left: 0;
					margin-bottom: 2em;
				}

		}

		@media screen and (max-width: 736px) {

			.spotlight .image {
				padding: 0.35em;
			}

				.spotlight .image img {
					width: 12em;
				}

		}

	.spotlight .image {
		border-color: rgba(255, 255, 255, 0.35);
	}

/* Header */

	#header {
		padding: 5em 5em 1em 5em ;
		text-align: center;
	}

		#header h1 {
			margin: 0 0 0.25em 0;
		}

		#header p {
			font-size: 1.25em;
			letter-spacing: -0.025em;
		}

		#header.alt {
			padding: 1.5em 1em 0em 1em ;
		}

			#header.alt h1 {
				font-size: 3.25em;
			}

			#header.alt > * {
				-moz-transition: opacity 3s ease;
				-webkit-transition: opacity 3s ease;
				-ms-transition: opacity 3s ease;
				transition: opacity 3s ease;
				-moz-transition-delay: 0.5s;
				-webkit-transition-delay: 0.5s;
				-ms-transition-delay: 0.5s;
				transition-delay: 0.5s;
				opacity: 1;
			}

			#header.alt .logo {
				-moz-transition: opacity 1.25s ease, -moz-transform 0.5s ease;
				-webkit-transition: opacity 1.25s ease, -webkit-transform 0.5s ease;
				-ms-transition: opacity 1.25s ease, -ms-transform 0.5s ease;
				transition: opacity 1.25s ease, transform 0.5s ease;
				-moz-transition-delay: 0s;
				-webkit-transition-delay: 0s;
				-ms-transition-delay: 0s;
				transition-delay: 0s;
				display: block;
				margin: 0 0 1.5em 0;
			}

				#header.alt .logo img {
					display: block;
					margin: 0 auto;
					max-width: 75%;
				}

		@media screen and (max-width: 1280px) {

			#header {
				padding: 4em 4em 0.1em 4em ;
			}

				#header.alt {
					padding: 1.5em 4em 0em 4em ;
				}

		}

		@media screen and (max-width: 980px) {

			#header {
				padding: 4em 3em 0.1em 3em ;
			}

				#header.alt {
					padding: 1.5em 2em 0em 2em;
				}

		}

		@media screen and (max-width: 736px) {

			#header {
				padding: 3em 2em 0em 2em ;
			}

				#header p {
					font-size: 1em;
					letter-spacing: 0;
				}

					#header p br {
						display: none;
					}

				#header.alt {
					padding: 1em 2em 0em 2em ;
				}

					#header.alt h1 {
						font-size: 2.5em;
					}
@media screen and (max-width: 736px) {

    /* Reduz o margin-bottom do .logo no #header.alt */
    #header.alt .logo {
        margin-bottom: 0.8em; /* Reduz de 1.5em para 0.5em */
    }

    /* Garante que o h1 e p dentro do #header.alt não adicionem espaço extra */
    #header.alt h1 {
        margin-bottom: 0.5em; /* Reduz o espaço abaixo do h1 */
    }
    #header.alt p {
        margin-bottom: -1em; /* Reduz o espaço abaixo do p */
    }
}
		}

		@media screen and (max-width: 480px) {

			#header {
				padding: 3em 1.5em 0.1em 1.5em ;
			}

				#header.alt {
					padding: 4em 1.5em 0em 1.5em ;
				}

		}

		@media screen and (max-width: 360px) {

			#header {
				padding: 2.5em 1em 0.1em 1em ;
			}

				#header.alt {
					padding: 4em 1em 0em 1em ;
				}

		}

		body.is-preload #header.alt > * {
			opacity: 0;
		}

		body.is-preload #header.alt .logo {
			-moz-transform: scale(0.8) rotate(-30deg);
			-webkit-transform: scale(0.8) rotate(-30deg);
			-ms-transform: scale(0.8) rotate(-30deg);
			transform: scale(0.8) rotate(-30deg);
		}

/* Nav */

	#nav {
		-moz-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
		-webkit-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
		-ms-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
		transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
		background-color: #ffffff;
		color: #363636;
		position: absolute;
		width: 64em;
		max-width: calc(100% - 4em);
		padding: 1em;
		background-color: #f7f7f7;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		cursor: default;
		text-align: center;
		margin-top: 8px;
	}


		@media screen and (min-width: 1280px) {

			#nav {
				margin-top: 61px;
			}

		}


		#nav input, #nav select, #nav textarea {
			color: #636363;
		}


		#nav strong, #nav b {
			color: #636363;
		}

		#nav h1, #nav h2, #nav h3, #nav h4, #nav h5, #nav h6 {
			color: #636363;
		}

		#nav blockquote {
			border-left-color: #dddddd;
		}

		#nav code {
			background: rgba(222, 222, 222, 0.25);
			border-color: #dddddd;
		}

		#nav hr {
			border-bottom-color: #dddddd;
		}



		#nav ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}

			#nav ul li {
				-moz-transition: margin 0.2s ease;
				-webkit-transition: margin 0.2s ease;
				-ms-transition: margin 0.2s ease;
				transition: margin 0.2s ease;
				display: inline-block;
				margin: 0 0.35em;
				padding: 0;
				vertical-align: middle;
			}

				#nav ul li a {
					-moz-transition: font-size 0.2s ease;
					-webkit-transition: font-size 0.2s ease;
					-ms-transition: font-size 0.2s ease;
					transition: font-size 0.2s ease;
					display: inline-block;
					height: 2.25em;
					line-height: 2.25em;
					padding: 0 1.25em;
					border: 0;
					border-radius: 8px;
					box-shadow: inset 0 0 0 1px transparent;
				}

					#nav ul li a:hover {
						background-color: rgba(222, 222, 222, 0.25);
					}

					#nav ul li a.active {
						background-color: #ffffff;
						box-shadow: none;
					}

		#nav.alt {
			position: fixed;
			top: 0;
			padding: 0.5em 1em;
			background-color: rgba(247, 247, 247, 0.95);
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			z-index: 10000;
		}

			#nav.alt ul li {
				margin: 0 0.175em;
			}

				#nav.alt ul li a {
					font-size: 0.9em;
				}

		@media screen and (max-width: 768px) {

			#nav {
				display: none;
			}



		}


/* Main */

	#main {
		color: #363636;
		margin-top: 80px;

	}

	#main.tema-escuro {
		color: #fff;

	}





/* Footer */

	#footer {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		padding: 5em 5em 3em 5em ;
		width: calc(100% + 2em);
		margin: 0 0 3em -2em;
	}

		#footer > * {
			width: calc(50% - 2em);
			margin-left: 2em;
		}

		#footer .copyright {
			width: 100%;
			margin: 2.5em 0 2em 0;
			font-size: 0.8em;
			text-align: center;
		}

		@media screen and (max-width: 1280px) {

			#footer {
				padding: 4em 4em 2em 4em ;
			}

		}

		@media screen and (max-width: 980px) {

			#footer {
				padding: 4em 3em 2em 3em ;
				display: block;
				margin: 0 0 3em 0;
				width: 100%;
			}

				#footer > * {
					width: 100%;
					margin-left: 0;
					margin-bottom: 3em;
				}

				#footer .copyright {
					text-align: left;
				}

		}

		@media screen and (max-width: 736px) {

			#footer {
				padding: 3em 2em 1em 2em ;
			}

		}

		@media screen and (max-width: 480px) {

			#footer {
				padding: 3em 1.5em 1em 1.5em ;
			}

		}

		@media screen and (max-width: 480px) {

			#footer {
				padding: 2.5em 1em 0.5em 1em ;
			}

		}



/* Contenedor principal responsivo y moderno */
#wrapper{
	/* ancho ideal de lectura en desktop grande */
	max-width: 1200px;
	width: 100%;

	/* centrado */
	margin-left: auto;
	margin-right: auto;

	/* padding lateral fluido */
	padding-left: clamp(16px, 8vw, 128px);
	padding-right: clamp(16px, 8vw, 128px);
}

/* Pantallas muy grandes (monitores wide) */
@media (min-width: 1600px){
	#wrapper{
		max-width: 1320px;
	}
}

/* Tablets */
@media (max-width: 1024px){
	#wrapper{
		max-width: 960px;
	}
}

/* Mobile */
@media (max-width: 768px){
	#wrapper{
		max-width: 100%;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

    .questoes-container-wrapper * {
        box-sizing: border-box;
    }

    /* Container principal */
    .questoes-container-wrapper .container {
        display: flex;
        width: 100%;
    }


    /* Coluna das questões */
    .questoes-container-wrapper .questoes-container {
        width: 100%;
    }

    .questoes-container-wrapper.tema-escuro .questoes-container.tema-escuro {
        color: #fff;
    }

    /* Barra de progresso */
    .questoes-container-wrapper .progress-container {
        background-color: #ddd;
        height: 20px;
        border-radius: 10px;
        width: 100%;
        overflow: hidden;
    }

    .questoes-container-wrapper .progress-bar {
        background-color: #4caf50;
        height: 100%;
        width: 0;
        border-radius: 10px;
    }

    /* Estilo para as questões */
    .questoes-container-wrapper .questao {
        background-color: #fff;
        border-radius: 8px;        
        color: #000;
        border: 1px solid #e4e0e4;
        box-shadow: 0 0 5px rgb(0 0 0 / 8%);
        border-top: 7px solid #d4d1d4;
        border-bottom: 2px solid #d7d3d3;
        margin-bottom: 20px;
        padding: 15px; position: relative
    }


    .questoes-container-wrapper.tema-escuro .questao.tema-escuro {
        background-color: #1b1b1b;
        margin-bottom: 50px;
        border-radius: 4px;        
        color: #fff;
        border: 1px solid #302f2f;
        border-top: 7px solid #4b4a4a;
        margin-bottom: 20px;
    }

    .questao_topo_correcto {
    	border-top: 7px solid green !important;
    }

    .questao_topo_incorrecto {
    	border-top: 7px solid red !important;
    }

    .questao_topo_incorrecto.tema-escuro {
    	border-top: 7px solid #ab0a0a !important;
    }

    .questoes-container-wrapper .alternativa {
				display: flex;
        align-items: center;
        text-align: left;
        margin: 2px 0;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s, color 0.3s;
				color: #000 !important;
		    padding: 13px;
		    background: #f5f5f5;
		    border: 1px solid transparent;
		    font-size: 1rem;
    }


    .tema-escuro .questoes-container-wrapper.tema-escuro .alternativa {
    background: #303030;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

    }



	.paraselec:has(input:checked) {
	  background: #f7f0cc;
	  color: #000 !important;
	}

	.alternativa.paraselec.tema-escuro:has(input:checked) {
	  background: #693304;
	}


	.rpt_correcta {
		background: #d4edda !important;
	}

	.rpt_correcta.tema-escuro {
		background: #2d9345 !important;
	}

	.rpt_incorrecta {
		background: #edd4d7 !important;
	}

	.rpt_incorrecta.tema-escuro {
		background: #492227 !important;
	}


 @media (max-width: 768px) {
    .questoes-container-wrapper{
     margin: 0;
}}


.questoes-container-wrapper {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}



.alternativaW-correcta {
    background-color: #d4edda;
    border-radius: 4px;
    margin: 2px 0;
    padding: 13px;
        color: #000 !important;
}


.alternativaW-correcta.tema-escuro {
    background-color: #2d9345;
    color: #fff !important;


}

.alternativaW-incorrecta {
    background-color: #edd4d7;
    border-radius: 4px;
    /* background-image: url('/../../images/q-correcta.png');    
    background-repeat: no-repeat;
    background-position: right 0px center;
    background-size: 26px; */
    color: #957c7f !important;
    margin: 2px 0;
    padding: 13px 13px;
}

.alternativaW-incorrecta.tema-escuro {
    background-color: #492227;
    color: #9c6067 !important;


}

 .questoes-container-wrapper .alternativa input[type="radio"]:checked + label,
.questoes-container-wrapper .alternativa input[type="checkbox"]:checked + label {
    background-color: #e0e0e0;
}

    /* Estilos do botão */
    .questoes-container-wrapper .btn-verificar {
        background-color: #ccc;
        color: #333;
        border: none;
        padding: 10px 15px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
    }

    .questoes-container-wrapper .btn-verificar:hover {
        background-color: #bbb;
    }

    .questoes-container-wrapper .explicacao {
        margin-top: 10px;
        display: none;

    }






/* Estilo exclusivo para o botão com a classe 'verificar-resp' */
.verificar-resp {
    background-color: #3CB371 !important; /* Cor de fundo desejada */
    color: #FFF; /* Cor do texto */
    border: none; /* Remove a borda padrão */
    padding: 10px 0; /* Espaço interno do botão */
    width: 100%; /* Faz o botão ocupar 100% da largura do seu container */
    text-align: center; /* Alinha o texto horizontalmente */
    font-size: 16px; /* Tamanho da fonte */
    border-radius: 5px; /* Borda arredondada */
    cursor: pointer; /* Mostra um ponteiro de clique */
    transition: background-color 0.3s ease; /* Transição suave para mudança de cor */
    display: flex; /* Utiliza flexbox para facilitar o alinhamento */
    justify-content: center; /* Alinha o texto horizontalmente */
    align-items: center; /* Alinha o texto verticalmente */
    height: 50px; /* Altura do botão */
}

/* Estilo exclusivo para o botão ao passar o mouse */
.verificar-resp:hover {
    background-color: #D3C16A; /* Cor de fundo ao passar o mouse */
}

.questao.respondida {
    background-color: #000 !important; /* Cor de fundo para questões respondidas */
    color: #fff; /* Cor do texto para garantir a legibilidade */
}
    

.barra-progresso {
    height: 27px;
    background: linear-gradient(90deg, #4CAF50 0%, #2E7D32 100%);
    border-radius: 10px;
    width: 0%;
    transition: width 0.5s ease-in-out;
    text-align: center;
    color: white;
    font-size: 12px;
    line-height: 20px;

}
        .circle {
width: fit-content;            height: 50px; /* Define a altura igual à largura para manter o formato circular */
            background-color: #0A0F3D; /* Define a cor de fundo preta */
            border-radius: 10px; /* Transforma a div em um círculo */
            display: flex;
            flex-direction: column; /* Permite empilhar o texto verticalmente */
            align-items: center;
            justify-content: center;
            color: white; /* Cor do texto dentro do círculo */
            border: 1px solid #fff; /* Adiciona uma borda vermelha */
            position: fixed; /* Mantém a div fixa na tela */
            bottom: 20px; /* Distância do fundo da tela */
            left: 50%; /* Centraliza horizontalmente */
            transform: translateX(-50%); /* Ajusta para o centro exato */
            z-index: 1000; /* Garante que fique acima de outros elementos */
        }

        .small-text {
            font-size: 12px; /* Tamanho menor para o texto inferior */
            margin-top: -10px;
        }


         /* Exibe a lista apenas em telas menores que 768px (celulares) */
    @media screen and (max-width: 768px) {
      .circle {
            width: 10em; /* Define a largura */
            height: 45px; /* Define a altura igual à largura para manter o formato circular */
            border-radius: 10px; /* Transforma a div em um círculo */
                        background-color: transparent; /* Define a cor de fundo preta */

            display: flex;
            flex-direction: column; /* Permite empilhar o texto verticalmente */
            align-items: center;
            justify-content: center;
            color: white; /* Cor do texto dentro do círculo */
            position: fixed; /* Mantém a div fixa na tela */
            top: 10px; /* Distância do fundo da tela */
            left: 50%; /* Centraliza horizontalmente */
            transform: translateX(-50%); /* Ajusta para o centro exato */
            z-index: 9999; /* Garante que fique acima de outros elementos */
        }

        .small-text {
            font-size: 12px; /* Tamanho menor para o texto inferior */
            margin-top: -10px;
        }
    }

    /* Exibe se a largura for maior que 768px (não celular) */
    @media (max-width: 769px) {
      .topico {
        display: none;
      }
    }

#rabodecavalo {
    position: relative; /* Isso permite que filhos absolutos se posicionem em relação a ele */
    background-color: #000;
    height: 100%;
}


/* Estilo para alinhar os botões na mesma linha */
.botoes-container {
  display: flex;
  justify-content: space-between; /* Alinha os botões à direita */
  align-items: center;
  padding: 0px;
}

.separacion {

text-align: center; display: 
inline-block; 
white-space: nowrap; 
width: 100%;   
margin: 0.4em 0 0px 0;

}

@media (max-width: 1280px) {
    .separacion {   
margin: 1.2em 0 0px 0;

}
}
.botao-navegacao {
    background-color: #eee;
    color: #333;
    padding: 6px 10px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease;
}
.botao-navegacao:hover {
    background-color: #ddd;
}
/* Página atual com fundo azul */
.pagina-atual {
    background-color: #090F40;
    color: white;
    cursor: default;
}
/* Evita que o hover mude o estilo da página atual */
.pagina-atual:hover {
    background-color: #090F40;
    color: white;
}


        .close-btn {
            margin-top: 10px;
            padding: 5px 10px;
            background: red;
            color: white;
            border: none;
            cursor: pointer;
        }


        /* Botão Entrar */
        .enviar-report {
            background-color: #b30000 !important;
            box-shadow: inset 0 0 0 0px rgba(255, 255, 255, 0.35);
            height: 45px;
            width: 100%;
            font-size: 14px !important;
            font-weight: bold;
            color: #fff !important;
            padding: 0px !important;
        }

        @media (max-width: 768px) {
            .enviar-report {
                height: 45px;
                font-size: 12px !important;
                color: #fff !important;

            }
        }
        .barra-progresso-container {
        	background: #ccc;
		    width: 100%;/* seu valor inicial, ex: 100px ou 50% */;
		    position: relative;/* seu valor inicial, ex: relative */;
		    margin: 3px 0 3px 0;
		    transition: all 0s ease; /* opcional: para transições suaves */
		    border-radius: 10px;
		    height: 10px; border-radius: 12px; overflow: hidden;
}








/* === DESIGN BASE (comum a todos) === */
.btn-base {
  border-radius: 20px !important;
  color: #fff;
  cursor: pointer;
  box-shadow: none !important;
  padding: 10px 20px;
  border-width: 1px;
  border-style: solid;
  transition: background-color .2s ease;
  text-shadow: 0 2px 0px rgba(0, 0, 0, 0.3);

}

.btn-base:disabled,
.btn-base.btn-disabled {
	opacity: 0.4;
}

/* === VERDE (atual) === */
.btn-verde {
  background-color: #02711b !important;
  border-color: #3ecd4f !important;
}
.btn-verde:hover {
  background-color: #038922 !important;
}

/* === AZUL === */
.btn-azul {
  background-color: #015492 !important;
  border-color: #2289d8 !important;
}
.btn-azul:hover {
  background-color: #035fa3 !important;
}

/* === VERMELHO === */
.btn-vermelho {
  background-color: #c82828 !important;
  border-color: #e35a5a !important;
}
.btn-vermelho:hover {
  background-color: #a32020 !important;
}

/* === LARANJA === */
.btn-laranja {
  background-color: #e67e22 !important;
  border-color: #f2a65a !important;
}
.btn-laranja:hover {
  background-color: #cc6f1d !important;
}








/* === ROXO === */
.btn-roxo {
  background-color: #5b2d8b !important;
  border-color: #9b6fd1 !important;
}
.btn-roxo:hover {
  background-color: #4a2472 !important;
}

/* === ROSA === */
.btn-rosa {
  background-color: #d63384 !important;
  border-color: #f08bb7 !important;
}
.btn-rosa:hover {
  background-color: #b82b6f !important;
}

/* === AMARELO === */
.btn-amarelo {
  background-color: #f1c40f !important;
  border-color: #f7dc6f !important;
}
.btn-amarelo:hover {
  background-color: #d4ac0d !important;
}










.btn-login {
	padding: 6px 10px;
  background-color: #0e4ba9 !important;
  border-color: #3181ff !important;
}


.btn-login:hover {
  background-color: #1156c1 !important;
}


.btn-login.tema-escuro {
  background-color: #0e4ba9 !important;
  border-color: #3181ff !important;
}


.btn-login.tema-escuro:hover {
  background-color: #1156c1 !important;
}











/* === CIANO === */
.btn-ciano {
  background-color: #0aa2a8 !important;
  border-color: #5fd3d8 !important;
}
.btn-ciano:hover {
  background-color: #088c91 !important;
}

/* === CINZA === */
.btn-cinza {
  background-color: #5f6a6a !important;
  border-color: #aeb6bf !important;
}
.btn-cinza:hover {
  background-color: #4f5858 !important;
}

/* === PRETO (ELEGANTE) === */
.btn-preto {
  background-color: #1f1f1f !important;
  border-color: #5c5c5c !important;
}
.btn-preto:hover {
  background-color: #000000 !important;
}

/* === TURQUESA === */
.btn-turquesa {
  background-color: #1abc9c !important;
  border-color: #6fe3c7 !important;
}
.btn-turquesa:hover {
  background-color: #16a085 !important;
}






/* === TEMA ESCURO (preserva cores) === */
#main.tema-escuro .btn-base {
  box-shadow: none !important;
}





#linksContainer {
  white-space: nowrap; /* 🔹 Impede quebra de linha */
  align-items: center; /* sem efeito sem flex, pode remover se quiser */
  
}

.toggleLink {
  width: 40px;
  height: 40px;
  border: 1px solid #ccc;
  color: #9b9999;
  border-radius: 50%;
  cursor: pointer;
    transform: rotate(180deg);   /* 🔹 Gira todo o conteúdo */
    display: flex;
    align-items: center;     /* centraliza verticalmente */
    justify-content: center; /* centraliza horizontalmente */
    margin-left: 3px;
    margin-right: -10px;
}

    @media (max-width: 400px) {
        .toggleLink {
             width: 35px;
            height: 35px;
        }
    }

.toggleLink.tema-escuro {
  border: 1px solid #4b4a4a;
  color: #676565;

}

.toggleLink:active {
  animation: pressEffect 0.1s ease forwards;
}

@keyframes pressEffect {
  0%   { transform: rotate(180deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(180deg) scale(1); }
}

.toggleLink.toggle-ativo {
  background: #f7f5f5;
}

.toggleLink.tema-escuro.toggle-ativo {
  background: #222222;
}

.cortar-alt {
    width: auto;
    border-collapse: collapse;
    border: none;
    margin: 0;
    padding: 0;
    background: transparent;
    table-layout: auto;
    text-align: center;
    color: #939393;

}

.cortar-alt.tema-escuro {
    color: #fff;
}


.CANCELADO {

    text-decoration: line-through;
    pointer-events: none;
    user-select: none;
    opacity: 0.3;
      font-style: italic;


}

.CANCELADO.tema-escuro {
    background-color: #282828 !important;
    color: #5a5a5a !important;
}


/* CABEÇALHO DO FILTRO: DESKTOP = GRID 2 COLUNAS */
.filtro_cabec {
    background: #dedede;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center; /* alinhamento vertical */
}


/* tema escuro */
.filtro_cabec.tema-escuro {
  background: #38393b;
}

.filtros-titulo {
	font-size: 1rem;
	padding: 5px;

}

.filtros-resumo-count {
    background: #4d4d4d;      /* cinza mais escuro que se destaca sem exagero */
    color: #f0f0f0;           /* texto claro, limpo, legível */
    border: 1px solid #6a6a6a;/* contorno discreto */
    display: inline-flex;
    align-items: center;
    padding: 0 3px;
    border-radius: 999px;
    font-size: 1rem;
    white-space: nowrap;
}

.filtros-icones {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #000;
  font-size: 1.3em;
  cursor: pointer;
}

.filtros-icones.tema-escuro {
	color: #fff;
}

/* MOBILE: empilha tudo (título, tags, ícones) */
@media (max-width: 768px) {
  .filtro_cabec {
    display: grid;                 /* mantém duas colunas */
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }

  .filtros-icones {
    grid-column: 2;
    grid-row: 1 / span 2;          /* fica sempre à direita */
    align-self: center;
  }

  .tags-filtros {
    width: 100%;                   /* tags continuam quebrando linha */
  }
}


.admin-panel {
  padding: 30px 10px 15px 10px;
  background: #e9e8e8;
  font-size: 0.9rem;
  margin-top: -15px;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 0 5px rgb(0 0 0 / 8%);
  border: 1px solid #e4e0e4;
}

.admin-panel.tema-escuro {
    background: #1b1b1b;
    border-color: #333;
}



.questao input[type="checkbox"],
.questao input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.enunciado {
	margin-bottom: 10px;
	margin-top: 15px;
}

.enunciado,
.alternativa, .alternativa_respondidas {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: normal;

}

.enunciado,
.alternativa, .alternativa_respondidas {
lang: es;
}



           .carro {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
        }


 @media (max-width: 480px) {
    .carro{
        flex-direction: column; /* Adicionado: agora flex em coluna */
}}

        #skipLink {
            cursor: not-allowed; /* Initially disabled */
            background: linear-gradient(to right, #a1a1a1 0%, #cfcfcf 0%); /* Start with gray */
            color: #fff;
            font-size: 0.8em;
            padding: 10px;
            border-radius: 10px;
            display: inline-block;
            text-decoration: none;
            position: relative;
            transition: background 0.05s linear; /* Fast transition for smooth effect */
        }

        #skipLink a:hover {
            color: #fff;
        }

        #skipLink.enabled {
            cursor: pointer; /* Enabled cursor */
            background: linear-gradient(to right, #a1a1a1 100%, #cfcfcf 100%); /* Fully black when complete */
        }

        #skipLink.enabled:hover {
        color: #5c5a5a;
        text-decoration: underline;
        }

    .separador_ch {
        background-color: #dad7d7;
        height: 1px;
        width: 100%;
        border-radius: 10px;
        margin: 6em 0 1em 0;
    }

    .separador_ch.tema-escuro {
        background-color: #1f1f1f;
    }



.confirmacao {
    display: none;
    margin-top: 30px;
    padding: 20px;
    background-color: #f8f8f8;
    border-radius: 10px;
    text-align: center;
}

.confirmacao.tema-escuro {
    background: #353535;
    margin-top: 30px;
}

.deletar {
  color: white !important;
  font-weight: bold !important;
  text-align: center !important;
  text-decoration: none !important;
  background-color: #cd0e21 !important; /* Vermelho padrão de "danger" */
  padding: 0px 20px !important;
  margin: 0 !important;
  border: none !important;
  text-shadow: 0px 1px 0px #000 !important;
  filter: dropshadow(color=#000, offx=0px, offy=1px) !important;
  box-shadow: inset 0 0px 0 #971925, 0 8px 0 #971925 !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Botões de confirmação */

.confirmacao-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.si, .no, .solo_falladas {
  color: white !important;
  font-weight: bold !important;
  text-align: center !important;
  text-decoration: none !important;
  padding: 0px 20px !important;
  margin: 0 !important;
  border: none !important;
  text-shadow: 0px 1px 0px #000 !important;
  filter: dropshadow(color=#000, offx=0px, offy=1px) !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  min-width: 100px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.solo_falladas {
  background-color: #daa300 !important;
  box-shadow: inset 0 0px 0 #9c7605, 0 8px 0 #9c7605 !important;
}

.solo_falladas:hover {
  text-decoration: underline !important;
}

.si {
  background-color: #cd0e21 !important;
  box-shadow: inset 0 0px 0 #971925, 0 8px 0 #971925 !important;
}

.si:hover {
  text-decoration: underline !important;
}

.no {
  background-color: #6c757d !important;
  box-shadow: inset 0 0px 0 #495057, 0 8px 0 #495057 !important;
}

.no:hover {
  text-decoration: underline !important;
}

/* Media query para telas menores */
@media (max-width: 600px) {
    .confirmacao-buttons {
        flex-direction: column;
        gap: 10px; /* Espaço entre botões empilhados */
    }
    
    .si, .no, .solo_falladas {
        width: 100%; /* Botões ocupam toda a largura */
        max-width: 200px; /* Limita a largura máxima */
        margin: 0 auto !important; /* Centraliza */
    }
}

#overlay-bloqueio, #overlay-bloqueio-do-salvar {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0); /* transparente */
  z-index: 99999;
  display: none;
  /*cursor: wait;  mostra cursor de carregamento */
}



    b, strong {
        font-weight: bold !important;
    }

body {
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 
               'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 
               'Helvetica Neue', Arial, sans-serif;

  /* Rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* Layout */
  margin: 0;
  padding: 0;
  min-height: 100vh;

  /* Cores base */
  color: #000;

  /* Animação de entrada */
  animation: fadeIn 0.35s ease-out both;

  background: #f4eff4;

  font-size: 1rem;

  display: flex;
  flex-direction: column;


}

/* Dark mode */
.tema-escuro body,
body.tema-escuro {
  background-color: #0f0f14;
  color: #e5e7eb;
}


a {
	color: #0678cc;
	text-decoration: none;
}

a:hover {
	color: #0678cc;
	text-decoration: underline;
}



@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
        /* Estilo extra para seção principal */
        .section-conteudo {
            margin: 20px 0 0 0;
            animation: slideIn 0.8s ease-out forwards;

        }
        @keyframes slideIn {
            0% { transform: translateY(20px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }

        /* Spinner de carregamento */
        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            z-index: 999;
        }
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .footer-links a {
            color: #a9a6a6;
            text-decoration: none;
            display: block;
            margin: 10px 0;
            transition: all 0.3s ease;
        }

        .footer-links a:hover {
            text-decoration: underline;
            color: #ffffff;
        }



        strong {
            font-weight: bold;
        }


.hamburger {
  margin-top: 8px;
  margin-top: 20px;
  width: 24px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 3px;
  background: #f7f9fa;
  border-radius: 2px;
  transition: 0.3s;
}




/* ==========================
   ESTILOS DO FILTRO
   ========================== */

/* container geral */
#filtros-practicar{
}

/* rótulos padrão */
#filtros-practicar label{
}

/* fake select genérico (facultad, materias, temas) */
.fake-select{
  border:1px solid #ccc;
  padding:0px 5px;
  height: 45px;
  border-radius:4px;
  cursor:pointer;
  user-select:none;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-sizing:border-box;
  font-size: 14px;
}
.fake-select.tema-escuro {
  background: #131314;
  border:1px solid #2e2d2d;
}

.fake-select {
  position: relative;
  padding-left: 34px; /* espaço pro ícone */
}

/* ícone para FACULTAD */
.select-facultad::before {
  content: "\F35A";              /* código do ícone */
  font-family: "remixicon";      /* fonte usada pelo Remix Icon */
  font-size: 20px;
  color: #555;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.8;
}

.select-materias::before {
  content: "\EDC7";              /* código do ícone */
  font-family: "remixicon";      /* fonte usada pelo Remix Icon */
  font-size: 20px;
  color: #555;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.8;
}

.select-temas::before {
  content: "\EEBA";              /* código do ícone */
  font-family: "remixicon";      /* fonte usada pelo Remix Icon */
  font-size: 20px;
  color: #555;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.8;
}


/* botão filtrar desabilitado */
#btn-filtrar[disabled]{
  cursor:not-allowed;
  opacity:0.5;
}

.materias-grupo{
  transition: opacity 0.2s ease;
}

/* categoria visual */
.categoria{
  margin-bottom:10px;
}

/* título da categoria */
.cat-titulo{
  font-weight:600;
  color:#444;
}

.cat-titulo.tema-escuro {
	color: #5b5b5b;
}

/* deslocamento das matérias */
.categoria label{
  padding-left:7px;
  border-bottom: 1px solid #ebebeb;
  display:block;
  color:#222;
}

.categoria.tema-escuro label{
    border-bottom: 1px solid #272626;
    color: #7e7e7e;
}

.categoria label:hover{
  background:#f5f5f5;
  border-radius:4px;
}

.categoria.tema-escuro label:hover{
  background:#1c1c1c;
  color: #7e7e7e;
}

/* item selecionado */
.selecionado{
  background:#d4f8d4;
  padding:4px 6px;
}

/* selecionado dentro do dropdown */
.fake-options label.selecionado{
  background:#d4f8d4;
}

.fake-options.tema-escuro label.selecionado{
  background: #373737;
}

/* container de tags */
.temas-tags{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

/* cada tema */
.tema-tag {
  background:#89e689;
  padding:3px 8px;
  border-radius:10px;
  font-size:1rem;
  white-space:nowrap;
  color: #000;
}

.tema-tag.tema-escuro {
	background-color: #0e8129;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* borda verde quando houver seleção */
.fake-select.selecionado-select{
	  border: 1px solid #378834;
    opacity: 0.7;
    background: #f3fff4;
}

.fake-select.selecionado-select.tema-escuro { 
  background: #001401;
  color: #fff;
  border: 1px solid #003c2b;
  opacity: 0.9;
}

#tema-label {
  color: #9d9a9a;
}

#tema-label.tema-escuro {
  color: #9d9a9a;
}

#tema-label.tema-escuro:after {
  color: #9d9a9a;
}


#link-preview {
  display: none;
}

.linha-filtrar {
  display: flex;
  justify-content: flex-end; /* joga o botão para a direita */
}

/* ÁREA DAS TAGS */
.tags-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
      margin: 6px 0 0 0;
}


/* CORES POR CATEGORIA */
.tag-facultad { background: #e1f0ff; color: #003366; }
.tag-facultad.tema-escuro {
    background: #571425;
    color: #ffb3b3;
    border: 1px solid #823434;
}
.tag-materia  { background: #ffe9c6; color: #6a3c00; }
.tag-tipo     { background: #f3d7ff; color: #4b145e; }
.tag-materia.tema-escuro {
    background: #5c3b00;     /* marrom escuro quente */
    color: #ffd9a0;          /* bege claro suave */
    border: 1px solid #7a5200;
}

.tag-tema.tema-escuro {
    background: #154a25;     /* verde escuro fechado */
    color: #b6f2b6;          /* verde claro pastel */
}

.tag-tipo.tema-escuro {
    background: #3d134a;     /* roxo profundo */
    color: #f0b8ff;          /* lilás suave */
    border: 1px solid #5e2970;
}

/* TEXTO QUANDO NÃO HÁ FILTROS */
.resumo-vazio {
  color: #777;
  font-size: 12px;
}


.tags-filtros {
  display: none;        /* padrão: escondido, só aparece quando abrir */
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 0.8rem;
  white-space: nowrap;
}




/* ============================
   CHECKBOX CUSTOMIZADO UNIVERSAL
   (funciona em qualquer lugar que usar o padrão abaixo)

   HTML esperado:
   <label class="checkbox">
     <input type="checkbox">
     <span class="checkbox-ui"></span>
     Texto da opção
   </label>
   ============================ */

/* Label "container" do checkbox */
label.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  user-select: none;
  font-size: 0.9rem;
}

/* Esconde apenas o checkbox nativo usado dentro desse padrão */
label.checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Caixa visual do checkbox */
label.checkbox .checkbox-ui {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid #6e6e6e;
  background: #ffffff;
  display: inline-block;
  transition: all 0.25s ease;
  position: relative;
}

/* Desenho do "check" (✔) */
label.checkbox .checkbox-ui::after {
  content: "";
  width: 6px;
  height: 12px;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(45deg);
  position: absolute;
  top: -1px;
  left: 5px;
  transition: all 0.25s ease;
}

/* Quando marcado */
label.checkbox input[type="checkbox"]:checked + .checkbox-ui {
  background: #2f9147;
  border-color: #2f9147;
}

label.checkbox input[type="checkbox"]:checked + .checkbox-ui::after {
  border-right-color: #fff;
  border-bottom-color: #fff;
}

/* Hover (bordas mais fortes) */
label.checkbox:hover .checkbox-ui {
  border-color: #4a4a4a;
  color: #000;
}

/* Foco acessível */
label.checkbox input[type="checkbox"]:focus + .checkbox-ui {
  box-shadow: 0 0 0 3px rgba(80,150,255,0.4);
}

/* Desabilitado */
label.checkbox input[type="checkbox"]:disabled + .checkbox-ui {
  opacity: 0.5;
  cursor: not-allowed;
}



/* ============================
   VERSÃO TEMA ESCURO
   (qualquer ancestral com .tema-escuro)
   ============================ */

.tema-escuro label.checkbox {
  color: #e6e6e6;
}

.tema-escuro label.checkbox:hover {
color: #fff;
}

.tema-escuro label.checkbox .checkbox-ui {
  background: #2a2a2a;
  border-color: #888;
}

.tema-escuro label.checkbox:hover .checkbox-ui {
  border-color: #b5b5b5;
}

.tema-escuro label.checkbox input[type="checkbox"]:checked + .checkbox-ui {
  background: #4caf50;
  border-color: #4caf50;
}

.tema-escuro label.checkbox input[type="checkbox"]:checked + .checkbox-ui::after {
  border-right-color: #fff;
  border-bottom-color: #fff;
}

.tema-escuro label.checkbox input[type="checkbox"]:focus + .checkbox-ui {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
}


.contador-results {
	color: #000;
	font-size: 1rem;
}

.contador-results.tema-escuro {
	color: #9f9b9b;
}


/* container de cada categoria */
.categoria {
  margin-bottom: 6px;
}



/* quando aberta, mostra os itens */
.categoria.aberta .cat-items {
  display: block;
}


.cat-titulo {
  background: #ebeaea;
  color: #333;
}

.cat-titulo:hover {
  background: #d1d1d1;
}

.tema-escuro .cat-titulo {
  background: #111010;
  color: #f5f5f5;
}

.tema-escuro .cat-titulo:hover{ 
background:rgba(255,255,255,.04);
}


.tema-escuro .cat-titulo:hover {
  background: #000;
}


#filtros-titulo {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

#filtros-titulo.oculto {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: none;
}




.listar_temas {
	border-bottom: 1px solid #e8e8e8
}

.listar_temas.tema-escuro {
	border-bottom: 1px solid #272626
}


#tags-filtros-container {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .25s ease, max-height .25s ease;
}

#tags-filtros-container.visivel {
  opacity: 1;
  max-height: 200px; /* algo suficiente */
}

.admin-panel.aberto {

  display: block;
}


.admin-panel.oculto {
  display:none;
}



























/* Contêiner dos blocos: lado a lado + wrap */
#filtros-feedback {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;              /* espaço entre blocos */
}


#filtros-feedback .fb-bloco {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;   /* impede quebra de linha interna */
    gap: 6px;
    background: #f9f9f9;
    padding: 4px 5px;
    border-radius: 3px;
}

#filtros-feedback.tema-escuro .fb-bloco.tema-escuro {
	background: #353535;
	color: #aaaaaa;
}


#filtros-feedback .fb-bloco_paratemas {
    display: flex;
    flex-wrap: wrap;      /* permite empilhar */
    align-items: center;
    gap: 6px;
    background: #f9f9f9;
    padding: 4px 5px;
    border-radius: 3px;
}
#filtros-feedback.tema-escuro .fb-bloco_paratemas.tema-escuro {
	background: #353535;
	color: #aaaaaa;
}


/* Tags internas (mantendo teu estilo atual) */
#filtros-feedback .tag-fb {
    display:inline-flex;
    align-items:center;
    padding: 2px 6px;
    background:#e7e7e7;
    color:#696868;
    border-radius:4px;
    font-size:0.75rem;
    line-height: 1;

}
#filtros-feedback.tema-escuro .tag-fb.tema-escuro {
	background: #1b1b1b;
	color: #cccccc;
}

/* Ícone de remoção (mantendo teu estilo atual) */
#filtros-feedback .tag-x {
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    font-size:15px;
    color:#a75c5c;
}
#filtros-feedback.tema-escuro .tag-x.tema-escuro {
	color: #7c3b3b;
}

#filtros-feedback .tag-x i {
    pointer-events:none;
}

#filtros-feedback .tag-x:hover {
    color:#cc0000;
}


/* contêiner flex */
#filtros-feedback {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;  /* espaço padrão entre itens */
}

/* prefixo fixo antes dos blocos */
#filtros-feedback .fb-prefix {
    font-weight:600;
    font-size:0.8rem;
    color:#333;
    white-space:nowrap;   /* impede quebrar o texto */
}

/* tema escuro */
#filtros-feedback .fb-prefix {
    color:#000;
}

#filtros-feedback.tema-escuro .fb-prefix.tema-escuro {
    color:#ccc;
}



/* ícone de remoção */
#filtros-feedback .tag-x{
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    font-size:15px;
    color:#9b0000;
}

#filtros-feedback .tag-x i{
    pointer-events:none;
}

#filtros-feedback .tag-x:hover{
    color:#cc0000;
}









.header_filtro {
	padding: 20px 20% 20px 20%;
	background: #fff;
}



.alert-container-login {
    width: 100%;
    margin-left: 0px;
}

.alert-box {
    background-color: #e6f3ff;
    border-left: 5px solid #0066cc;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: 100%;
    margin-top: 0px;
}

@media screen and (max-width: 1280px) {
    .alert-box {
        margin-top: 0px;
    }
}

.alert-box p {
    margin: 0;
    color: #333;
    font-size: 0.9em;
    text-align: center;
    width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

.alert-box a {
    color: #0077cc;
    text-decoration: underline;
}

.alert-box a:hover {
    color: #005fa3;
}

.alert-box strong {
    color: #0066cc;
    font-weight: 600;
}




       .tooltip-custom {
            position: relative;
            display: inline-block;
        }
        .tooltip-text {
            visibility: hidden;
            opacity: 0;
            background: #111;
            color: #fff;
            text-align: center;
            border-radius: 10px;
            padding: 10px 10px;
            position: absolute;
            z-index: 9999;
            top: calc(100% + 10px);
            left: 50%;
            transform: translateX(-50%) translateY(-10px);
            transition: all 0.25s ease;
            font-size: 1rem;
            box-shadow: 0 3px 10px rgba(0,0,0,0.25);
            border: 1px solid #1e1e1e;
            white-space: nowrap;
            pointer-events: none;
        }

        .tooltip-custom:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        .oculto-js {
            opacity: 0 !important;
            transform: scale(0.95);
            pointer-events: none;
        }
        .questoes-respondidas-container.oculto-js,
        .titulo_respondidas.oculto-js,
        .content.oculto-js,
        .major.oculto-js,
        .separador_ch.oculto-js,
        .tetete2.oculto-js,
        .nav_menu_princ.oculto-js,
        .rodape_1.oculto-js {
            height: 0 !important;
            overflow: hidden !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            min-height: 0 !important;
            font-size: 1rem;
        }
        #CARRO, #TETO, #PRITUBA, 
        .volver_trofeu, .content, .separacion,
        .titulo_choices, .questoes-respondidas-container,
        .titulo_respondidas, .content, .major, .separador_ch,
        .tetete2, .nav_menu_princ, .rodape_1 {
            transition: all 0.6s ease;
        }
        .ajustar-mt {
            transition: margin-top 0.6s ease;
        }







.alert-container-login {
    width: fit-content;
    padding: 55px;
    position: fixed;       /* fica fixa na tela, mesmo ao rolar */
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* centraliza horizontalmente */
    z-index: 100010;
}

.alert-box-login {
    background-color: #d4edda;
    border-left: 5px solid #28a745;
    padding: 15px 20px;
    border-radius: 10px; /* Opcional: removi os cantos arredondados para um look mais "full-width" */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* sombra suave e elegante */
    width: fit-content;
}

.alert-box-login p {
    margin: 0;
    color: #28a745;
    font-size: 0.9em;
    text-align: center;
    white-space: nowrap; /* Impede a quebra de linha */
}





.cont-zx9{
background: #fff;
  border:1px solid #ccc;
  padding:8px;
  border-radius:8px;
  margin-bottom: 70px;
  box-shadow: 0 0 5px rgb(0 0 0 / 8%);
}

.cont-zx9.tema-escuro{
	background: #1b1b1b;
	border:1px solid #282727;
}

.topo-f31{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  cursor:pointer;
}

.texto-topo-p77{
  font-weight:600;
}

.texto-topo-p77 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;    /* impede empilhamento */
    white-space: nowrap;  /* evita quebra de linha no conteúdo */
}


.botao-topo-k11 {
margin-top: 5px;
}

.botao-topo-k11 i{
  font-size: 1.3em;
  line-height: 0.5em;
  transition:transform .25s ease;
}

.corpo-v18{
  overflow:hidden;
  transition:max-height .3s ease;
  max-height:0;
  padding-top:0;
}

.corpo-v18.aberto{
  max-height:300px;
  padding-top:6px;
}






.pagination-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;   /* opcional */
    margin-bottom: 20px; /* opcional */
    height: 40px;

}

.pagination-box {
    display: inline-flex;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 5px rgb(0 0 0 / 8%);
}

.tema-escuro .pagination-box { border: 1px solid #2d2c2c; }


.pag-item {
    padding: 9px 18px 8px 18px;
    border-right: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    background: #fff;
    cursor: pointer;
    font-size: 1rem;
}

.tema-escuro .pag-item {
  background: #1b1b1b;
  color: #fff;
  border-right: 1px solid #2d2c2c;
}

.pag-item:last-child {
    border-right: none;
}

.pag-item:hover {
    background: #f3f6f8;
}

.tema-escuro .pag-item:hover { background: #101010; }


.pag-item.active {
    background: #f3f6f8;
    color: #0070c9;
    font-weight: bold;
}

.tema-escuro .pag-item.active {
  background: #101010;
  color: #fff;
}

.pag-ellipsis {
    padding: 8px 14px;
    border-right: 1px solid #ddd;
    background: #fff;
    color: #666;
    font-size: 1rem;
    pointer-events: none;
}

.tema-escuro .pag-ellipsis {
  background: #1b1b1b;
  border-right: 1px solid #2d2c2c;
  color: #fff;
}


.arrow {
    font-size: 18px;
    padding: 5px 14px 8px 14px;
}
.arrow:hover {
    background: #f3f6f8;
}








.bx_k29a {
    display:flex;
    flex-wrap:wrap;
    gap:5px 5px;
    justify-content:center;
    margin:0 0 10px 0;
    font-size:0.9rem;
}

.it_zz19 {
    display: flex;
    align-items: center;
    background: #f2f2f2;
    padding: 2px 5px;
    border-radius:6px;
    white-space:nowrap;
    font-size: 1rem;
}

@media (max-width: 768px) {
.it_zz19 {
font-size: 0.8rem;
}
}

.tema-escuro .it_zz19 { background: #272626; }


.it_zz19 i {
    font-size:1.4rem;
    margin-right:2px;
    font-weight: 600;
}

/* percentuais */
.pct_x1 {
    margin-left:4px;
    color:#555;
    font-weight:600;
}

.pct_x1.tema-escuro {
	color: #ccc;
}

/* ícones coloridos */
.icon_c01 { color:#4e7cff; }
.icon_c02 { color:#ff9800; }
.icon_c03 { color:#28a745; }
.icon_c04 { color:#e53935; }




#fb-temas {
    display: flex;
    flex-wrap: wrap;   /* permite empilhar */
    gap: 6px;          /* mantém espaçamento entre spans */
}



.hide {
	display: none !important;
}
















.barra-progresso-container-multi {
    width: 100%;
    height: 14px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    background: #ccc;
}

.tema-escuro .barra-progresso-container-multi { background: none; }


.prog-facil {
    background: green;
    height: 100%;
    transition: width 0.4s ease;
}

.prog-facil.tema-escuro {
	background: #0e7235;
	border-right: none;
	border-radius: 5px 0 0 5px;
}

.prog-dificil {
    background: red;
    height: 100%;
    transition: width 0.4s ease;
}

.prog-dificil.tema-escuro {
	background: #771212;
}

.prog-pendente {
    background: #e6e6e6;
    height: 100%;
    transition: width 0.4s ease;
}

.tema-escuro .prog-pendente { background: #323232; }







.msg_correcta {
	background: #eee;
	color: green;
	padding: 0 10px;
	border-left: 2px solid green;
	  font-style: italic;
}

.msg_correcta.tema-escuro {
	background: #333;
	color: #09df09 !important;
	padding: 0 10px;
	border-left: 2px solid #09df09;
	  font-style: italic;
}

.msg_incorrecta {
	background: #f3f3f3;
	color: red;
	padding: 0 10px;
	border-left: 2px solid red;
	  font-style: italic;
}

.msg_incorrecta.tema-escuro {
	background: #252424;
	color: red;
	padding: 0 10px;
	border-left: 2px solid red;
	  font-style: italic;
}










/* container do estado dentro da questão */
.estado-questao{
  display:flex;
  justify-content:flex-end;   /* alinha à direita */
  align-items:center;
  margin-bottom:6px;
}

/* span base */
.estado-questao .estado{
  font-size:14px;
  padding:2px 8px;
  margin: 0 0 10px 0;
  border-radius:999px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}

/* estados */
.estado-questao .estado-nunca{
  background:#e5e7eb;
  color:#374151;
}

.estado-questao .estado-correcta{
    background: #dcfce7;
    color: #166534;
    padding: 5px 5px;
    border: 1px solid #b1d9bf;
}

.estado-questao.tema-escuro .estado-correcta.tema-escuro{
  background:#073318;
  color: #319f5b;
	border: 1px solid #136532;

}

.estado-questao .estado-incorrecta{
  background:#fee2e2;
  color:#991b1b;
  padding: 5px 5px;
  border: 1px solid #e5b8b8;
}

.estado-questao.tema-escuro .estado-incorrecta.tema-escuro{
  background:#591d1d;
  color:#b3a3a7;
  border: 1px solid #7d2626;
}




/* Scrollbar escura quando o site estiver em .tema-escuro */
.tema-escuro{
  scrollbar-color: rgba(226,232,240,.28) rgba(2,6,23,.55); /* Firefox */
  scrollbar-width: thin; /* Firefox */
}

/* Chromium: Chrome / Edge / Safari */
.tema-escuro ::-webkit-scrollbar{
  width: 12px;
  height: 12px;
}

.tema-escuro ::-webkit-scrollbar-track{
  background: rgba(2,6,23,.55);
}

.tema-escuro ::-webkit-scrollbar-thumb{
  background: rgba(226,232,240,.22);
  border-radius: 999px;
  border: 3px solid rgba(2,6,23,.55);
}

.tema-escuro ::-webkit-scrollbar-thumb:hover{
  background: rgba(226,232,240,.34);
}

.tema-escuro ::-webkit-scrollbar-corner{
  background: rgba(2,6,23,.55);
}
































input,
select,
textarea,
button {
  font-family: inherit;
  font-size: clamp(14px, 2.8vw, 15px);
  line-height: 1.4;
  outline: none;
  box-sizing: border-box;
}

/* Remove estilos nativos inconsistentes */
input,
select,
textarea {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* =========================================================
   ESTILO PADRÃO (CLARO)
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
select,
textarea {
  width: 100%;
  min-height: 44px; /* área de toque mobile */
  padding: clamp(10px, 3vw, 12px) clamp(12px, 4vw, 14px);
  border-radius: clamp(8px, 2.5vw, 10px);
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #111827;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
  color: #9ca3af;
}

/* Focus */
input:focus,
select:focus,
textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 clamp(2px, .6vw, 3px) rgba(59,130,246,.15);
}

/* Textarea */
textarea {
  min-height: clamp(60px, 14vw, 90px);
  resize: vertical;
}

/* Select (seta responsiva) */
select {
  padding-right: clamp(34px, 6vw, 38px);
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:
    calc(100% - clamp(18px, 4vw, 20px)) 50%,
    calc(100% - clamp(12px, 3vw, 14px)) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

/* Checkbox e Radio */
input[type="checkbox"],
input[type="radio"] {
  width: clamp(16px, 4vw, 18px);
  height: clamp(16px, 4vw, 18px);
  accent-color: #3b82f6;
  cursor: pointer;
}

/* Disabled */
input:disabled,
select:disabled,
textarea:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* Erro */
.input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 clamp(2px, .6vw, 3px) rgba(239,68,68,.15);
}

/* =========================================================
   TEMA ESCURO
   ========================================================= */

.tema-escuro input[type="text"],
.tema-escuro input[type="email"],
.tema-escuro input[type="password"],
.tema-escuro input[type="number"],
.tema-escuro input[type="search"],
.tema-escuro input[type="tel"],
.tema-escuro input[type="url"],
.tema-escuro input[type="date"],
.tema-escuro input[type="time"],
.tema-escuro select,
.tema-escuro textarea {
  background: #0b0f14;
  border: 1px solid #1f2937;
  color: #e5e7eb;
}

/* Placeholder escuro */
.tema-escuro input::placeholder,
.tema-escuro textarea::placeholder {
  color: #6b7280;
}

/* Focus escuro */
.tema-escuro input:focus,
.tema-escuro select:focus,
.tema-escuro textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 clamp(2px, .6vw, 3px) rgba(96,165,250,.2);
}

/* Checkbox / Radio escuro */
.tema-escuro input[type="checkbox"],
.tema-escuro input[type="radio"] {
  accent-color: #60a5fa;
}

/* Disabled escuro */
.tema-escuro input:disabled,
.tema-escuro select:disabled,
.tema-escuro textarea:disabled {
	opacity: 0.4;
}

/* Erro escuro */
.tema-escuro .input-error {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 clamp(2px, .6vw, 3px) rgba(248,113,113,.25);
}





.estado-divs-ocultas .nav_menu_princ,
.estado-divs-ocultas .rodape_1,
.estado-divs-ocultas .questoes-respondidas-container,
.estado-divs-ocultas .titulo_respondidas,
.estado-divs-ocultas .content,
.estado-divs-ocultas .major,
.estado-divs-ocultas .tetete2,
.estado-divs-ocultas .separador_ch,
.estado-divs-ocultas .separacion,
.estado-divs-ocultas .titulo_choices,
.estado-divs-ocultas .volver_trofeu,
.estado-divs-ocultas #CARRO,
.estado-divs-ocultas #TETO,
.estado-divs-ocultas #PRITUBA {
  display: none !important;
}





#loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tema-escuro #loader {
  background: #262525;
}






html {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.2px;
  height: 100%;
}

html.tema-escuro {
  font-weight: 500;
}

h1 {
  font-size: 1.8rem !important;
  line-height: 1;
}

h2 {
  font-size: 1.6rem !important;
  line-height: 1;
  margin-bottom: 1em;
  font-weight: 500;
}

h3 {
  font-size: 1.4rem !important;
  line-height: 1;
}

h4 {
  font-size: .9rem !important;
  line-height: 1;
}

h5 {
  font-size: 1rem !important;
  line-height: 1;
}

h6 {
  font-size: 0.95rem !important;
  line-height: 1;
}



@media print {
  body {
    display: none !important;
  }
}



/* Alerta de upload (más limpio + “moderno”) */
.alerta_geral{
  /* layout */
  display: none;              /* lo seguís controlando con JS */
  width: 100%;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;

  /* tipografía */
  font-size: 0.95rem;
  line-height: 1.25;
  font-weight: 600;

  /* colores (error suave, legible) */
  background: #ffe9ea;
  border: 1px solid #f5b6bb;
  color: #7a1f2b;

  /* estética */
  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.08);
  position: relative;
  overflow: hidden;

  /* si el texto es largo */
  word-break: break-word;
}

/* ícono */
.alerta_geral::after{
  content: "⚠";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.75;
  font-size: 1.05rem;
}

/* Dark mode (si usás .tema-escuro) */
.tema-escuro .alerta_geral{
  background: rgba(228, 81, 99, 0.14);
  border-color: rgba(228, 81, 99, 0.35);
  color: #ffd6dc;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.tema-escuro .alerta_geral::before{ background: #ff6b7c; }




/* Selector de alta especificidad para el contenedor principal */
mjx-container[jax="CHTML"][display="true"] {
    font-size: 1.3rem !important; /* Escalamiento de la raíz del componente */
    margin:  0 !important;
    display: block;
    overflow-x: auto; /* Evita recortes en resoluciones bajas */
    overflow-y: hidden;
    text-align: center; /* Ajustar según preferencia: left/center/right */
}

/* Forzar escalado de los glifos individuales si persiste la restricción */
mjx-container[jax="CHTML"] * {
    font-size: inherit !important;
}

mjx-container[jax="CHTML"][display="true"] mjx-math {
	background: #000;
}



mjx-container[jax="CHTML"][display="true"] mjx-math {
    background: #c6e3c5;
    padding: 10px !important;
    border-radius: 5px;
}



.tema-escuro mjx-container[jax="CHTML"][display="true"] mjx-math {
    background: #051e02;
    padding: 10px !important;
    border-radius: 5px;
}


.explicacion_detallada {
	margin: 0 auto;
	max-width: 600px;
}



.parcialXfinal_cabec {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 25px;
  height: 25px;

  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;

  vertical-align: middle;
  cursor: default;

  /* CRÍTICO: mantém hover estável */

}

/* letra P / F */
.badge-letra {
  position: relative;
  transition: opacity 0.15s ease;
}

/* texto expandido */
.badge-texto {
  position: absolute;
  right: 0;
  top: 50%;

  transform: translateY(-50%) scaleX(0.85);
  transform-origin: right center;

  height: 25px;
  padding: 0 8px;

  display: inline-flex;
  align-items: center;

  border-radius: 999px;
  white-space: nowrap;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.15s ease,
    transform 0.2s ease;


}

/* hover */
.parcialXfinal_cabec:hover .badge-texto {
  opacity: 1;
  transform: translateY(-50%) scaleX(1);
}

.parcialXfinal_cabec:hover .badge-letra {
  opacity: 0;
}

.parcial {
  border: 1px solid #0db37c;
  color: #0db37c;
}

.parcial.tema-escuro {
  border: 1px solid #00fda9;
  color: #00fda9;
}

.parcial .badge-texto {
  background: #fff;
  border: 1px solid #0db37c;
  color: #0db37c;
}

.parcial.tema-escuro .badge-texto.tema-escuro {
  background: #0e1f1a;
  border: 1px solid #00fda9;
  color: #00fda9;
}

.final {
  border: 1px solid #ffb703;
  color: #ffb703;
}

.final .badge-texto {
  background: #fff;
  border: 1px solid #ffb703;
  color: #ffb703;
}

.final.tema-escuro .badge-texto.tema-escuro {
  background: #1f1a0e;
  border: 1px solid #ffb703;
  color: #ffb703;
}


.cabecalho {
	border-radius: 5px 5px 0 0;
    width: calc(100% + 30px) !important;
    margin-left: -15px;
    margin-top: -15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #ededed;
    padding: 15px 10px;
    font-size: 0.9em;
    line-height: 2;
    color: #777373;
}

.cabecalho.tema-escuro {
	background: transparent;
	border-bottom: 1px solid #272626;
	color: #717070;
    line-height: 1.6;

}

.remixedes {
	opacity: 0.5;
}

.cod_aleat {
    margin-bottom: -7px;
    margin-top: -10px;
    margin-left: -4px;
    font-size: 0.7rem;
    opacity: 0.4;
}



.links_admin a {
    color: #ccc;
    border-radius: 4px;
    padding: 5px;
    border: 1px solid #ccc;
    font-size: 0.7em;
    margin-right: 5px;
}


.btn-toggle{
  float:right;
  font-size:15px;
  border:0;
  background:none;
  cursor:pointer;
  text-decoration:none;
  margin-right: 5px;
  margin-top: -2px;
}


.cabecalho {
	border-radius: 5px 5px 0 0;
    width: calc(100% + 30px) !important;
    margin-left: -15px;
    margin-top: -15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #ededed;
    padding: 15px 10px;
    font-size: 0.9em;
    line-height: 2;
    color: #777373;
}

.cabecalho.tema-escuro {
	background: transparent;
	border-bottom: 1px solid #272626;
	color: #717070;
    line-height: 1.6;

}

.remixedes {
	opacity: 0.5;
}

.links_admin a {
    color: #ccc;
    border-radius: 4px;
    padding: 5px;
    border: 1px solid #ccc;
    font-size: 0.7em;
    margin-right: 5px;
}


.btn-toggle{
  float:right;
  font-size:15px;
  border:0;
  background:none;
  cursor:pointer;
  text-decoration:none;
  margin-right: 5px;
  margin-top: -2px;
}



.tabs-container {
  margin-top: 25px;
  width: calc(100% + 30px) !important;
  margin-left: -15px;
  margin-bottom: -15px;
  background: #f5f5f5;
  border-radius: 0 0 8px 8px;
  border-top: 1px solid #e1e0e0;
}

.tema-escuro .tabs-container {
  background:#161515; 
  border-top:1px solid #272626; 
}

.tabs-container.tema-escuro {
  background: #161515;
}

.tabs-links {
  display: flex;
  width: 100%;
  font-size: 1rem;
  padding: 0;
  justify-content: space-between;
}

.text_barraf_inf_ch {
	margin-left: 5px;
}

@media (max-width: 480px) {
  .tabs-links {
    letter-spacing: -0.05em;

}
.text_barraf_inf_ch {
	margin-left: 5px;
}
}

@media (max-width: 350px) {
  .tabs-links {
    letter-spacing: -0.08em;



}

.text_barraf_inf_ch {
	margin-left: 5px;
}}

@media (max-width: 330px) {
  .tabs-links {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;

  }

  .tabs-links .tab-link {
    flex: 0 0 auto;
  }
}



.tab-link {
  cursor: pointer;
  color: #666;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 18px 5px;
  border-bottom: 2px solid transparent;
  font-size: 1rem;
  box-sizing: border-box;
  min-width: 0;
}

.tema-escuro .tab-link { color: #c0bbbb; }
@media (hover: hover) and (pointer: fine) {
  .tab-link:hover {
    color: #252424;
    background: #ece9e9;
    border-bottom: 2px solid #cbc8c8;

  }

  .tema-escuro .tab-link:hover {
    color: #aba7a7;
    background: #2d2d2d;
    border-bottom: 2px solid #494747;
  }
}

.tab-link.active {
  background: #ece9e9;
  border-bottom: 2px solid #cbc8c8;
  
}

.tema-escuro .tab-link.active { background: #2d2d2d; color: #aba7a7; border-bottom: 2px solid #494747; }


.tabs-content > div {
  padding: 0;
  border-top: none;
  background: transparent;

  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;

  transition:
    max-height 0.28s ease,
    opacity 0.2s ease,
    padding 0.2s ease;
}

.tabs-content > div.open {
  padding: 15px 15px 10px 15px;
  border-top: 1px solid #ccc;
  background: #f7f8fa;

  opacity: 1;
  pointer-events: auto;
}

.tema-escuro .tabs-content > div.open {
  border-top: 1px solid #2d2d2d;
  background: #181717;
}

.tabs-content > div.open {
  opacity: 1;
}

.tema-escuro .tabs-content > div { border-top: 1px solid #2d2d2d; background: #181717; }

div[id^="exp-"] {
    text-align: justify;          /* alinha à esquerda e direita */
    hyphens: auto;                /* ativa hifenização automática */
    -webkit-hyphens: auto;        /* Safari/Chrome */
    -ms-hyphens: auto;            /* Edge antigo */
    word-wrap: break-word;        /* evita quebra feia */
    overflow-wrap: break-word;    /* fallback geral */
}

div[id^="exp-"] {
    lang: es;
}

.tabs-content > div {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s ease, opacity 0.2s ease;
  opacity: 0;
}

.tabs-content > div.open {
  opacity: 1;
}