/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
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, b, 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-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
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; }

/**/
html, body {
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	font-size: 100%;
	line-height: 110%;
	border: none;
	width: 100%;
}

body {
    --colorWhite: rgb(255,255,255);
	--colorBlack: rgb(0,0,0);
	--colorOrangePattern: rgb(251,102,0);

    --colorGrayDark: rgb(64,64,64);
    --colorGrayMedium: rgb(128,128,128);
    --colorGrayLight: rgb(191,191,191);
	
	--colorRed: rgb(200,0,0);
	--colorOrange: rgb(230,81,0);
	--colorYellow: rgb(255,221,0);
	--colorGreen: rgb(0,128,0);
	--colorBlue: rgb(0,85,204);
	--colorPurple: rgb(128,0,128);

	text-rendering: optimizeLegibility;
	color: var(--colorGrayDark);
	background: var(--colorWhite);

	box-sizing: border-box;
}

.colorWhite { color: var(--colorWhite) !important; }
.colorRed { color: var(--colorRed) !important; }
.colorOrange { color: var(--colorOrange) !important; }
.colorGreen { color: var(--colorGreen) !important; }
.colorOrangePattern { color: var(--colorOrangePattern) !important; }
.colorGrayMedium { color: var(--colorGrayMedium) !important; }

.bgOrangePattern { background-color: var(--colorOrangePattern) !important;  color: var(--colorWhite) !important; }
.bgBlack { background-color: var(--colorBlack) !important;  color: var(--colorWhite) !important; }
.bgGreen { background-color: var(--colorGreen) !important;  color: var(--colorWhite) !important; }
.bgOrange { background-color: var(--colorOrange) !important;  color: var(--colorWhite) !important; }
.bgYellow { background-color: var(--colorYellow) !important;  color: var(--colorGrayDark) !important; }
.bgRed { background-color: var(--colorRed) !important;  color: var(--colorWhite) !important; }
.bgPurple { background-color: var(--colorPurple) !important;  color: var(--colorWhite) !important; }
.bgTransparentDark { background-color: rgba(0,0,0,.375) !important;  color: var(--colorWhite) !important; }

.cursorPointer { cursor: pointer; }

p {
	margin: 10px;
}

ul {
	margin: 5px 10px;
}
	ul li {
		margin-left: 30px;
		margin-bottom: 10px;
		list-style:disc;
	}

.maxLines2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.maxLines3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.videoMin {
	width: 100px;
	height: 60px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.imgMinSquare {
	width: 60px;
	height: 60px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.imgMinCircle {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.contentCenter {
	margin: 0 auto;
	max-width: 1000px;
}

.contentH {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 5px;
}

.scrollView {
	display: flex;
	flex-flow: row nowrap;
	gap: 20px;
	padding: 10px;
	width: calc(100% - 20px);
	overflow-y: hidden;
	overflow-x: auto;
}
	.scrollView > * {
		flex: 0 0 auto;
	}

.borderButton {
	border: 1px solid var(--colorGrayLight);
	border-radius: 10px;
	padding: 10px;
}

.padding10 {
	padding: 10px;
}

.aLink {
	text-decoration: none;
	color: inherit;
}
	.aLink:hover {
		text-decoration: underline;
	}

.aLinkColumn {
	text-decoration: none;
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	justify-content: center;
	color: inherit;
}
	.aLinkColumn div {
		margin-top: 5px;
		font-size: 50%;
		line-height: 100%;
		text-align: center;
	}
	.aLinkColumn:hover {
		text-decoration: underline;
	}

.bgImg {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
	border-bottom: 1px solid var(--colorGrayLight);
}
	.logo {
		width: 60px;
		height: 60px;
	}
	.buttonFa {
		font-size: 125%;
		padding: 10px;
	}
	.login {
		position: relative;
		width: 39px;
		height: 39px;
		border-radius: 50%;
		border: 1px solid var(--colorGrayLight);
	}
		.login i {
			position: absolute;
			right: -5px;
			bottom: -5px;
			font-size: 75%;
			color: var(--colorWhite);
			background-color: var(--colorOrangePattern);
			padding: 2px;
			width: calc(20px - 4px);
			height: calc(20px - 4px);
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

.header {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	gap: 20px;
	padding: 20px;
}
	.h1 {
		font-size: 150%;
		line-height: 125%;
		font-weight: bold;
		padding: 20px;
	}
	.h2 {
		font-size: 125%;
		line-height: 125%;
		font-weight: normal;
		color: var(--colorGrayMedium);
		padding: 20px
	}

.grid {
	width: calc(100% - 40px);
	margin: 20px;
	line-height: 125%;
}
	.gridTitle {
		font-size: 150%;
		line-height: 125%;
		font-weight: bold;
		margin: 20px 0;
	}
	.gridAlignRight {
		text-align: right;
	}
	.gridAlignBetween {
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
	}
	.gridBodyRow {
		display: flex;
		flex-flow: row nowrap;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 20px;
	}
	.gridBody {
		display: flex;
		flex-flow: row wrap;
		align-items: flex-start;
		justify-content: space-between;
		gap: 20px;
	}
		.gridChild {
			margin: 10px;
		}
			.gridChildTitle {
				font-size: 125%;
				line-height: 125%;
				font-weight: bold;
				color: var(--colorGrayMedium);
				margin: 0 0 10px 0;
			}
			.gridChildContent {
				display: flex;
				flex-flow: row wrap;
				gap: 20px;
			}
			.gridImgContainer {
				width: calc(100% / 4 - 20px - 2px);
				border-radius: 10px;
				border: 1px solid var(--colorGrayLight)
			}
				.gridImg {
					width: 100%;
					height: 180px;
					border-radius: 10px 10px 0 0;
					background-color: var(--colorGrayLight);
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}
					.gridImgDiv {
						padding: 5px;
						max-width: calc(100% - 10px);
						text-align: right;
						color: var(--colorWhite);
						font-size: 75%;
						text-shadow: 1px 2px 3px var(--colorBlack);
					}
				.gridImgLegend {
					width: calc(100% - 20px);
					height: 100px;
					padding: 10px;
					border-radius: 0 0 10px 10px;
					line-height: 125%;
				}
					.gridImgLegend li {
						list-style: none;
						margin-left: 10px;
						font-size: 90%;
						line-height: 150%;
					}
					.gridImgLegend span {
						border-radius: 5px;
						padding: 2px 10px;
					}

.footer {
	width: 100%;
	color: var(--colorGrayLight);
}
	.footerBody {
		width:100%;
		display: flex;
		flex-flow: row nowrap;
		align-items: flex-start;
		justify-content: space-evenly;
		background-color: var(--colorGrayMedium);
		padding: 30px 0 30px 0;
	}
		.footerBodyChild {
			padding: 20px;
		}
			.footerBodyChildTitle {
				color: var(--colorWhite);
				font-size: 125%;
				line-height: 125%;
				margin-bottom: 20px;
			}
			.footerBodyChild > li {
				list-style: none;
				margin: 0 0 20px 0;
			}
	.footerFooter {
		width: calc(100% - 20px);
		padding: 10px;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		background-color: var(--colorGrayDark);
	}
		.footerFooterBody {
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			justify-content: center;
			gap: 10px;
		}
			.footerFooterBody .aLink {
				color: var(--colorWhite) !important;
			}
		.footerFooterFooter {
			color: var(--colorWhite) !important;
			font-size: 150%;
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			justify-content: center;
			gap: 20px;
		}

.carousel {
	width: 100%;
}
	.carouselHeader {
		display: flex;
		align-items: flex-start;
		justify-content:space-evenly;
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		gap: 20px;
		font-size: 150%;
		color: var(--colorGrayMedium);
		overflow-x: auto;
	}
	.carouselBody {
		width: 100%;
		height: 350px;
		background-color: var(--colorGrayLight);
	}
		.carouselIframe {
			width: 100%;
			height: 100%;
		}
	.carouselFooter {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-evenly;
		padding: 30px;
		background-color: var(--colorOrangePattern);
		color: var(--colorWhite)
	}

/* ---------- Formulário */
.noResize {
	resize: none;
}

label,
textarea,
select {
	display: block;
	width: 100%;
}

label {
	margin-top: 10px;
	font-weight: bold;
}

input[type=text],
input[type=email],
input[type=password],
select,
textarea {
	width: calc(100% - 40px);
	margin: 20px;
	line-height: 125%;
}

#previa {
	display: block;
	width: 100%;
}
	#previa > iframe {
		width: 100%;
		height: 250px;
	}

/* ---------- Container fixo para os toasts */
#toast-container {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	z-index: 9999;
}

/* Estilo do toast */
.toast {
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	padding: 10px 15px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.3s ease;
	font-family: sans-serif;
}

/* Animação de entrada */
.toast.show {
	opacity: 1;
	transform: translateY(0);
}

/* Cores opcionais */
.toast.success { background: #2e7d32; }   /* verde */
.toast.error { background: #c62828; }     /* vermelho */
.toast.info { background: #1565c0; }      /* azul */
.toast.warning { background: #ff8f00; }   /* laranja */

/* overlay */
#overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.45);
	z-index: 9998;
	backdrop-filter: blur(3px);
}
	#overlayContainer {
		position: relative;
		display: flex;
		flex-direction: column;
		width: min(90%, 360px);
		max-width: 80vw;
		max-height: 80vh;
		background: var(--colorWhite);
		border-radius: 16px;
		padding: 20px 24px;
		box-shadow: 0 4px 16px rgba(0,0,0,0.2);
		animation: fadeInScale 0.18s ease-out;
	}
		#overlayTitle {
			font-size: 18px;
			line-height: 125%;
			font-weight: 600;
    		margin-bottom: 12px;
    		color: var(--colorGrayDark);
			flex: 0 0 auto;
		}
		#overlayContent {
			font-size: 15px;
			line-height: 140%;
			padding: 2px;
			color: var(--colorGrayMedium);
			margin-bottom: 24px;
			word-wrap: break-word;
			word-break: break-word;
			overflow-wrap: break-word;
			overflow-x: hidden;
			overflow-y: auto;
			flex: 0 1 auto;
		}
			#overlayImg {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1 1 auto;
				max-height: 100%;
    			overflow: hidden;
			}
			#overlayImg > img {
				border-radius: 10px;
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
				object-fit: contain;
			}
			#overlayContent > iframe {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
				/*width: 100vw;
				height: 100vh;
				max-width: calc(80vw - 40px);
				max-height: calc(80vh - 40px);*/
			}
		#overlayFooter {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			align-items: center;
			gap: 12px;
			flex: 0 0 auto;
		}

/* lightbox */
#lightbox {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.25);
	z-index: 9997;
	backdrop-filter: blur(3px);
}
	#lightboxContainer {
		position: relative;
		display: flex;
		flex-direction: column;
		background: var(--colorWhite);
		margin: 40px;
		border-radius: 10px;
		width: calc(100% - 80px);
		height: calc(100% - 80px);
	}
		#lightboxTitle {
			padding: 10px;
			width: calc(100% - 20px);
			font-weight: bold;
    		color: var(--colorGrayDark);
			flex: 0 0 auto;
		}
		#lightboxContent {
			padding: 10px;
			flex: 1 1 auto;
			overflow-x: hidden;
			overflow-y: auto;
		}
		#iframeLightbox {
			width: 100%;
			height: 100%;
		}

/* menuV */
#menuV {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.25);
	z-index: 9996;
	backdrop-filter: blur(3px);
}
	#menuVContainer {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 10px;
		background: var(--colorWhite);
		padding: 20px;
		width: 210px;
		height: calc(100% - 40px);
	}
		#menuVTitle {
			padding: 5px;
			width: calc(100% - 10px);
			flex: 0 0 auto;
		}
		#menuVContent {
			display: flex;
			flex-direction: column;
			gap: 5px;
			flex: 1 1 auto;
			overflow-x: hidden;
			overflow-y: auto;
		}
	.menuVLink {
		display: flex;
		flex-flow: row nowrap;
		align-items: flex-start;
		gap: 10px;
		padding: 10px;
		border-radius: 5px;
		cursor: pointer;
	}
		.menuVLink:hover {
			background-color: rgba(200,200,200,.25);
		}
		.menuVLink i {
			width: 30px;
			font-size: 150%;
			text-align: center;
			color: var(--colorOrange);
		}

/* mídias (youtube, imagens) */
#midia {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(0,0,0,0.45);
    z-index: 9998;
    backdrop-filter: blur(3px);
}
	#midiaTitle {
		padding: 10px;
		width: calc(100% - 20px);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		flex: 0 0 auto;
		color: var(--colorWhite);
	}
	#midiaFooter {
		background-color: rgba(0,0,0,.375);
		flex: 0 0 auto;
	}
	#midiaContent {
		width: 100%;
		height: 100%;
		max-height: 100%;
		flex: 1 1 auto;   /* <-- IMPORTANTE */
		display: flex;    /* <-- permite que #midiaImage "estique" */
		overflow: hidden;
	}
		#midiaVideo {
			flex: 1;
		}
			#midiaVideo iframe {
				width: 100%;
				height: 100%;
			}
		#midiaImage {
			width: 100%;
			height: 100%;
			max-height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1; /* <-- preencher o meio */
			overflow: hidden; /* evita imagem escapar */
		}
			#midiaImage > img {
				margin: 2px;
				padding: 2px;
				max-width: calc(100% - 8px);
				max-height: calc(100% - 8px);
				width: auto;
				height: auto;
				border-radius: 5px;
				background-color: var(--colorWhite);
			}

@media (orientation: portrait) {
	.header {
		flex-direction: column;
		align-items: flex-start;
	}
		.h1,
		.h2 {
			padding: 0;
		}

	.carouselFooter {
		flex-flow: column wrap;
		justify-content: center;
		gap: 30px;
	}

	.footerBody {
		flex-flow: column wrap;
	}

	.footerFooter {
		align-items: stretch;
		gap: 10px;
	}
	.footerFooterBody {
		flex: 1;
		flex-flow: column wrap;
		align-items: flex-start;
		justify-content: space-between;
	}
	.footerFooterFooter {
		flex: 0 0 auto;
		flex-flow: column wrap;
		align-items: center;
		gap: 15px;
	}

	#lightbox {
		align-items: flex-end;
	}
	#lightboxContainer {
		width: 100%;
		height: auto;
		max-height: calc(100% - 80px);
		margin: 80px 0 0 0;
		border-radius: 20px 20px 0 0;
	}
	#iframeLightbox {
		height: calc(100vh / 2);
	}

	.gridImgContainer {
		width: calc(100% - 2px);
	}
}