/* Animacoes */

@keyframes aparecer-modal {
	from {
		background-color: #00000000;
		backdrop-filter: blur(0px);
		opacity: 0;
	}

	to {
		background-color: #00000040;
		backdrop-filter: blur(5px);
		opacity: 1;
	}
}

@keyframes desaparecer-modal {
	from {
		background-color: #00000040;
		backdrop-filter: blur(5px);
		opacity: 1;
	}

	to {
		background-color: #00000000;
		backdrop-filter: blur(0px);
		opacity: 0;
	}
}

@keyframes descer-modal {
	from {
		scale: 0.8;
	}

	to {
		scale: 1;
	}
}

@keyframes subir-modal {
	from {
		top: 0;
	}

	to {
		top: -60px;
	}
}

@keyframes rotate {
	0% {}

	100% {
		transform: rotate(360deg)
	}
}

/* FIM Animacoes END */

:root {
	--cinza-claro: #dfdfdf;
	--verde-lima: #6ED554;
	--verde-claro: #73A641;
	--verde: #5E9235;
	--verde-escuro: #2C612C;
	--vermelho: #F24949;
	--cinza-escuro: #212529;
	--cor-preto: #0e0e0e;

	--cor-laranja: #F4711E;
	--cor-azul: #2a4698;

	--cor-fonte: #0e0e0e;
	--cor-fonte-secundaria: #202020;

	--cor-fundo: white;
	--cor-fundo-sessao-escuro: #0e0e0e;
	--cor-fundo-contraste: #f2f2f2;
	--cor-borda-contraste: #dfdfdf;

	--delay-default: 250ms;
	--font-texto: "Inter", sans-serif;
}

body {
	background: var(--cor-fundo);
	font-family: var(--font-texto);
	line-height: 24px !important;

	margin: 0;
	padding: 0;

	overflow: hidden;
	touch-action: pan-y;

	color: var(--cor-fonte);
}

#smooth-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#smooth-content {
	width: 100%;
	will-change: transform;
	/* Otimização para GPU */
}

mark {
	background: rgba(255, 255, 0, 0.255);
	color: var(--cor-fonte);
}

.titulo-principal {
	font-size: 2rem;
	text-align: center;
	margin: 30px auto;
}

.aviso {
	margin-block: 30px;
	border: 1px solid var(--cinza-claro);

	text-indent: 25px;
	padding: 20px;
	border: 2px solid #F2494926;
	border-radius: 20px;
	background-color: #ff000008;

	p {
		margin: 0;
	}
}

#botaoVoltarAoTopo {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 99;

	display: flex;
	justify-content: center;
	align-items: center;

	width: 40px;
	height: 40px;

	border: 1px solid white;
	border-radius: 50%;
	outline: none;

	background: #0E0E0E;
	color: white;
	font-size: 20px;

	cursor: pointer;
	pointer-events: none;
	opacity: 0;
	/* começa escondido */

	transition: var(--delay-default);

	&.mostrar-botao-voltar-ao-topo {
		pointer-events: auto;
		opacity: 1;
	}
}

.modal-customizada {
	position: fixed;
	top: 0;
	z-index: 2147483646;

	display: none;

	width: 100vw;
	height: 100vh;

	opacity: 0;

	&.modal-aberto {
		display: flex;
		justify-content: center;
		align-items: center;

		animation: aparecer-modal calc(var(--delay-default)) forwards;

		.container-modal {
			position: relative;

			display: flex;
			flex-direction: column;

			width: calc(100% - 140px);
			max-width: 760px;
			height: 100%;
			max-height: 90vh;

			margin: auto;
			border: none;
			border-radius: 30px;

			background: var(--cor-fundo);

			animation: descer-modal calc(var(--delay-default)) cubic-bezier(0, 0, 0.04, 1.02) forwards;

			.botao-fechar-modal {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 5;
				transform: translateX(calc(100% + 10px));

				display: flex;
				justify-content: center;
				align-items: center;

				width: 50px;
				height: 50px;

				color: var(--cor-fonte);

				border-radius: 50%;
				background-color: var(--cor-fundo-contraste);
				transition: var(--delay-default);

				border: none;
				outline: none;
				cursor: pointer;

				svg {
					width: 40px;
					height: 40px;
				}

				&:hover,
				&:focus {
					background-color: var(--cor-fundo-contraste);
					opacity: 0.8;
					backdrop-filter: blur(10px);
				}

				&:focus-visible {
					outline: -webkit-focus-ring-color auto 1px;
				}
			}

			.modal-header {
				border-color: var(--cor-borda-contraste);
				padding: 1.5rem 1.5rem 0.75rem 1.5rem;
				border-bottom: 1px solid var(--cor-borda-contraste);

				border: none;
				box-sizing: border-box;

				h4 {
					width: calc(100% - 55px);
					margin: 0;
				}
			}

			.modal-body {
				height: 100%;
				padding: 0.75rem 1.5rem 1.5rem 1.5rem;
				overflow-y: auto;

				/* Espaçamento (railpadding) */
				.os-scrollbar-vertical {
					padding: 0px 0px 25px 2px !important;
				}
			}
		}
	}

	&.modal-aberto.fechar-modal {
		animation: desaparecer-modal calc(var(--delay-default)) forwards;

		.container-modal {
			animation: subir-modal calc(var(--delay-default));
		}
	}
}

a.link {
	text-decoration: none;
	color: #00569c;

	--reversed-link-gap: min(100%, 1.35em);
	background: linear-gradient(to right, currentColor, currentColor) 0 var(--reversed-link-gap)/0 1px no-repeat;
	background-position-x: right;
	transition: color var(--delay-default), background-size .5s cubic-bezier(.3, 1, .3, 1);

	&:hover {
		background-position-x: left;
		background-size: 100% 1px;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	margin-bottom: .5rem;
	font-weight: 500;
	line-height: 1.2;
}

h1 {
	font-size: calc(1.375rem + 1.5vw)
}

h2 {
	font-size: calc(1.325rem + .9vw)
}

h3 {
	font-size: calc(1.3rem + .6vw)
}

h4 {
	font-size: calc(1.275rem + .3vw)
}

h5 {
	font-size: 1.25rem
}

h6 {
	font-size: 1rem
}

p {
	margin-top: 0;
	margin-bottom: 1rem
}

* {
	-webkit-tap-highlight-color: transparent;
}

button {
	cursor: pointer;
	transition: var(--delay-default);

	&:active {
		scale: 0.95;
	}
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button,
input,
optgroup,
select,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

.os-scrollbar {
	--os-handle-bg: var(--cor-fonte);
	/* cursorcolor */
	--os-handle-border: 1px solid white;
	/* cursorborder */
	--os-handle-border-radius: 4px;
	--os-size: 6px;
	/* Aproximado ao seu cursorwidth + padding */

	/* Estilo ao passar o mouse */
	--os-handle-bg-hover: #1f1e1e;
	--os-handle-border-hover: 1px solid rgb(175, 175, 175);

	/* Estilo ao clicar no scroll */
	--os-handle-border-active: 1px solid rgb(121, 121, 121);
}

/* Espaçamento (railpadding) */
.os-scrollbar-vertical {
	padding: 2px 0px 0 2px !important;
}

::selection {
	background-color: rgba(0, 0, 0, 0.863);
	color: white;
}

.material-symbols-outlined {
	user-select: none;
}



@media (prefers-color-scheme: dark) {
	:root {
		--cor-fonte: white;
		--cor-fonte-secundaria: #cacaca;

		--cor-fundo: #0e0e0e;
		--cor-fundo-sessao-escuro: #0e0e0e;
		--cor-fundo-contraste: #212529;
		--cor-borda-contraste: #212529;
	}

	.os-scrollbar {
		--os-handle-bg: var(--cinza-claro);
		--os-handle-border: 1px solid #0e0e0e;

		/* Estilo ao passar o mouse */
		--os-handle-bg-hover: #1f1e1e;
		--os-handle-border-hover: 1px solid rgb(175, 175, 175);

		/* Estilo ao clicar no scroll */
		--os-handle-border-active: 1px solid rgb(121, 121, 121);
	}

	::selection {
		background-color: rgba(255, 255, 255, 0.801);
		color: var(--cor-preto);
	}

	a.link {
		color: #31a2ff;
	}

	mark {
		background-color: rgb(157 157 0 / 32%);
	}
}

@media (max-width: 1200px) {
	#smooth-content {
		will-change: unset;
	}

	h1 {
		font-size: 2.5rem
	}

	h2 {
		font-size: 2rem
	}

	h3 {
		font-size: 1.75rem
	}

	h4 {
		font-size: 1.5rem
	}
}

@media (max-width: 500px) {
	.modal-customizada {
		&.modal-aberto {
			& .container-modal {
				width: 90vw;

				.botao-fechar-modal {
					top: 10px;
					right: 10px;
					transform: translateY(0);
				}

				.modal-header {
					position: relative;
				}
			}
		}
	}

	.os-scrollbar {
		--os-handle-bg: transparent;
		--os-handle-border: none;

		/* Estilo ao passar o mouse */
		--os-handle-bg-hover: var(--cor-fundo-contraste);
		--os-handle-border-hover: 1px solid var(--cor-borda-contraste);

		/* Estilo ao clicar no scroll */
		--os-handle-border-active: 1px solid var(--cor-borda-contraste);
	}
}