* {
	margin:0px;
	padding:0px;
	box-sizing:border-box;
	cursor:default;
	font-family:"Helvetica";
	text-decoration:none;
	letter-spacing:1px;
	/* outline: 1px solid red; */
}
*:focus {
    outline:none;
}
body {
	padding:0px;
	width:100%;
	height:auto;
	position:relative;
	display:flex;
	flex-direction:column;
	touch-action: pan-x pan-y;
	background:#091527;
	overflow-x: hidden;
	
}

	/* #################### */
	/*   STYLE LOGIN.PHP    */
	/* #################### */
	#loginMain {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 90vh;
		width: 100%;
		padding: 0 20px;
	}

		#loginLogo img {
			width: 250px;
			margin-bottom: 50px;
		}

		#loginForm {
			background-color: #071b33;
			padding: 30px;
			border-radius: 10px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			max-width: 360px;
			
			animation: loginFadeIn 0.6s ease-out;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
		}
			#loginForm:hover {
				transform: translateY(-4px) scale(1.01);
				box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
			}
			@keyframes loginFadeIn {
				from {
					opacity: 0;
					transform: translateY(20px);
				}
				to {
					opacity: 1;
					transform: translateY(0);
				}
			}

			#loginLabelEmail {
				color: #e3e4ec;
				font-size: 15px;
				margin-bottom: 8px;
				width: 100%;
				text-align: left;
			}

				.loginInputWrapper input {
					width: 100%;
					padding: 12px;
					border: none;
					border-radius: 6px;
					background-color: #e3e4ec;
					color: #071b33;
					font-size: 14px;
				}

			.loginInputWrapper {
				width: 100%;
				margin-bottom: 20px;
			}

			.loginButton {
				background-color: #ccb178;
				color: #071b33;
				font-weight: bold;
				border-radius: 6px;
				padding: 12px 0;
				width: 100%;
				text-align: center;
				cursor: pointer;
				transition: background-color 0.2s ease-in-out;
			}

			.loginButton:hover {
				background-color: #e3e4ec;
				color: #071b33;
			}
	
	
	/* #################### */
	/*   STYLE INDEX.PHP    */
	/* #################### */
	#menuToggleButton {
		display: none;
	}
	#mainLayout {
		display: flex;
		flex-direction: row;
		height: 100dvh;
		width: 100vw;
	}

		#mainMenu {
			width: 260px;
			min-width: 260px;
			max-width: 260px;
			background-color: #071B33;
			height: 100dvh;
			display: flex;
			flex-direction: column;
			color: white;
			flex-shrink: 0;
			position: relative;
			z-index: 10;
		}

			#mainMenuTopo {
				padding: 24px 16px 20px;
				text-align: center;
				border-bottom: 1px solid rgba(255,255,255,0.06);
				flex-shrink: 0;
			}

				#mainMenuFoto {
					width: 64px;
					height: 64px;
					border-radius: 50%;
					object-fit: cover;
					margin-bottom: 10px;
					border: 2px solid rgba(255,255,255,0.12);
				}

				#mainMenuNome {
					font-size: 15px;
					font-weight: 600;
					color: #ffffff;
				}

				#mainMenuCargo {
					font-size: 12px;
					color: #CCB178;
					margin-top: 3px;
				}


			#mainMenuItens {
				display: flex;
				flex-direction: column;
				margin-top: 12px;
				flex: 1 1 auto;
				overflow-y: auto;
				overflow-x: visible;
				padding: 4px 0 16px 12px;
				gap: 2px;
				position: relative;  /* IMPORTANTE: referência para o slider */
			}
			
			#mainMenuItens::-webkit-scrollbar { display: none; }

			.menuPillSlider {
				position: absolute;
				left: 12px;
				right: 0;
				height: 46px;
				background: #ffffff;
				border-radius: 25px 0 0 25px;
				border-left: 3px solid #CCB178;
				pointer-events: none;
				z-index: 1;
				transition: transform 1.0s cubic-bezier(0.34, 1.56, 0.64, 1),
							opacity 0.3s ease;
				will-change: transform;
				backface-visibility: hidden;
			}

			.menuPillSlider::before,
			.menuPillSlider::after {
				content: '';
				position: absolute;
				right: 0;
				width: 16px;
				height: 16px;
				background: #071B33;
				pointer-events: none;
			}

			.menuPillSlider::before {
				top: -16px;
				border-bottom-right-radius: 16px;
				box-shadow: 8px 8px 0 8px #ffffff;
			}

			.menuPillSlider::after {
				bottom: -16px;
				border-top-right-radius: 16px;
				box-shadow: 8px -8px 0 8px #ffffff;
			}

			/* ===== ITENS DO MENU ===== */
			.mainMenuItem {
				display: flex;
				align-items: center;
				padding: 11px 14px;
				cursor: pointer;
				border-radius: 10px 0 0 10px;
				position: relative;
				gap: 12px;
				min-height: 46px;
				margin-right: 0;
				z-index: 2;  /* Acima do slider */
				transition: color 0.25s ease, transform 0.2s ease;
			}

			.mainMenuItem * { cursor: pointer; }

			.mainMenuItem:hover {
				transform: translateX(3px);
			}

			/* ÍCONE */
			.mainMenuIcon {
				width: 20px;
				height: 20px;
				flex-shrink: 0;
				filter: brightness(100);
				opacity: 0.8;
				transition: all 0.3s ease;
			}

			.mainMenuItem:hover .mainMenuIcon {
				opacity: 1;
				transform: scale(1.1);
			}

			/* TEXTO */
			.mainMenuTexto {
				color: rgba(255,255,255,0.85);
				font-size: 13.5px;
				font-weight: 500;
				white-space: nowrap;
				letter-spacing: 0.2px;
				transition: color 0.25s ease, font-weight 0.25s ease;
			}

			/* ===== ESTADO ATIVO ===== */
			.mainMenuItem.ativo .mainMenuIcon {
				filter: invert(0.85) sepia(0.3) hue-rotate(180deg) saturate(2);
				opacity: 1;
			}

			.mainMenuItem.ativo .mainMenuTexto {
				color: #071B33;
				font-weight: 700;
			}


		#mainContainer {
			flex: 1;
			display: flex;
			flex-direction: column;
			background-color: #091527;
			min-width: 0;
			overflow-x: hidden;
			position: relative;
			z-index: 5;
		}

		#mainTopo {
			height: 56px;
			background-color: #0d2744;
			color: white;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24px;
			flex-shrink: 0;
			width: 100%;
			box-sizing: border-box;
			overflow: hidden;
		}

			#mainTopoLogo {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				gap: 16px;
			}
			
			#mainTopoLogo img {
				height: 25px;
				cursor: pointer;
			}

			#mainTopoAcoes {
				display: flex;
				align-items: center;
				gap: 20px;
				flex-shrink: 0;
				min-width: 0;
			}

				.mainTopoIcon {
					cursor: pointer;
					display: flex;
					align-items: center;
					position: relative;
				}

				.mainTopoIcon img {
					width: 22px;
					height: 22px;
					filter: brightness(100);
					transition: transform 0.2s ease-in-out;
					cursor:pointer;
				}

				.mainTopoIcon:hover img {
					transform: scale(1.1);
				}
				.mainNotificacaoBadge {
					position: absolute;
					top: -6px;
					right: -8px;
					background-color: #CCB178;
					color: #071B33;
					font-size: 11px;
					font-weight: bold;
					width: 18px;
					height: 18px;
					border-radius: 50%;
					line-height: 18px; /* alinhamento vertical perfeito */
					text-align: center;
					display: block;
					cursor:pointer;
				}


			#mainMiddle {
				flex: 1;
				overflow-y: auto;
				background-color: #FFF;
				overflow-x: hidden;
				position: relative;
				min-width: 0;

				scrollbar-width: thin;
				scrollbar-color: rgba(7, 27, 51, 0.2) transparent;
			}

	/* #################### */
	/*   STYLE REPORT.PHP   */
	/* #################### */

	#reportContentWrapper {
		overflow: visible !important;
		position: relative;
		margin: 0;
		padding: 40px;
	}
		#reportBlueContainer {
			background-color: #071b33;
			color: white;
			display: flex;
			max-width: 1200px;
			margin: 0 auto;
			box-sizing: border-box;
			position: relative;
			overflow: visible;
		}

			#reportBlueLeft {
				width: 46%;
				padding: 60px 50px;
				display: flex;
				flex-direction: column;
				gap: 24px;
			}

				.reportTopicsList {
					display: flex;
					flex-direction: column;
					gap: 14px;
				}

				.reportTopicItem {
					border: 1px solid rgba(255, 255, 255, 0.24);
					background-color: rgba(255, 255, 255, 0.04);
				}

				.reportTopicHeader {
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 14px;
					padding: 16px 18px;
					font-size: 0.95em;
					font-weight: 600;
					cursor: pointer;
					user-select: none;
				}

				.reportTopicHeader:focus {
					outline: 2px solid #ccb178;
					outline-offset: -2px;
				}

				.reportTopicIndicator {
					font-size: 1.35em;
					line-height: 1;
					color: #ccb178;
					transition: transform 0.25s ease;
					flex-shrink: 0;
				}

				.reportTopicBody {
					max-height: 0;
					overflow: hidden;
					padding: 0 18px;
					font-size: 0.9em;
					line-height: 1.65;
					color: #e8ecf1;
					text-align: justify;
					transition: max-height 0.35s ease, padding 0.25s ease;
				}

				.reportTopicActive .reportTopicBody {
					max-height: 3200px;
					padding: 14px 18px 18px;
				}

				.reportTopicActive .reportTopicIndicator {
					transform: rotate(45deg);
				}

				.reportTopicBody p {
					margin: 0 0 10px 0;
				}

				.reportTopicBody ul {
					margin: 0 0 12px 16px;
					padding: 0;
				}

				.reportTopicBody li {
					margin: 0 0 6px 0;
				}

				.reportInnerDetails {
					border: 0;
					background: transparent;
					padding: 0;
					margin: 0 0 12px 0;
				}

				.reportInnerDetails summary {
					cursor: pointer;
					font-weight: 600;
					color: #f1f4f8;
					outline: none;
					margin: 0 0 8px 0;
					list-style: none;
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 10px;
					font-size: 0.95em;
					letter-spacing: normal;
					text-transform: none;
				}

				.reportInnerDetails summary::-webkit-details-marker {
					display: none;
				}

				.reportInnerIndicator {
					font-size: 1.3em;
					line-height: 1;
					color: #ccb178;
					transition: transform 0.25s ease;
					flex-shrink: 0;
				}

				.reportInnerDetails[open] .reportInnerIndicator {
					transform: rotate(45deg);
				}

				.reportInnerDetails[open] summary {
					margin-bottom: 10px;
				}

				.reportTopicActions {
					margin-top: 14px;
				}

				.reportActionButton {
					background-color: #ccb178;
					color: #0c233d;
					border: 0;
					padding: 10px 16px;
					font-size: 0.9em;
					font-weight: 700;
					cursor: pointer;
				}

				.reportActionButton:hover {
					background-color: #d7bd89;
				}

			#reportBlueRight {
				width: 54%;
				padding: 0;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				position: relative;
				overflow: visible;
			}

				#reportFormBox {
					background-color: #FFF;
					padding: 22px;
					box-sizing: border-box;
					width: 100%;
					max-width: 520px;
					display: flex;
					align-items: stretch;
					justify-content: flex-start;
					position: absolute;
					top: -80px;
					left: 50%;
					transform: translateX(-50%);
					z-index: 10;
					border: 1px solid #d8dee6;
					box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
				}

				#reportImageContainer,
				#reportFormContainer,
				#reportOccurrenceContainer {
					width: 100%;
				}

				#reportImageContainer {
					display: flex;
					align-items: center;
					justify-content: center;
				}

				#reportDisplayImage {
					display: block;
					width: 100%;
					height: auto;
					max-height: 560px;
					object-fit: contain;
				}

				.reportPanelHidden {
					display: none !important;
				}

				.reportFormTop {
					display: flex;
					justify-content: flex-end;
					margin-bottom: 8px;
				}

				#reportFormContainer,
				#reportOccurrenceContainer {
					overflow-y: auto;
					overflow-x: hidden;
					box-sizing: border-box;
					width: calc(100% + 44px);
					margin: -22px;
					padding: 22px;
					scrollbar-gutter: stable;
				}

				.reportOccurrencePlaceholder {
					border: 1px dashed #cfd8e3;
					padding: 18px;
					color: #1b2e43;
				}

				.reportOccurrencePlaceholder h3 {
					margin: 0 0 8px 0;
					font-size: 1.05em;
				}

				.reportOccurrencePlaceholder p {
					margin: 0;
					font-size: 0.9em;
					line-height: 1.45;
				}

				.reportCloseButton {
					background-color: #071b33;
					color: #ffffff;
					border: 0;
					padding: 8px 14px;
					font-size: 0.82em;
					font-weight: 600;
					cursor: pointer;
				}

				.reportComplaintForm {
					color: #1b2e43;
					display: flex;
					flex-direction: column;
					gap: 12px;
				}

				.reportFormSection {
					display: flex;
					flex-direction: column;
					gap: 6px;
				}

				.reportFormGrid {
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 10px;
				}

				.reportFieldLabel {
					font-size: 0.84em;
					font-weight: 700;
					color: #10263d;
				}

				.reportRequiredMark {
					color: #ad1f1f;
				}

				.reportFieldInput,
				.reportFieldTextarea {
					width: 100%;
					border: 1px solid #ccd7e3;
					background-color: #ffffff;
					padding: 10px 11px;
					font-size: 0.9em;
					color: #1b2e43;
					box-sizing: border-box;
				}

				.reportFieldTextarea {
					min-height: 135px;
					resize: vertical;
					font-family: inherit;
				}

				.reportFieldHelp {
					margin: 0;
					font-size: 0.8em;
					line-height: 1.35;
					color: #334c66;
				}

				.reportSwitchRow {
					display: flex;
					align-items: center;
					gap: 10px;
				}

				.reportSwitchLabel {
					font-size: 0.86em;
					font-weight: 700;
					color: #10263d;
					cursor: pointer;
				}

				.reportIosSwitch {
					position: relative;
					display: inline-block;
					width: 44px;
					height: 26px;
					flex-shrink: 0;
				}

				.reportIosSwitch input {
					opacity: 0;
					width: 0;
					height: 0;
				}

				.reportIosSlider {
					position: absolute;
					cursor: pointer;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-color: #b9c8d9;
					transition: .25s;
					border-radius: 26px;
				}

				.reportIosSlider:before {
					position: absolute;
					content: "";
					height: 20px;
					width: 20px;
					left: 3px;
					top: 3px;
					background-color: white;
					transition: .25s;
					border-radius: 50%;
					box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
				}

				.reportIosSwitch input:checked + .reportIosSlider {
					background-color: #2a77cf;
				}

				.reportIosSwitch input:checked + .reportIosSlider:before {
					transform: translateX(18px);
				}

				.reportDeclarationSection {
					padding-top: 6px;
				}

				.reportDeclarationLabel {
					display: flex;
					align-items: flex-start;
					gap: 8px;
					font-size: 0.78em;
					line-height: 1.5;
					color: #20384f;
				}

				.reportDeclarationLabel input[type="checkbox"] {
					margin-top: 2px;
					flex-shrink: 0;
				}

				.reportSubmitSection {
					padding-top: 6px;
				}

				.reportSendButton {
					background-color: #ccb178;
					color: #0c233d;
					border: 0;
					padding: 11px 16px;
					font-size: 0.9em;
					font-weight: 700;
					cursor: pointer;
					width: 100%;
				}

				.reportSendButton:hover {
					background-color: #d7bd89;
				}

				.reportSendButton:disabled {
					opacity: 0.7;
					cursor: not-allowed;
				}

				.reportFormFeedback {
					min-height: 18px;
					font-size: 0.8em;
					line-height: 1.4;
				}

				.reportFeedbackSuccess {
					color: #146b35;
				}

				.reportFeedbackError {
					color: #a11a1a;
				}

				@media (max-width: 480px) {
					.reportFormGrid {
						grid-template-columns: 1fr;
					}
				}

	/* #################### */
	/*   STYLE TEAM.PHP   */
	/* #################### */

	#teamWrapper {
		overflow: visible !important;
		position: relative;
		width: 100%;
	}

	#teamBackgroundBar {
		height: 150px;
		background-color: #345B87;
		width: 100%;
	}

	#teamContentContainer {
		background-color: #ffffff;
		margin-top: 40px;
		padding: 40px 20px 60px;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	}

	#teamTitle {
		font-size: 2em;
		font-weight: bold;
		margin-bottom: 30px;
		color: #000000;
	}

	#teamGrid {
		display: flex;
		flex-wrap: wrap;
		gap: 30px;
		justify-content: center;
	}

	.teamCard {
		width: 280px;
		text-align: center;
	}
	
	.teamPhotoContainer {
		width: 100%;
		height: 340px;
		position: relative;
		overflow: hidden;
		background: transparent;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		padding: 0;
	}

	.teamPhoto {
		max-height: 90%;
		max-width: 90%;
		object-fit: contain;
		display: block;
		margin: 0 auto;
		transition: transform 0.3s ease;
	}

	.teamPhotoContainer:hover .teamPhoto {
		transform: scale(1.05);
	}


	/* Nome */
	.teamName {
		font-weight: 700;
		font-size: 1.2em;
		margin-top: 10px;
		color: #000000;
		text-align:left;
	}

	/* Cargo */
	.teamRole {
		color: #ccb178;
		font-weight: bold;
		margin: 5px 0;
		text-align:left;
	}

	/* Descrição */
	.teamDescription {
		font-size: 0.95em;
		color: #333333;
		text-align:left;
	}

	/* Social */
	.teamSocial {
		margin-top: 10px;
		display: flex;
		justify-content: center;
		gap: 10px;
	}

	/* Ícones (customizáveis por imagem ou com Font Awesome via background-image) */
	.teamIcon {
		width: 20px;
		height: 20px;
		background-size: contain;
		background-repeat: no-repeat;
		cursor: pointer;
	}

	/* Exemplo com Font Awesome (ou substitua por SVG/PNG no background-image) */
	.teamIconFacebook {
		background-image: url('assets/icons/facebook.svg');
	}

	.teamIconTwitter {
		background-image: url('assets/icons/twitter.svg');
	}

	.teamIconInstagram {
		background-image: url('assets/icons/instagram.svg');
	}


	/* #################### */
	/*   STYLE HOME.PHP   */
	/* #################### */
	#homeWrapper {
	padding: 0;
	font-family: 'Segoe UI', sans-serif;
}

#homeBanner {
	width: 100%;
	height: 300px;
	background-image: url('/img/home/banner.jpg');
	background-size: cover;
	background-position: center;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/* #################### */
/*   STYLE JURIDICO.PHP */
/* #################### */
#juridicoWrapper {
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
}

#juridicoBanner {
    width: 100%;
    height: 300px;
    background-image: url('/img/juridico/banner.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#juridicoBannerOverlay {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 60px;
}

#juridicoBannerTextoContainer {
    color: white;
}

#homeBannerOverlay {
	background: rgba(0, 0, 0, 0.4);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 60px;
}

#homeBannerTextoContainer {
	color: white;
}

.homeWelcomeTextWrapper {
	display: inline-block;
	margin:0px 0px 20px 0px;
}

.homeWelcomeText {
	font-size: 36px;
	font-weight: bold;
	color: white;
	display: inline-block;
}

.homeBarraDourada {
	height: 10px;
	background-color: #ccb178;
	margin-top: 10px;
	width: 100%;
}


.homeSubtitleText {
	font-size: 18px;
	font-weight: 400;
	color: #f1f1f1;
}

/* Estilos para Normativos */
#normativosWrapper {
	padding: 0;
	font-family: 'Segoe UI', sans-serif;
}

#normativosBanner {
	width: 100%;
	height: 300px;
	background-image: url('/img/normativos/banner.jpg');
	background-size: cover;
	background-position: center;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

#normativosBannerOverlay {
	background: rgba(0, 0, 0, 0.4);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 60px;
}

#normativosBannerTextoContainer {
	color: white;
}

.normativosWelcomeTextWrapper {
	display: inline-block;
	margin:0px 0px 20px 0px;
}

.normativosWelcomeText {
	font-size: 36px;
	font-weight: bold;
	color: white;
	display: inline-block;
}

.normativosBarraDourada {
	height: 10px;
	background-color: #ccb178;
	margin-top: 10px;
	width: 100%;
}

.normativosSubtitleText {
	font-size: 18px;
	font-weight: 400;
	color: #f1f1f1;
}

/* Estilos para Colaborador */
#colaboradorWrapper {
	padding: 0;
	font-family: 'Segoe UI', sans-serif;
}

#colaboradorBanner {
    width: 100%;
    height: 300px;
    background-image: url('/img/colaborador/banner.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#colaboradorBannerOverlay {
	background: rgba(0, 0, 0, 0.4);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 60px;
}

#colaboradorBannerTextoContainer {
	color: white;
}

.colaboradorWelcomeTextWrapper {
	display: inline-block;
	margin:0px 0px 20px 0px;
}

.colaboradorWelcomeText {
	font-size: 36px;
	font-weight: bold;
	color: white;
	display: inline-block;
}

.colaboradorBarraDourada {
	height: 10px;
	background-color: #ccb178;
	margin-top: 10px;
	width: 100%;
}

.colaboradorSubtitleText {
	font-size: 18px;
	font-weight: 400;
	color: #f1f1f1;
}

/*Estilos para Saúde Ocupacional */
:root {
  --so-navy: #0D1F3C;
  --so-navy2: #1B3A6B;
  --so-gold: #B8982A;
  --so-gold-t: #C8A951;
  --so-gold-bg: #FAF4E1;
  --so-ink: #23303F;
  --so-muted: #5B6B7B;
  --so-line: #E4E7EC;
  --so-soft: #F5F7F9;
  --so-page: #EEF1F4;
}

/* ===== BANNER SAÚDE OCUPACIONAL ===== */
#saudeOcupBanner {
  width: 100%;
  height: 300px;
  background-image: url('/img/saude_ocup/saude_ocup.webp');
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

/*Camada escurecida sobre a imagem*/
#saudeOcupBanner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3); /* Ajuste o 0.5 para mais ou menos escuro */
	z-index: 1; /* Coloca a camada acima da imagem */
}

/* Garante que o conteúdo (texto) fique acima do overlay */
#saudeOcupBanner > * {
  position: relative;
  z-index: 2;
}

#saudeOcupBannerOverlay {
  background: rgba(0,0,0,0.4);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 60px;
}
#saudeOcupBannerTextoContainer {
  color: white;
}
.saudeOcupWelcomeTextWrapper {
  display: inline-block;
  margin: 0 0 20px 0;
}
.saudeOcupWelcomeText {
  font-size: 36px;
  font-weight: bold;
  color: white;
  display: inline-block;
}
.saudeOcupBarraDourada {
  height: 10px;
  background-color: #ccb178;
  margin-top: 10px;
  width: 100%;
}
.saudeOcupSubtitleText {
  font-size: 18px;
  font-weight: 400;
  color: #f1f1f1;
}

/* ===== CONTENT CONTAINER ===== */
#saudeOcupContentContainer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* ===== GRID LAYOUT ===== */
.saudeOcupGrid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ===== CARD PRINCIPAL ===== */
.saudeOcupCardPrincipal {
  width: 100%;
}

/* ===== ÁREA DOS CARDS SECUNDÁRIOS ===== */
.saudeOcupCardsSecundarios {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  align-items: stretch;
}

.saudeOcupCardPasso {
  grid-column: 1;
  grid-row: 1;
}

.saudeOcupCardAtento {
  grid-column: 2;
  grid-row: 1;
}

.saudeOcupCardAgendar {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* ===== CARD STYLES ===== */
.saudeOcupCard {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 20px;
  transition: transform 0.2s ease;
  border: 1px solid var(--so-line);
  height: 100%;
}
.saudeOcupCard:hover {
  transform: translateY(-2px);
}

.saudeOcupCardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}
.saudeOcupCardHeader h2 {
  margin: 0;
  color: var(--so-navy);
  font-size: 18px;
  font-weight: 700;
}
.saudeOcupCardHeader .ic {
  color: var(--so-navy);
  opacity: 0.45;
}

/* ===== SERVICES LIST ===== */
.bx-serv {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.bx-serv li {
  display: flex;
  gap: 11px;
  font-size: 14.5px;
}
.bx-serv .ck {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--so-gold);
}
.bx-serv b {
  color: var(--so-navy);
}

/* ===== STEPS ===== */
.bx-step {
  display: flex;
  gap: 13px;
  padding: 10px 0;
  border-top: 1px solid var(--so-line);
}
.bx-step:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.bx-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--so-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bx-step p {
  margin: 3px 0 0;
  font-size: 14.5px;
}
.bx-step b {
  color: var(--so-navy);
}

/* ===== CONTACT GRID ===== */
.bx-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--so-line);
  border: 1px solid var(--so-line);
  border-radius: 10px;
  overflow: hidden;
}
.bx-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--so-soft);
  padding: 13px 15px;
}
.bx-row .ic {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--so-navy);
}
.bx-row .k {
  font-size: 11.5px;
  color: var(--so-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 0 0 2px;
}
.bx-row .v {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0;
  color: var(--so-navy);
}
.bx-row a {
  color: var(--so-navy);
  text-decoration: none;
}

@media(max-width:560px) {
  .bx-contact {
    grid-template-columns: 1fr;
  }
}

/* ===== CTA BUTTON ===== */
.bx-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  background: var(--so-navy);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 8px;
}
.bx-cta svg {
  color: var(--so-gold-t);
}

/* ===== ALERT BOX ===== */
.bx-alert {
  border-left: 4px solid var(--so-gold);
  background: var(--so-gold-bg);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
}
.bx-alert ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 7px;
}
.bx-alert li {
  font-size: 14px;
}
.bx-alert b {
  color: var(--so-navy);
}

/* ===== FOOTER ===== */
.bx-foot {
  margin-top: 16px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  border: 1px solid var(--so-line);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  font-size: 15px;
  color: var(--so-muted);
  line-height: 1.7;
}
.bx-foot b {
  color: var(--so-navy);
}

/* ===== RESPONSIVO ===== */
@media(max-width:1024px) {
  .saudeOcupCardsSecundarios {
    grid-template-columns: 1fr 1fr;
  }
  .saudeOcupCardAgendar {
    grid-column: 1 / -1;
  }
}
@media(max-width:768px) {
  .saudeOcupCardsSecundarios {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .saudeOcupCardPasso   { grid-column: 1; grid-row: 1; }
  .saudeOcupCardAtento  { grid-column: 1; grid-row: 2; }
  .saudeOcupCardAgendar { grid-column: 1; grid-row: 3; }
  #saudeOcupBannerOverlay {
    padding-left: 20px;
    padding-right: 20px;
  }
  .saudeOcupWelcomeText {
    font-size: 28px;
  }
  .saudeOcupSubtitleText {
    font-size: 16px;
  }
  #saudeOcupContentContainer {
    padding: 20px 15px;
  }
}


/*--- BEM-ESTAR E PREVENÇÃO - NOVA SECTION ---*/
.saudeBemEstar {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border: 1px solid var(--so-line);
  overflow: hidden;
  transition: transform 0.2s ease;
}
.saudeBemEstar:hover {
  transform: translateY(-2px);
}

/* Header da card */
.saudeBemEstar .bx-ch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 12px 20px;
  border-bottom: 1px solid var(--so-line);
}
.saudeBemEstar .bx-ch h2 {
  margin: 0;
  color: var(--so-navy);
  font-size: 18px;
  font-weight: 700;
}
.saudeBemEstar .bx-ch .ic {
  color: var(--so-navy);
  opacity: 0.45;
  flex-shrink: 0;
}

/* Grid dos 4 pills (2 colunas) */
.saudeBemEstar .bx-well {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
}

/* Cada pill */
.saudeBemEstar .bx-pill {
  background: var(--so-soft);
  border-radius: 10px;
  padding: 16px 18px;
  border: 1px solid var(--so-line);
}

/* Título do pill com ícone */
.saudeBemEstar .bx-pill .ph {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px 0;
  color: var(--so-navy);
  font-size: 15px;
  font-weight: 700;
}
.saudeBemEstar .bx-pill .ph svg {
  color: var(--so-gold);
  flex-shrink: 0;
}

/* Lista dentro do pill */
.saudeBemEstar .bx-pill ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 5px;
}
.saudeBemEstar .bx-pill ul li {
  font-size: 14px;
  color: var(--so-ink);
  line-height: 1.5;
}

/* Barra legal no fundo */
.saudeBemEstar .bx-legal {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  background: var(--so-gold-bg);
  border-top: 1px solid var(--so-line);
  font-size: 14px;
  color: var(--so-ink);
  line-height: 1.5;
}
.saudeBemEstar .bx-legal svg {
  flex-shrink: 0;
  color: var(--so-gold);
  margin-top: 2px;
}
.saudeBemEstar .bx-legal b {
  color: var(--so-navy);
  font-weight: 700;
}

/* ===== RESPONSIVO (adicionar ao seu media query 768px) ===== */
@media(max-width:768px) {
  .saudeBemEstar .bx-well {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .saudeBemEstar .bx-ch h2 {
    font-size: 16px;
  }
  .saudeBemEstar .bx-pill {
    padding: 14px 16px;
  }
}

@media(max-width:480px) {
  .saudeBemEstar .bx-well {
    padding: 15px;
  }
  .saudeBemEstar .bx-pill .ph {
    font-size: 14px;
  }
  .saudeBemEstar .bx-pill ul li {
    font-size: 13px;
  }
  .saudeBemEstar .bx-legal {
    font-size: 13px;
    padding: 12px 15px;
  }
}

/* Estilos para Redes */
#redesWrapper {
	padding: 0;
	font-family: 'Segoe UI', sans-serif;
}

#redesBanner {
	width: 100%;
	height: 300px;
	background-image: url('/img/redes/banner.jpg');
	background-size: cover;
	background-position: center;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

#redesBannerOverlay {
	background: rgba(0, 0, 0, 0.4);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 60px;
}

#redesBannerTextoContainer {
	color: white;
}

.redesWelcomeTextWrapper {
	display: inline-block;
	margin:0px 0px 20px 0px;
}

.redesWelcomeText {
	font-size: 36px;
	font-weight: bold;
	color: white;
	display: inline-block;
}

.redesBarraDourada {
	height: 10px;
	background-color: #ccb178;
	margin-top: 10px;
	width: 100%;
}

.redesSubtitleText {
	font-size: 18px;
	font-weight: 400;
	color: #f1f1f1;
}

/* Estilos para Cards de Redes Sociais */
.redes-content-container {
	max-width: 1200px;
	margin: 40px auto;
	padding: 0 20px;
}

.redes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	padding: 20px 0;
}

.redes-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 30px;
	text-align: center;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	border: 1px solid #f0f0f0;
	position: relative;
	overflow: hidden;
}

.redes-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #ccb178, #d4c085);
	transition: height 0.3s ease;
}

.redes-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.redes-card:hover::before {
	height: 6px;
}

.redes-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	position: relative;
}

.redes-icon svg {
	width: 40px;
	height: 40px;
	transition: all 0.3s ease;
}

.redes-card h3 {
	color: #071b33;
	font-size: 1.4em;
	font-weight: 600;
	margin: 0 0 10px 0;
}

.redes-card p {
	color: #666;
	font-size: 0.95em;
	margin: 0 0 25px 0;
	line-height: 1.5;
}

.redes-link {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 25px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9em;
	transition: all 0.3s ease;
	border: 2px solid transparent;
}

/* Cores específicas para cada plataforma */
.redes-card[data-platform="website"] .redes-icon {
	background: linear-gradient(135deg, #071b33, #0a2240);
	color: white;
}

.redes-card[data-platform="website"] .redes-link {
	background: #071b33;
	color: white;
}

.redes-card[data-platform="website"] .redes-link:hover {
	background: #0a2240;
	transform: translateY(-2px);
}

.redes-card[data-platform="instagram"] .redes-icon {
	background: linear-gradient(135deg, #E4405F, #C13584, #833AB4);
	color: white;
}

.redes-card[data-platform="instagram"] .redes-link {
	background: #E4405F;
	color: white;
}

.redes-card[data-platform="instagram"] .redes-link:hover {
	background: #C13584;
	transform: translateY(-2px);
}

.redes-card[data-platform="facebook"] .redes-icon {
	background: #1877F2;
	color: white;
}

.redes-card[data-platform="facebook"] .redes-link {
	background: #1877F2;
	color: white;
}

.redes-card[data-platform="facebook"] .redes-link:hover {
	background: #166FE5;
	transform: translateY(-2px);
}

.redes-card[data-platform="linkedin"] .redes-icon {
	background: #0A66C2;
	color: white;
}

.redes-card[data-platform="linkedin"] .redes-link {
	background: #0A66C2;
	color: white;
}

.redes-card[data-platform="linkedin"] .redes-link:hover {
	background: #004182;
	transform: translateY(-2px);
}

.redes-card[data-platform="maps"] .redes-icon {
	background: linear-gradient(135deg, #4285F4, #34A853);
	color: white;
}

.redes-card[data-platform="maps"] .redes-link {
	background: #4285F4;
	color: white;
}

.redes-card[data-platform="maps"] .redes-link:hover {
	background: #34A853;
	transform: translateY(-2px);
}

.redes-card[data-platform="whatsapp"] .redes-icon {
	background: #25D366;
	color: white;
}

.redes-card[data-platform="whatsapp"] .redes-link {
	background: #25D366;
	color: white;
}

.redes-card[data-platform="whatsapp"] .redes-link:hover {
	background: #128C7E;
	transform: translateY(-2px);
}

/* Responsividade */
@media (max-width: 768px) {
	.redes-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.redes-card {
		padding: 25px 20px;
	}
	
	.redes-icon {
		width: 70px;
		height: 70px;
	}
	
	.redes-icon svg {
		width: 35px;
		height: 35px;
	}
}

/* Apps abaixo */

#homeApps {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: center;
	position: relative;
	top: 0;
	transform: translateY(-50%);
	padding: 30px 40px 0px 40px;
	margin-bottom: -30px;
	z-index: 2;
}

.homeAppBlock {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100px;
	height: 100px;
}

.homeAppItem {
	width: 80px;
	height: 80px;
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
	cursor: pointer;
}


.homeAppItem:hover {
	transform: scale(1.05);
}

.homeAppIcon {
	width: 48px;
	height: 48px;
	object-fit: contain;
	cursor:pointer;
}


.homeAppText {
	position: absolute;
	bottom: -10px;
	font-size: 13px;
	font-weight: 500;
	color: #071b33;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.homeAppBlock:hover .homeAppText {
	opacity: 1;
}

/* Dashboard Styles */
.homeDateTime {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 15px;
}

.homeDate, .homeTime {
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
	background: rgba(255, 255, 255, 0.1);
	padding: 5px 10px;
	border-radius: 15px;
	backdrop-filter: blur(10px);
}

/* Home Dashboard */
/* Card de Notícias Destacado - Isolado */
#homeNoticiasDestaque {
	padding: 10px 20px 20px 20px;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

#homeNoticiasDestaque .noticias-destaque {
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e9ecef;
}

#homeNoticiasDestaque .noticias-destaque .homeCardHeader {
	background: linear-gradient(135deg, #2c5aa0 0%, #1e3a5f 100%);
	padding: 25px;
	min-height: 80px;
}

#homeNoticiasDestaque .noticias-destaque .homeCardHeader h3 {
	font-size: 18px;
	font-weight: 700;
}

#homeNoticiasDestaque .noticias-destaque .homeCardContent {
    padding: 25px;
    min-height: 120px;
}

/* Grid interno de duas colunas (principal 2fr, secundária 1fr) */
.noticiasGrid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 28px;
}

.noticia-principal {}

.noticia-coluna-menor {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-left: 1px solid #e3e7ed;
    padding-left: 24px;
}

.noticia-secundaria .noticia-titulo {
    font-size: 15px;
}

.noticia-secundaria .noticia-descricao {
    -webkit-line-clamp: 4;
}

/* Destaque de imagem na coluna principal */
.noticia-principal .noticia-thumb {
    width: 240px;
    height: 150px;
}

/* Estilos do conteúdo da notícia */
.noticia-item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.noticia-thumb {
	flex-shrink: 0;
	width: 120px;
	height: 80px;
	border-radius: 8px;
	overflow: hidden;
}

.noticia-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.noticia-conteudo {
	flex: 1;
	min-width: 0;
}

.noticia-titulo {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: #2c5aa0;
	text-decoration: none;
	margin-bottom: 8px;
	line-height: 1.4;
}

.noticia-titulo:hover {
	color: #1e3a5f;
	text-decoration: underline;
}

.noticia-descricao {
	color: #666;
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.noticia-meta {
	display: flex;
	gap: 15px;
	font-size: 12px;
	color: #999;
}

.noticia-fonte {
	font-weight: 500;
}

.noticia-data {
	font-style: italic;
}

/* Estilos para notícias sem imagem */
.noticia-sem-imagem {
    display: flex !important;
    flex-direction: column !important;
}

.noticia-sem-imagem .noticia-conteudo {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Garantir que notícias com imagem mantenham o layout original */
.noticia-com-imagem {
    display: flex;
    flex-direction: row;
}

.noticia-com-imagem .noticia-conteudo {
    flex: 1;
    margin-left: 15px;
}

/* Ajustes específicos para a notícia principal sem imagem */
.noticia-principal .noticia-sem-imagem {
    min-height: auto;
}

/* Ajustes específicos para a notícia secundária sem imagem */
.noticia-secundaria .noticia-sem-imagem {
    min-height: auto;
    padding: 15px;
}

/* Cards Agrupados - Grid de 3 colunas */
#homeDashboard {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding: 10px 20px 30px 20px;
	max-width: 1200px;
	margin: 0 auto;
	overflow-x: hidden;
	width: 100%;
	box-sizing: border-box;
}

	.homeDashboardCard {
		background: #ffffff;
		border-radius: 12px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.homeDashboardCard:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	}

	#homeDashboard .aniversariantes-card .homeCardContent {
		max-height: 340px;
		overflow-y: auto;
	}

		.homeCardHeader {
		padding: 20px;
		background: linear-gradient(135deg, #071b33 0%, #0a2240 100%);
		color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 70px;
		box-sizing: border-box;
	}

	.homeCardHeader h3 {
		margin: 0;
		font-size: 16px;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		text-align: left;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex: 1;
	}

			.homeCardHeaderActions {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: 10px;
				min-width: 60px;
				height: 100%;
			}

				.homeBadge {
					background: rgba(255, 255, 255, 0.2);
					color: white;
					padding: 4px 8px;
					border-radius: 12px;
					font-size: 12px;
					font-weight: 600;
					min-width: 24px;
					text-align: center;
					display: inline-flex;
					align-items: center;
					justify-content: center;
				}

				/* Botões de criar (ícone padrão nos headers) */
				.homeCardHeaderActions .homeBtnCriar,
				.homeCardHeaderActions .homeBtnCriarAviso,
				.homeCardHeaderActions .homeBtnCriarEvento {
                    background: rgba(255, 255, 255, 0.1);
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    color: white;
                    width: 32px;
                    height: 32px;
                    padding: 0;
                    border-radius: 6px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    transition: all 0.2s ease;
                }

				.homeCardHeaderActions .homeBtnCriar:hover,
				.homeCardHeaderActions .homeBtnCriarAviso:hover,
				.homeCardHeaderActions .homeBtnCriarEvento:hover {
                    background: rgba(255, 255, 255, 0.2);
                    border-color: rgba(255, 255, 255, 0.3);
                    transform: scale(1.05);
                }

		.homeCardContent {
			padding: 20px;
		}

		.homeNoData {
			color: #666;
			text-align: center;
			font-size: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			min-height: 150px;
		}

/* Home Recursos (Fundos e Timbrado) */
		/* Card de Recursos ocupa toda a largura do grid */
		#homeDashboard .recursos-card {
			grid-column: 1 / -1;
		}

		/* Ramais deve ocupar 2/3 da largura em desktop */
		#homeDashboard .ramais-card {
			grid-column: span 2;
		}

		#homeDashboard .ramais-card .homeCardHeaderActions .homeSearchInput {
			width: 260px;
			height: 32px;
			padding: 6px 10px;
			border: 1px solid rgba(255, 255, 255, 0.2);
			border-radius: 6px;
			background: rgba(255, 255, 255, 0.15);
			color: #ffffff;
			box-sizing: border-box;
		}

		#homeDashboard .ramais-card .homeCardHeaderActions .homeSearchInput::placeholder {
			color: rgba(255, 255, 255, 0.85);
		}

		#homeDashboard .ramais-card .homeCardHeaderActions .homeSearchInput:focus {
			outline: none;
			border-color: rgba(255, 255, 255, 0.35);
			box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
		}

		#homeDashboard .ramais-card .homeCardContent {
			max-height: 380px;
			overflow-y: auto;
			scrollbar-gutter: stable;
			-webkit-overflow-scrolling: touch;
		}

		/* Ajustes internos do card de Ramais para melhor aproveitamento de espaço */
		#homeDashboard .ramais-card .homeCardContent table.homeTable {
			width: 100%;
			border-collapse: collapse;
			border: 1px solid #e5e7eb; /* grade externa */
		}

		#homeDashboard .ramais-card .homeCardContent table.homeTable thead tr {
			position: sticky;
			top: 0;
			z-index: 5;
			background: #f7f9fc;
			box-shadow: 0 2px 0 #e5e7eb;
		}

		#homeDashboard .ramais-card .homeCardContent table.homeTable thead th,
		#homeDashboard .ramais-card .homeCardContent table.homeTable tbody td {
			padding: 12px 14px;
			vertical-align: middle;
			border-right: 1px solid #e5e7eb; /* linhas verticais */
			border-bottom: 1px solid #e5e7eb; /* linhas horizontais */
		}

		#homeDashboard .ramais-card .homeCardContent table.homeTable thead th:last-child,
		#homeDashboard .ramais-card .homeCardContent table.homeTable tbody td:last-child {
			border-right: none;
		}

		#homeDashboard .ramais-card .homeCardContent table.homeTable thead th {
			background: transparent;
			font-weight: 600;
		}

		#homeDashboard .ramais-card .homeCardContent table.homeTable tbody tr:nth-child(even) {
			background: #fbfcfe; /* leve zebra para leitura */
		}

		/* Larguras e quebra de texto por coluna */
		#homeDashboard .ramais-card .homeCardContent table.homeTable th:nth-child(1),
		#homeDashboard .ramais-card .homeCardContent table.homeTable td:nth-child(1) {
			width: 110px;
			white-space: nowrap;
		}

		#homeDashboard .ramais-card .homeCardContent table.homeTable th:nth-child(2),
		#homeDashboard .ramais-card .homeCardContent table.homeTable td:nth-child(2) {
			white-space: normal;
			word-break: break-word;
		}

		#homeDashboard .ramais-card .homeCardContent table.homeTable th:nth-child(3),
		#homeDashboard .ramais-card .homeCardContent table.homeTable td:nth-child(3) {
			width: 180px;
		}

		#homeDashboard .ramais-card .homeCardContent table.homeTable th:last-child,
		#homeDashboard .ramais-card .homeCardContent table.homeTable td:last-child {
			width: 90px;
			text-align: center;
		}

		#homeDashboard .ramais-card .homeCardContent .btnTiny {
			margin-right: 6px;
		}
		
		@media (max-width: 768px) {
			#homeDashboard .ramais-card .homeCardHeaderActions {
				flex-wrap: wrap;
				gap: 8px;
			}
			#homeDashboard .ramais-card .homeCardHeaderActions .homeSearchInput {
				width: 100%;
			}
		}
		.recursosSection {
			margin-bottom: 16px;
		}

		.recursosSection h4 {
			margin: 0 0 10px 0;
			color: #333;
			font-size: 15px;
			font-weight: 600;
		}

		.recursosList {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
			gap: 12px;
		}

		.recursoItem {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8px;
			padding: 10px;
			background: #f8f9fa;
			border-radius: 8px;
		}

		.recursoThumb {
			width: 100%;
			height: 100px;
			object-fit: cover;
			border-radius: 4px;
			background: #fff;
		}

		.recursoIcon {
			font-size: 26px;
		}

		.recursoNome {
			font-size: 13px;
			color: #555;
			text-align: center;
			word-break: break-word;
		}

/* Home Avisos */
			.homeAvisoItem {
				display: flex;
				align-items: flex-start;
				gap: 12px;
				padding: 12px 0;
				border-bottom: 1px solid #f0f0f0;
			}

			.homeAvisoItem:last-child {
				border-bottom: none;
			}

				.homeAvisoIcon {
					font-size: 20px;
					flex-shrink: 0;
				}

				.homeAvisoContent {
					flex: 1;
				}

					.homeAvisoTitle {
						font-weight: 600;
						color: #071b33;
						margin-bottom: 4px;
					}

					.homeAvisoText {
						color: #666;
						font-size: 14px;
						margin-bottom: 4px;
					}

					.homeAvisoDate {
						color: #999;
						font-size: 12px;
					}

					/* ===== NOVO: ANEXOS ===== */
					.homeAvisoAnexos {
						margin-top: 6px;
						padding-top: 6px;
						border-top: 1px solid #e0e0e0;
						display: flex;
						flex-wrap: wrap;
						gap: 6px;
					}

						.homeAvisoAnexoLink {
							display: inline-flex;
							align-items: center;
							gap: 4px;
							padding: 4px 8px;
							background: #f8f9fa;
							border: 1px solid #e0e0e0;
							border-radius: 4px;
							color: #333;
							text-decoration: none;
							font-size: 12px;
							transition: all 0.2s ease;
							max-width: 200px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							position: relative;
							padding-right: 28px;
						}

						.homeAvisoAnexoLink:hover {
							background: #e9ecef;
							border-color: #ccc;
							color: #071b33;
						}

						.anexoTamanho {
							opacity: 0.7;
							font-size: 11px;
							margin-left: 2px;
							color: #666;
						}

						/* === BOTÃO DE VISUALIZAÇÃO ==*/
						.visualizarAnexoBtn {
							position: absolute;
							right: 4px;
							top: 50%;
							transform: translateY(-50%);
							background: none;
							border: none;
							cursor: pointer;
							font-size: 14px;
							opacity: 0.7;
							transition: opacity 0.2s;
							padding: 2px;
							line-height: 1;
						}

						.homeAvisoAnexoLink:hover .visualizarAnexoBtn {
							opacity: 1;
						}

			.homeAvisoItem.urgente .homeAvisoTitle {
				color: #dc3545;
			}

			.homeAvisoItem.normal .homeAvisoTitle {
				color: #071b33;
			}

			.homeAvisoItem.info .homeAvisoTitle {
				color: #17a2b8;
			}

			.homeVerTodos {
				text-align: center;
				margin-top: 15px;
				padding-top: 15px;
				border-top: 1px solid #f0f0f0;
			}

			.homeVerTodos a {
				color: #071b33;
				text-decoration: none;
				font-weight: 500;
				transition: color 0.2s ease;
			}

			.homeVerTodos a:hover {
				color: #0a2240;
			}

/* Home Botão Criar Aviso */
				.homeBtnCriarAviso {
					background: #28a745;
					color: white;
					border: none;
					border-radius: 6px;
					padding: 8px 12px;
					font-size: 14px;
					cursor: pointer;
					transition: all 0.2s ease;
					display: flex;
					align-items: center;
					gap: 6px;
					box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
				}

				.homeBtnCriarAviso:hover {
					background: #218838;
					transform: translateY(-1px);
					box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
				}

				.homeBtnCriarAviso i {
					font-size: 16px;
				}

/* Home Modal Criar Aviso */
.homeModal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

	.homeModalContent {
		background: white;
		border-radius: 12px;
		padding: 24px;
		width: 90%;
		max-width: 500px;
		max-height: 90vh;
		overflow-y: auto;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	}

		.homeModalHeader {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
			padding-bottom: 15px;
			border-bottom: 1px solid #eee;
		}

			.homeModalTitle {
				font-size: 20px;
				font-weight: 600;
				color: #071b33;
				margin: 0;
			}

			.homeModalClose {
				background: none;
				border: none;
				font-size: 24px;
				color: #999;
				cursor: pointer;
				padding: 0;
				width: 30px;
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				transition: all 0.2s ease;
			}

			.homeModalClose:hover {
				background: #f5f5f5;
				color: #666;
			}

		.homeModalBody {
			padding: 0;
		}

			.homeFormGroup {
				margin-bottom: 16px;
			}

			.homeFormGroup label {
				display: block;
				margin-bottom: 6px;
				font-weight: 500;
				color: #333;
			}

			.homeFormGroup input,
			.homeFormGroup select,
			.homeFormGroup textarea {
				width: 100%;
				padding: 10px 12px;
				border: 1px solid #ddd;
				border-radius: 6px;
				font-size: 14px;
				transition: border-color 0.2s ease;
				box-sizing: border-box;
			}

			.homeFormGroup input:focus,
			.homeFormGroup select:focus,
			.homeFormGroup textarea:focus {
				outline: none;
				border-color: #071b33;
				box-shadow: 0 0 0 2px rgba(7, 27, 51, 0.1);
			}

			.homeFormGroup textarea {
				resize: vertical;
				min-height: 80px;
			}

			.homeFormRow {
				display: flex;
				gap: 12px;
			}

			.homeFormRow .homeFormGroup {
				flex: 1;
			}

		.homeModalFooter {
			display: flex;
			gap: 12px;
			justify-content: flex-end;
			margin-top: 24px;
			padding-top: 20px;
			border-top: 1px solid #eee;
		}

			.homeBtnSecondary {
				background: #6c757d;
				color: white;
				border: none;
				border-radius: 6px;
				padding: 10px 20px;
				font-size: 14px;
				cursor: pointer;
				transition: background 0.2s ease;
			}

			.homeBtnSecondary:hover {
				background: #5a6268;
			}

			.homeBtnPrimary {
				background: #071b33;
				color: white;
				border: none;
				border-radius: 6px;
				padding: 10px 20px;
				font-size: 14px;
				cursor: pointer;
				transition: background 0.2s ease;
			}

			.homeBtnPrimary:hover {
				background: #0a2240;
			}

			.homeBtnDanger {
				background: #dc3545;
				color: #fff;
				border: none;
				border-radius: 6px;
				padding: 10px 20px;
				font-size: 14px;
				cursor: pointer;
				transition: background 0.2s ease;
			}

			.homeBtnDanger:hover {
				background: #c82333;
			}

			.homeIconOnlyBtn {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				line-height: 1;
				min-width: 32px;
				height: 32px;
				padding: 6px;
				border-radius: 6px;
			}

			.homeIconOnlyBtn svg {
				width: 18px;
				height: 18px;
				display: block;
			}

.btn-primary:disabled {
	background: #ccc;
	cursor: not-allowed;
}



/* Estatísticas Styles */
.stat-item {
	text-align: center;
	padding: 15px 0;
	border-bottom: 1px solid #f0f0f0;
}

.stat-item:last-child {
	border-bottom: none;
}

.stat-number {
	font-size: 28px;
	font-weight: 700;
	color: #071b33;
	margin-bottom: 5px;
}

.stat-label {
	color: #666;
	font-size: 14px;
	margin-bottom: 5px;
}

.stat-trend {
	font-size: 12px;
	font-weight: 600;
}

.stat-trend.up {
	color: #28a745;
}

.stat-trend.down {
	color: #dc3545;
}

/* Eventos Styles */
.evento-item {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
}

.evento-item:last-child {
	border-bottom: none;
}

.evento-date {
	text-align: center;
	background: #071b33;
	color: white;
	padding: 8px;
	border-radius: 8px;
	min-width: 50px;
}

.evento-day {
	font-size: 18px;
	font-weight: 700;
}

.evento-month {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
}

.evento-content {
	flex: 1;
}

.evento-title {
	font-weight: 600;
	color: #071b33;
	margin-bottom: 4px;
}

.evento-time {
	color: #666;
	font-size: 14px;
}

/* Links Úteis Styles */
.link-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
}

.link-item:last-child {
	border-bottom: none;
}

.link-icon {
	font-size: 18px;
}

.link-item a {
	color: #071b33;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}

.link-item a:hover {
	color: #0a2240;
	text-decoration: underline;
}

/* Carrossel de ícones para mobile */
.homeApps-carousel {
	display: none;
	position: relative;
	overflow: hidden;
	padding: 0 40px;
	margin: 20px 0;
}

.homeApps-carousel-container {
	display: flex;
	transition: transform 0.3s ease;
	gap: 20px;
	width: 100%;
}

.homeApps-carousel .homeAppBlock {
	flex: 0 0 calc(33.333% - 14px);
	min-width: calc(33.333% - 14px);
}

.carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(7, 27, 51, 0.8);
	color: white;
	border: none;
	border-radius: 50%;
	width: 35px;
	height: 35px;
	cursor: pointer;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: background 0.2s ease;
}

.carousel-btn:hover {
	background: rgba(7, 27, 51, 1);
}

.carousel-btn.prev {
	left: 5px;
}

.carousel-btn.next {
	right: 5px;
}

.carousel-indicators {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 15px;
}

.carousel-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(7, 27, 51, 0.3);
	cursor: pointer;
	transition: background 0.2s ease;
}

.carousel-dot.active {
	background: #071b33;
}

/* Responsive */
@media (max-width: 1250px) {
	#homeApps {
		display: none;
	}
	
	.homeApps-carousel {
		display: block;
	}
}

@media (max-width: 768px) {
	.homeCardHeader, .homeCardContent {
		padding: 15px;
	}
	
	.homeDateTime {
		flex-direction: column;
		gap: 8px;
		align-items: flex-start;
	}
}

@media (max-width: 900px) {
    #homeNoticiasDestaque {
        padding: 10px 15px 20px 15px;
    }
    
    #homeNoticiasDestaque .noticias-destaque {
        width: 100%;
    }

    .noticiasGrid {
        grid-template-columns: 1fr; /* Empilha no tablet */
    }

    .noticia-coluna-menor {
        border-left: none;
        padding-left: 0;
    }
	
    #homeDashboard {
        display: flex;
        flex-direction: column;
        gap: 20px;
        max-width: 100vw;
        padding: 10px 15px 20px 15px;
        margin: 0 auto;
    }
	
    .homeDashboardCard {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 700px) {
    #homeDashboard {
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-width: 100vw;
        padding: 10px 15px 20px 15px;
        margin: 0 auto;
    }

	.homeDashboardCard {
		width: 100%;
		min-width: 0;
	}
    #homeApps {
        transform: none;
        padding: 10px 15px;
        margin-bottom: 0;
        gap: 20px;
    }
    .homeAppBlock {
        width: 100px;
        height: 100px;
    }
    .homeAppItem {
        width: 80px;
        height: 80px;
    }
}
@media (max-width: 600px) {
    #homeNoticiasDestaque {
        padding: 10px;
    }
	
	#homeNoticiasDestaque .noticias-destaque .homeCardHeader,
	#homeNoticiasDestaque .noticias-destaque .homeCardContent {
		padding: 20px;
	}
	
    .noticia-item {
        flex-direction: column;
        gap: 15px;
    }
	
	.noticia-thumb {
		width: 100%;
		height: 150px;
	}
	
    #homeDashboard {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 100vw;
        padding: 10px 15px 20px 15px;
    }
	
    .homeDashboardCard {
        width: 100%;
        min-width: 0;
    }
    #homeApps {
        transform: none;
        padding: 10px;
        margin-bottom: 0;
        gap: 16px;
    }
    .homeAppBlock {
        width: 90px;
        height: 90px;
    }
    .homeAppItem {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 500px) {
    #homeDashboard {
        max-width: 100vw;
        padding: 10px;
    }
	
    .homeDashboardCard {
        width: 100%;
        min-width: 0;
    }
	
	.okrDepartmentInfo {
		margin: 25px 0;
	}
	
	.okrDepartmentCard {
		background: linear-gradient(135deg, #071b33 0%, #0d2744 100%);
		border: none;
		border-radius: 12px;
		padding: 30px;
		box-shadow: 0 8px 25px rgba(7, 27, 51, 0.3);
		position: relative;
		overflow: hidden;
	}
	
	.okrDepartmentCard::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4px;
		background: linear-gradient(90deg, #ccb178 0%, #d4c085 50%, #ccb178 100%);
	}
	
	.okrDepartmentCard h3 {
		color: white;
		font-size: 1.4rem;
		font-weight: 600;
		margin: 0 0 20px 0;
		display: flex;
		align-items: center;
		gap: 12px;
	}
	
	.okrDepartmentCard h3 i {
		color: #ccb178;
		font-size: 1.2rem;
	}
	
	.okrDepartmentCard h3 span {
		color: #ccb178;
		font-weight: 500;
	}
	
	#okrDashboard {
		max-width: calc(100vw - 20px);
		padding: 10px;
	}
}

/* OKR Styles - Redesigned */
#okrWrapper {
	padding: 0;
	margin: 0;
	font-family: 'Segoe UI', sans-serif;
}

.okr-content-container {
	max-width: 1200px;
	margin: 60px auto 40px auto;
	padding: 20px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	color: #333333;
}

.okrHeader {
	margin-bottom: 0;
	text-align: center;
	background: #071b33;
	padding: 30px 20px;
	border-bottom: 1px solid #0d2744;
}

.okrHeader h1 {
	color: #ffffff;
	font-size: 2rem;
	margin-bottom: 8px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.okrHeader p {
	color: #ccb178;
	font-size: 1rem;
	margin: 0;
	font-weight: 400;
}

.okrDepartmentInfo {
	margin: 20px;
}

.okrDepartmentCard {
	background: #f8f9fa;
	border: 1px solid #e0e0e0;
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 8px;
}

.okrDepartmentCard h3 {
	color: #333333;
	font-size: 1.2rem;
	font-weight: 600;
	margin: 0 0 15px 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.okrDepartmentCard h3 span {
	color: #ccb178;
	font-weight: 500;
}

.okrPeriodSelector {
	margin-top: 15px;
	display: flex;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
}

.okrProgramInfo {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.okrProgramBadge {
	background: #071b33;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.8rem;
	padding: 6px 12px;
	border-radius: 14px;
}

.okrProgramHint {
	color: #4b5563;
	font-size: 0.85rem;
}

.okrPeriodSelector label {
	font-size: 1rem;
	color: #333333;
	font-weight: 500;
}

.okrSelectPeriod {
	padding: 8px 12px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	background: #ffffff;
	font-size: 14px;
	color: #333333;
	cursor: pointer;
	font-weight: 500;
	min-width: 180px;
}

.okrSelectPeriod:focus {
	outline: none;
	border-color: #ccb178;
	box-shadow: 0 0 0 2px rgba(204, 177, 120, 0.2);
}
	
#okrDashboard {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 20px;
	margin-top: 0;
	align-items: start;
	padding: 20px;
	max-width: 1200px;
	margin: 0 auto;
}

.okrDashboardCard {
	background: #ffffff;
	border: 1px solid #e0e0e0;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.okrAnnualCard {
	margin: 0 20px 20px 20px;
}

.okrStatsCard {
	height: auto;
	align-self: start;
}

.okrObjectivesCard {
	height: auto;
}
			
.okrCardHeader {
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 0;
	background: #f8f9fa;
}

.okrCardHeader h3 {
	color: #333333;
	font-size: 1.2rem;
	font-weight: 600;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	text-transform: none;
	letter-spacing: 0;
}

.okrCardHeaderActions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.okrBtnCreateObjective {
	background: #ccb178;
	color: #071b33;
	border: none;
	padding: 8px 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.okrBtnCreateObjective:hover {
	background: #bda067;
}
			
.okrCardContent {
	padding: 30px;
}

.okrStatsGrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
}

.okrStatItem {
	text-align: center;
	padding: 20px;
	background: #f8f9fa;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
}

.okrStatNumber {
	font-size: 2rem;
	font-weight: 700;
	color: #071b33;
	margin-bottom: 8px;
	text-shadow: none;
}

.okrStatLabel {
	font-size: 0.85rem;
	color: #666666;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.okrObjectiveItem {
	background: #ffffff;
	border: 1px solid #e8eaed;
	padding: 28px;
	margin: 0 0 56px 0;
	color: #333333;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease;
	position: relative;
}

.okrObjectiveItem:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	border-color: #ccb178;
	transform: translateY(-2px);
}
					
.okrObjectiveHeader {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 16px;
}

.okrObjectiveTitle {
	font-weight: 700;
	color: #071b33;
	font-size: 1.2rem;
	margin: 0;
	text-transform: none;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.okrObjectiveActions {
	display: flex;
	gap: 8px;
}

.okrObjectiveActions button {
	background: #ccb178;
	border: none;
	color: #071b33;
	padding: 6px 10px;
	cursor: pointer;
	font-weight: 600;
	font-size: 0.85rem;
}

.okrObjectiveActions button:hover {
	background: #bda067;
}
					
.okrObjectiveDescription {
	color: #6b7280;
	font-size: 0.95rem;
	margin-bottom: 20px;
	line-height: 1.6;
	font-weight: 400;
}

.okrObjectiveMeta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
}

.okrObjectiveMeta span {
	background: #f3f4f6;
	color: #374151;
	padding: 6px 10px;
	border-radius: 12px;
	font-size: 0.78rem;
	font-weight: 500;
}

.okrObjectiveProgress {
	margin-bottom: 20px;
}

.okrProgressLabel {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	font-size: 0.9rem;
	font-weight: 600;
	color: #374151;
	text-transform: none;
}

.okrProgressPercentage {
	color: #ccb178;
	font-weight: 700;
}

.okrProgressBar {
	width: 100%;
	height: 8px;
	background: #f3f4f6;
	border: none;
	overflow: hidden;
	border-radius: 4px;
}

.okrProgressFill {
	height: 100%;
	background: linear-gradient(90deg, #3b82f6, #10b981);
	transition: width 0.3s ease;
	border-radius: 4px;
}
					
.okrKeyResults {
	margin-top: 20px;
}

.okrKeyResultsHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding: 12px 16px;
	background: #f8f9fa;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.okrKeyResultsHeader h5 {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: #666666;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.okrKeyResultsHeader h5 i {
	font-size: 0.85rem;
	color: #ccb178;
}

.okrBtnAddKeyResult {
	background: #ccb178;
	color: #071b33;
	border: none;
	padding: 6px 12px;
	font-size: 0.8rem;
	cursor: pointer;
	font-weight: 600;
	text-transform: none;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}

.okrBtnAddKeyResult:hover {
	background: #bda067;
}
						
.okrKeyResultItem {
	padding: 18px 16px;
	margin-bottom: 12px;
	background: #ffffff;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.okrKeyResultItem:last-child {
	margin-bottom: 0;
}

.okrKeyResultItem:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border-color: #ccb178;
	transform: translateY(-1px);
}

.okrKeyResultHeader {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 12px;
}

.okrKeyResultTitle {
	font-weight: 600;
	color: #374151;
	font-size: 0.95rem;
	margin: 0;
	text-transform: none;
	line-height: 1.4;
}

.okrKeyResultActions {
	display: flex;
	gap: 6px;
}

.okrKeyResultActions button {
	border: none;
	padding: 6px 10px;
	cursor: pointer;
	font-size: 0.8rem;
	font-weight: 600;
	border-radius: 4px;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Botão de atualizar progresso - azul como os menus */
.okrBtnUpdateProgress {
	background: #3b82f6;
	color: white;
}

.okrBtnUpdateProgress:hover {
	background: #2563eb;
	transform: translateY(-1px);
}

/* Botão de detalhes - cinza claro */
.okrBtnDetails {
	background: #6b7280;
	color: white;
	padding: 6px 8px;
	font-size: 0.75rem;
	min-width: auto;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.okrBtnDetails:hover {
	background: #4b5563;
	transform: translateY(-1px);
}

/* Botões de confirmação inline */
.okrConfirmationButtons {
	display: flex;
	gap: 8px;
	align-items: center;
}

.okrBtnConfirm {
	background: #10b981;
	color: white;
	padding: 6px 12px;
	border: none;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.okrBtnConfirm:hover {
	background: #059669;
	transform: translateY(-1px);
}

.okrBtnCancel {
	background: #ef4444;
	color: white;
	padding: 6px 12px;
	border: none;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.okrBtnCancel:hover {
	background: #dc2626;
	transform: translateY(-1px);
}

/* Botões quadrados apenas com emojis */
.okrBtnEmojiConfirm {
	background: #10b981;
	color: white;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 6px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
}

.okrBtnEmojiConfirm:hover {
	background: #059669;
	transform: translateY(-1px);
}

.okrBtnEmojiCancel {
	background: #ef4444;
	color: white;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 6px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.okrBtnEmojiCancel:hover {
	background: #dc2626;
	transform: translateY(-1px);
}

/* Botão para marcar como concluído - azul como o botão atualizar */
.okrBtnComplete {
	background: #3b82f6;
	color: white;
	width: 32px;
	height: 32px;
	padding: 6px 8px;
	font-size: 0.8rem;
	font-weight: 600;
	border-radius: 4px;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: auto;
}

.okrBtnComplete:hover {
	background: #2563eb;
	transform: translateY(-1px);
}

/* Botão já concluído - verde claro discreto */
.okrBtnCompleted {
	background: #86efac;
	color: #166534;
	cursor: not-allowed;
	width: 32px;
	height: 32px;
	padding: 6px 8px;
	font-size: 0.8rem;
	font-weight: 600;
	border-radius: 4px;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: auto;
}

.okrBtnCompleted:hover {
	transform: none;
}

/* Tag para campos automáticos */
.okrAutomaticTag {
	font-size: 0.75rem;
	color: #6b7280;
	text-align: center;
	line-height: 1.2;
	font-weight: 500;
	padding: 4px 8px;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	background-color: #f9fafb;
}

.okrKeyResultActions button i {
	font-size: 0.75rem;
}

.okrKeyResultDescription {
	color: #6b7280;
	font-size: 0.85rem;
	margin-bottom: 12px;
	line-height: 1.5;
}

.okrKeyResultProgress {
	margin-bottom: 8px;
}

.okrProgressInfo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}

.okrProgressLabel {
	font-size: 0.8rem;
	color: #6b7280;
	font-weight: 500;
}

.okrProgressValue {
	font-size: 0.85rem;
	font-weight: 600;
	color: #374151;
}

.okrProgressBarSmall {
	height: 4px;
	background: #f3f4f6;
	border-radius: 2px;
	overflow: hidden;
}

.okrKeyResultDeadline {
	font-size: 0.8rem;
	color: #6b7280;
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
}

.okrKeyResultDeadline i {
	font-size: 0.75rem;
	color: #ccb178;
}

.okrEmptyKeyResults {
	color: #9ca3af;
	font-size: 0.9rem;
	font-style: italic;
	text-align: center;
	padding: 20px 0;
	margin: 0;
}

.okrQuarterGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

.okrQuarterItem {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 14px;
	background: #fafafa;
}

.okrQuarterTitle {
	font-weight: 700;
	color: #071b33;
	margin-bottom: 8px;
}

.okrQuarterMetric {
	font-size: 0.85rem;
	color: #4b5563;
	margin-bottom: 4px;
}

.okrQuarterMetric strong {
	color: #111827;
}

.okrStatusBadge {
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.okrStatusCompleted {
	background-color: #d1fae5;
	color: #065f46;
}

.okrStatusOnTrack {
	background-color: #dbeafe;
	color: #1e40af;
}

.okrStatusAtRisk {
	background-color: #fef3c7;
	color: #92400e;
}

.okrStatusBehind {
	background-color: #fee2e2;
	color: #991b1b;
}

/* OKR Modal Styles */
.okrModal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	
	.okrModalContent {
		background: white;
		border-radius: 12px;
		max-width: 600px;
		width: 100%;
		max-height: 90vh;
		overflow-y: auto;
		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
		
		.okrModalHeader {
			padding: 20px 20px 0 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #e5e7eb;
			margin-bottom: 20px;
			
			.okrModalTitle {
				margin: 0;
				font-size: 1.5rem;
				font-weight: 600;
				color: #071b33;
			}
			
			.okrModalClose {
				background: none;
				border: none;
				font-size: 1.5rem;
				cursor: pointer;
				color: #6b7280;
				padding: 5px;
				border-radius: 4px;
				transition: all 0.2s ease;
				
				&:hover {
					background: #f3f4f6;
					color: #374151;
				}
			}
		}
		
		.okrModalBody {
			padding: 0 20px;
			
			.okrFormGroup {
				margin-bottom: 20px;
				
				label {
					display: block;
					margin-bottom: 5px;
					font-weight: 500;
					color: #374151;
					font-size: 0.875rem;
				}
				
				input, textarea, select {
					width: 100%;
					padding: 10px 12px;
					border: 1px solid #d1d5db;
					border-radius: 6px;
					font-size: 0.875rem;
					transition: border-color 0.2s ease, box-shadow 0.2s ease;
					box-sizing: border-box;
					
					&:focus {
						outline: none;
						border-color: #3b82f6;
						box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
					}
				}
				
				textarea {
					resize: vertical;
					min-height: 80px;
				}
			}
			
			.okrFormRow {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 15px;
				margin-bottom: 20px;
			}
		}
		
		.okrModalFooter {
			padding: 20px;
			display: flex;
			justify-content: flex-end;
			gap: 10px;
			border-top: 1px solid #e5e7eb;
			margin-top: 20px;
			
			.okrBtnSecondary {
				background: #f3f4f6;
				color: #374151;
				border: 1px solid #d1d5db;
				padding: 10px 20px;
				border-radius: 6px;
				cursor: pointer;
				font-weight: 500;
				transition: all 0.2s ease;
				
				&:hover {
					background: #e5e7eb;
					border-color: #9ca3af;
				}
			}
			
			.okrBtnPrimary {
				background: #3b82f6;
				color: white;
				border: none;
				padding: 10px 20px;
				border-radius: 6px;
				cursor: pointer;
				font-weight: 500;
				transition: all 0.2s ease;
				
				&:hover {
					background: #2563eb;
					transform: translateY(-1px);
				}
				
				&:disabled {
					background: #9ca3af;
					cursor: not-allowed;
					transform: none;
				}
			}
		}
	}
}

/* Conteúdo de observações */
.okrObservationsContent {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 16px;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: #495057;
	white-space: pre-wrap;
	word-wrap: break-word;
	min-height: 60px;
}

/* Responsive OKR */
@media (max-width: 768px) {
	#okrWrapper {
		padding: 15px;
		
		.okrHeader h1 {
			font-size: 2rem;
		}
		
		#okrDashboard {
			grid-template-columns: 1fr;
			
			.okrDashboardCard {
				.okrCardContent {
					.okrStatsGrid {
						grid-template-columns: 1fr 1fr;
					}
				}
			}
		}
	}
	
	.okrModal {
		padding: 10px;
		
		.okrModalContent {
			max-width: 100%;
			
			.okrModalBody {
				.okrFormRow {
					grid-template-columns: 1fr;
					gap: 0;
				}
			}
		}
	}
}

@media (max-width: 480px) {
	#okrWrapper {
		.okrHeader h1 {
			font-size: 1.75rem;
		}
		
		#okrDashboard {
			.okrDashboardCard {
				.okrCardContent {
					.okrStatsGrid {
						grid-template-columns: 1fr;
					}
				}
			}
		}
	}
	
	#mainTopoAcoes {
		gap: 10px;
	}
	
	.mainTopoIcon img {
		width: 20px;
		height: 20px;
	}
}

/* Aniversariantes Styles */
.aniversariante-item {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
	transition: background-color 0.2s ease;
}

.aniversariante-item:last-child {
	border-bottom: none;
}

.aniversariante-item:hover {
	background-color: #f8f9fa;
	border-radius: 8px;
	margin: 0 -8px;
	padding: 12px 8px;
}

.aniversariante-date {
	text-align: center;
	background: #071b33;
	color: white;
	padding: 8px;
	border-radius: 8px;
	min-width: 50px;
	transition: background-color 0.2s ease;
}

.aniversariante-day {
	font-size: 18px;
	font-weight: 700;
}

.aniversariante-month {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
}

.aniversariante-content {
	flex: 1;
}

.aniversariante-name {
	font-weight: 600;
	color: #071b33;
	margin-bottom: 4px;
	font-size: 14px;
}

.aniversariante-info {
    color: #666;
    font-size: 13px;
    margin-bottom: 2px;
}


/* Estilos especiais para aniversariantes */
.aniversariante-hoje {
	background: linear-gradient(90deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
	border-left: 4px solid #ffc107;
	padding-left: 12px;
	margin-left: -4px;
}

.aniversariante-hoje .aniversariante-date {
	background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
	color: #071b33;
	box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

.aniversariante-hoje .aniversariante-name {
	color: #e65100;
	font-weight: 700;
}

.aniversariante-proximo {
	background: linear-gradient(90deg, rgba(13, 202, 240, 0.1) 0%, rgba(13, 202, 240, 0.05) 100%);
	border-left: 4px solid #0dcaf0;
	padding-left: 12px;
	margin-left: -4px;
}

.aniversariante-proximo .aniversariante-date {
	background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
	color: white;
	box-shadow: 0 2px 8px rgba(13, 202, 240, 0.3);
}

.aniversariante-proximo .aniversariante-name {
	color: #0a58ca;
	font-weight: 600;
}

/* Responsividade para aniversariantes */
@media (max-width: 768px) {
	.aniversariante-item {
		gap: 10px;
		padding: 10px 0;
	}
	
	.aniversariante-date {
		min-width: 45px;
		padding: 6px;
	}
	
	.aniversariante-day {
		font-size: 16px;
	}
	
	.aniversariante-month {
		font-size: 9px;
	}
	
	.aniversariante-name {
		font-size: 13px;
	}
	
	.aniversariante-info {
		font-size: 12px;
	}
	

}

/* === COMPLIANCE BANNER STYLES === */
#complianceBanner {
    width: 100%;
    height: 300px;
    background-image: url('/img/compliance/banner.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#complianceBannerOverlay {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 60px;
}

#complianceBannerTextoContainer {
    color: white;
}

.complianceWelcomeTextWrapper {
    display: inline-block;
    margin: 0px 0px 20px 0px;
}

.complianceWelcomeText {
    font-size: 36px;
    font-weight: bold;
    color: white;
    display: inline-block;
}

.complianceBarraDourada {
    height: 10px;
    background-color: #ccb178;
    margin-top: 10px;
    width: 100%;
}

.complianceSubtitleText {
    font-size: 18px;
    font-weight: 400;
    color: #f1f1f1;
}

/* Estilos para visualização de PDF de compliance */
.compliance-pdf-container {
    max-width: 1200px;
    margin: 60px auto 40px auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.compliance-pdf-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 30px 20px;
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    border-radius: 12px;
    color: white;
}

.compliance-pdf-header h1 {
    font-size: 2.5em;
    font-weight: 700;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.compliance-pdf-header p {
    font-size: 1.1em;
    margin: 0;
    opacity: 0.9;
}

.compliance-pdf-viewer {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
}

.compliance-pdf-viewer iframe {
    display: block;
    border: none;
    min-height: 600px;
}

.compliance-admin-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    justify-content: flex-end;
}

.compliance-admin-actions .btn-action {
    background: #071b33;
    border: 1px solid #071b33;
    color: #ffffff;
}

.compliance-admin-actions .btn-action:hover {
    background: #0a2240;
    border-color: #0a2240;
}

.compliance-admin-actions .btn-action-danger {
    background: #b42318;
    border-color: #b42318;
}

.compliance-admin-actions .btn-action-danger:hover {
    background: #912018;
    border-color: #912018;
}



/* Responsividade para PDF viewer */
/* === OKR BANNER STYLES === */
#okrBanner {
    width: 100%;
    height: 300px;
    background-image: url('/img/okr/banner.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 10;
}

#okrBannerOverlay {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 60px;
}

#okrBannerTextoContainer {
    color: white;
}

.okrWelcomeTextWrapper {
    display: inline-block;
    margin: 0px 0px 20px 0px;
}

.okrWelcomeText {
    font-size: 36px;
    font-weight: bold;
    color: white;
    display: inline-block;
}

.okrBarraDourada {
    height: 10px;
    background-color: #ccb178;
    margin-top: 10px;
    width: 100%;
}

.okrSubtitleText {
    font-size: 18px;
    font-weight: 400;
    color: #f1f1f1;
}

#okrnewBanner {
    width: 100%;
    height: 300px;
    background-image: url('/img/okr/banner.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 10;
}

#okrnewBannerOverlay {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 60px;
}

#okrnewBannerTextoContainer {
    color: white;
}

.okrnewWelcomeTextWrapper {
    display: inline-block;
    margin: 0px 0px 20px 0px;
}

.okrnewWelcomeText {
    font-size: 36px;
    font-weight: bold;
    color: white;
    display: inline-block;
}

.okrnewBarraDourada {
    height: 10px;
    background-color: #ccb178;
    margin-top: 10px;
    width: 100%;
}

.okrnewSubtitleText {
    font-size: 18px;
    font-weight: 400;
    color: #f1f1f1;
}

.okrnew-content-container {
    max-width: 1200px;
    margin: 60px auto 40px auto;
    padding: 20px;
}

.okrnew-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.okrnew-content-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    padding: 24px;
    margin-bottom: 20px;
}

.okrnew-card-title {
    margin: 0 0 12px 0;
    font-size: 24px;
    color: #071b33;
}

.okrnew-card-subtitle {
    margin: 0 0 10px 0;
    font-size: 20px;
    color: #071b33;
}

.okrnew-card-text {
    margin: 0;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.6;
}

.okrnew-stat-number {
    font-size: 42px;
    font-weight: 700;
    color: #071b33;
    line-height: 1;
}

.okrnew-objectives-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.okrnewObjectiveItem {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    background: #ffffff;
}

.okrnewObjectiveHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.okrnewObjectiveTitle {
    margin: 0;
    font-size: 18px;
    color: #111827;
}

.okrnewObjectiveDepartment {
    background: #071b33;
    color: #ffffff;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    white-space: nowrap;
}

.okrnewObjectiveDescription {
    margin: 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
}

.okrnewObjectiveBlock {
    margin-top: 10px;
}

.okrnewObjectiveLabel {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #1f3b63;
    margin-bottom: 6px;
}

.okrnewObjectiveMetaGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.okrnewObjectiveMetaItem {
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    padding: 10px;
    background: #f8fafc;
}

.okrnewObjectiveMetaTag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #0b2a4a;
    margin-bottom: 4px;
}

.okrnewObjectiveMetaText {
    margin: 0;
    font-size: 13px;
    color: #334155;
    line-height: 1.5;
}

.okrnewObjectiveFooter {
    margin-top: 12px;
    border-top: 1px dashed #e5e7eb;
    padding-top: 10px;
}

.okrnew-loading,
.okrnewEmptyState {
    padding: 22px;
    text-align: center;
    color: #6b7280;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
}

/* === REPORT BANNER STYLES === */
#reportBanner {
    width: 100%;
    height: 300px;
    background-image: url('/img/report/banner.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 10;
    margin-bottom: 80px;
}

#reportBannerOverlay {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 60px;
}

#reportBannerTextoContainer {
    color: white;
}

.reportWelcomeTextWrapper {
    display: inline-block;
    margin: 0px 0px 20px 0px;
}

.reportWelcomeText {
    font-size: 36px;
    font-weight: bold;
    color: white;
    display: inline-block;
}

.reportBarraDourada {
    height: 10px;
    background-color: #ccb178;
    margin-top: 10px;
    width: 100%;
}

.reportSubtitleText {
    font-size: 18px;
    font-weight: 400;
    color: #f1f1f1;
}

/* === TEAM BANNER STYLES === */
#teamBanner {
    width: 100%;
    height: 300px;
    background-image: url('/img/equipe/banner.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 10;
}

#teamBannerOverlay {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 60px;
}

#teamBannerTextoContainer {
    color: white;
}

.teamWelcomeTextWrapper {
    display: inline-block;
    margin: 0px 0px 20px 0px;
}

.teamWelcomeText {
    font-size: 36px;
    font-weight: bold;
    color: white;
    display: inline-block;
}

.teamBarraDourada {
    height: 10px;
    background-color: #ccb178;
    margin-top: 10px;
    width: 100%;
}

.teamSubtitleText {
    font-size: 18px;
    font-weight: 400;
    color: #f1f1f1;
}

@media (max-width: 768px) {
    #complianceBannerOverlay,
    #okrBannerOverlay,
    #okrnewBannerOverlay,
    #reportBannerOverlay,
    #teamBannerOverlay {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .complianceWelcomeText,
    .okrWelcomeText,
    .okrnewWelcomeText,
    .reportWelcomeText,
    .teamWelcomeText {
        font-size: 28px;
    }
    
    .complianceSubtitleText,
    .okrSubtitleText,
    .okrnewSubtitleText,
    .reportSubtitleText,
    .teamSubtitleText {
        font-size: 16px;
    }
    
    .okrnew-grid {
        grid-template-columns: 1fr;
    }
    
    .okrnew-content-container {
        margin: 24px auto 30px auto;
        padding: 15px;
    }

    .okrnewObjectiveHeader {
        flex-direction: column;
        align-items: flex-start;
    }
    
    
    
    .compliance-pdf-container {
        padding: 15px;
        margin: 10px;
    }
    
    .compliance-pdf-header {
        padding: 20px 15px;
    }
    
    .compliance-pdf-header h1 {
        font-size: 1.8em;
    }
    
    .compliance-pdf-header p {
        font-size: 1em;
    }
    
    .compliance-pdf-viewer iframe {
        height: 500px;
        min-height: 400px;
    }

    .compliance-admin-actions {
        justify-content: stretch;
        flex-direction: column;
    }

    .compliance-admin-actions .btn-action {
        width: 100%;
        justify-content: center;
    }
    

}

@media (max-width: 480px) {
    .compliance-pdf-header h1 {
        font-size: 1.5em;
    }
    
    .compliance-pdf-viewer iframe {
        height: 400px;
        min-height: 350px;
    }
}

/* Fim dos estilos para PDF de compliance */

/* #################### */
/*   ESTILOS NORMATIVOS */
/* #################### */

.normativos-content-container {
    max-width: 1200px;
    margin: 60px auto 40px auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.normativos-menu-container {
    display: flex;
    gap: 30px;
    min-height: 700px;
}

/* Sidebar com lista de normativos */
.normativos-sidebar {
    flex: 0 0 350px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
}

.normativos-sidebar h3 {
    color: #071b33;
    font-size: 1.3em;
    margin: 0;
    text-align: left;
}

.normativos-sidebar-header {
    display: block;
    margin-bottom: 18px;
    border-bottom: 2px solid #071b33;
    padding-bottom: 10px;
}

.btn-action.btn-action-dark {
    background: #071b33;
    border-color: #071b33;
    color: #ffffff;
    font-size: 0.82em;
    padding: 7px 12px;
}

.normativos-actions .btn-action.btn-action-dark {
    background: #d4b268;
    border-color: #d4b268;
    color: #071b33;
}

.normativos-actions .btn-action.btn-action-dark:hover {
    background: #c7a34f;
    border-color: #c7a34f;
}

.btn-action.btn-action-dark:hover {
    background: #0a2240;
    border-color: #0a2240;
}

.normativos-add-btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 14px;
    padding: 10px 12px;
    font-size: 0.9em;
}

.btn-action-danger {
    background: #b42318;
    border-color: #b42318;
    color: #fff;
}

.btn-action-danger:hover {
    background: #912018;
    border-color: #912018;
}

.normativos-list-empty {
    text-align: center;
    font-size: 0.95em;
    color: #4b5563;
    padding: 18px 10px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
}

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

.normativo-item {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    background: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
    border: 1px solid #e0e0e0;
}

.normativo-item:hover {
    background: #f0f7ff;
    border-left-color: #071b33;
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(7, 27, 51, 0.2);
}

.normativo-item.active {
    background: #e3f2fd;
    border-left-color: #071b33;
    box-shadow: 0 2px 8px rgba(7, 27, 51, 0.3);
}

.normativo-icon {
    font-size: 0.75em;
    margin-right: 12px;
    flex-shrink: 0;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.6px;
    background: #071b33;
    border-radius: 4px;
    min-width: 34px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.normativo-nome {
    color: #333333;
    font-size: 0.95em;
    line-height: 1.3;
    font-weight: 500;
}

.normativo-item.active .normativo-nome {
    color: #071b33;
    font-weight: 600;
}

/* Área de visualização do PDF */
.normativos-viewer {
    flex: 1;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.normativos-title-block {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 16px 24px;
}

.normativos-title-block h4 {
    margin: 0;
    color: #071b33;
    font-size: 1.2em;
    font-weight: 700;
}

.normativos-viewer-header {
    background: linear-gradient(135deg, #071b33 0%, #0a2240 100%);
    padding: 12px 25px;
    color: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

.normativos-actions {
    display: flex;
    gap: 10px;
}

.btn-action {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-action:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-action:active {
    transform: translateY(0);
}

.normativos-iframe-container {
    padding: 0;
    height: calc(100% - 80px);
    min-height: 600px;
}

#pdf-viewer {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    background: #ffffff;
}

.normativos-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666666;
    font-size: 1.1em;
    text-align: center;
}

/* Placeholder quando não há normativos */
.normativos-placeholder {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid #e0e0e0;
}

.normativos-placeholder h3 {
    color: #1976d2;
    font-size: 1.5em;
    margin-bottom: 15px;
}

.normativos-placeholder p {
    color: #666666;
    font-size: 1.1em;
    line-height: 1.5;
}

/* Responsividade */
@media (max-width: 1200px) {
    .normativos-sidebar {
        flex: 0 0 300px;
    }
}

@media (max-width: 968px) {
    .normativos-menu-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .normativos-sidebar {
        flex: none;
        order: 2;
    }
    
    .normativos-viewer {
        order: 1;
    }
    
    .normativos-viewer-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .normativos-actions {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .normativos-content-container {
        padding: 20px 15px;
    }
    
    .normativos-sidebar {
        padding: 20px;
    }
    
    .normativo-item {
        padding: 12px;
    }
    
    .normativo-nome {
        font-size: 0.9em;
    }
    
    .normativos-iframe-container {
        padding: 15px;
        min-height: 500px;
    }
    
    #pdf-viewer {
        height: 500px;
    }
}

@media (max-width: 480px) {
    .normativos-viewer-header h4 {
        font-size: 1em;
    }
    
    .btn-action {
        padding: 6px 12px;
        font-size: 0.8em;
    }
    
    .normativos-iframe-container {
        min-height: 400px;
    }
    
    #pdf-viewer {
        height: 400px;
    }
}

/* Fim dos estilos para normativos */

/* Procedimentos */

#procedimentosWrapper {
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
}

#procedimentosBanner {
    width: 100%;
    height: 300px;
    background-image: url('/img/procedimentos/banner.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#procedimentosBannerOverlay {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 60px;
}

#procedimentosBannerTextoContainer {
    color: white;
}

.procedimentosWelcomeTextWrapper {
    display: inline-block;
    margin: 0px 0px 20px 0px;
}

.procedimentosWelcomeText {
    font-size: 36px;
    font-weight: bold;
    color: white;
    display: inline-block;
}

.procedimentosBarraDourada {
    height: 10px;
    background-color: #ccb178;
    margin-top: 10px;
    width: 100%;
}

.procedimentosSubtitleText {
    font-size: 18px;
    font-weight: 400;
    color: #f1f1f1;
}

.procedimentos-content-container {
    max-width: 1200px;
    margin: 60px auto 40px auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.procedimentos-menu-container {
    display: flex;
    gap: 30px;
    min-height: 700px;
}

/* Sidebar com lista de procedimentos */
.procedimentos-sidebar {
    flex: 0 0 350px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
}

.procedimentos-sidebar h3 {
    color: #071b33;
    font-size: 1.3em;
    margin: 0;
    text-align: left;
}

.procedimentos-sidebar-header {
    display: block;
    margin-bottom: 18px;
    border-bottom: 2px solid #071b33;
    padding-bottom: 10px;
}

.procedimentos-actions .btn-action.btn-action-dark {
    background: #d4b268;
    border-color: #d4b268;
    color: #071b33;
}

.procedimentos-actions .btn-action.btn-action-dark:hover {
    background: #c7a34f;
    border-color: #c7a34f;
}

.procedimentos-add-btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 14px;
    padding: 10px 12px;
    font-size: 0.9em;
}

.procedimentos-list-empty {
    text-align: center;
    font-size: 0.95em;
    color: #4b5563;
    padding: 18px 10px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
}

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

.procedimento-item {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    background: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
    border: 1px solid #e0e0e0;
}

.procedimento-item:hover {
    background: #f0f7ff;
    border-left-color: #071b33;
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(7, 27, 51, 0.2);
}

.procedimento-item.active {
    background: #e3f2fd;
    border-left-color: #071b33;
    box-shadow: 0 2px 8px rgba(7, 27, 51, 0.3);
}

.procedimento-icon {
    font-size: 0.75em;
    margin-right: 12px;
    flex-shrink: 0;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.6px;
    background: #071b33;
    border-radius: 4px;
    min-width: 34px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.procedimento-nome {
    color: #333333;
    font-size: 0.95em;
    line-height: 1.3;
    font-weight: 500;
}

.procedimento-item.active .procedimento-nome {
    color: #071b33;
    font-weight: 600;
}

/* Área de visualização do PDF */
.procedimentos-viewer {
    flex: 1;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.procedimentos-title-block {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 16px 24px;
}

.procedimentos-title-block h4 {
    margin: 0;
    color: #071b33;
    font-size: 1.2em;
    font-weight: 700;
}

.procedimentos-viewer-header {
    background: linear-gradient(135deg, #071b33 0%, #0a2240 100%);
    padding: 12px 25px;
    color: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

.procedimentos-actions {
    display: flex;
    gap: 10px;
}

.procedimentos-iframe-container {
    padding: 0;
    height: calc(100% - 80px);
    min-height: 600px;
}

#procedimentos-pdf-viewer {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    background: #ffffff;
}

.procedimentos-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666666;
    font-size: 1.1em;
    text-align: center;
}

/* Placeholder quando não há procedimentos */
.procedimentos-placeholder {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid #e0e0e0;
}

.procedimentos-placeholder h3 {
    color: #1976d2;
    font-size: 1.5em;
    margin-bottom: 15px;
}

.procedimentos-placeholder p {
    color: #666666;
    font-size: 1.1em;
    line-height: 1.5;
}

/* Responsividade */
@media (max-width: 1200px) {
    .procedimentos-sidebar {
        flex: 0 0 300px;
    }
}

@media (max-width: 968px) {
    .procedimentos-menu-container {
        flex-direction: column;
        gap: 20px;
    }

    .procedimentos-sidebar {
        flex: none;
        order: 2;
    }

    .procedimentos-viewer {
        order: 1;
    }

    .procedimentos-viewer-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .procedimentos-actions {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .procedimentos-content-container {
        padding: 20px 15px;
    }

    .procedimentos-sidebar {
        padding: 20px;
    }

    .procedimento-item {
        padding: 12px;
    }

    .procedimento-nome {
        font-size: 0.9em;
    }

    .procedimentos-iframe-container {
        padding: 15px;
        min-height: 500px;
    }

    #procedimentos-pdf-viewer {
        height: 500px;
    }
}

@media (max-width: 480px) {
    .procedimentos-viewer-header h4 {
        font-size: 1em;
    }

    .btn-action {
        padding: 6px 12px;
        font-size: 0.8em;
    }

    .procedimentos-iframe-container {
        min-height: 400px;
    }

    #procedimentos-pdf-viewer {
        height: 400px;
    }
}

/* Fim dos estilos para procedimentos */

/* Wrapper principal */
#formulariosWrapper {
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
}

/* ============================================
   BANNER
   ============================================ */
#formulariosBanner {
    width: 100%;
    height: 300px;
    background-image: url('/img/formularios/banner.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#formulariosBannerOverlay {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 60px;
}

#formulariosBannerTextoContainer {
    color: white;
}

.formulariosWelcomeTextWrapper {
    display: inline-block;
    margin: 0px 0px 20px 0px;
}

.formulariosWelcomeText {
    font-size: 36px;
    font-weight: bold;
    color: white;
    display: inline-block;
}

.formulariosBarraDourada {
    height: 10px;
    background-color: #ccb178;
    margin-top: 10px;
    width: 100%;
}

.formulariosSubtitleText {
    font-size: 18px;
    font-weight: 400;
    color: #f1f1f1;
}

/* ============================================
   CONTAINER PRINCIPAL (espelhando normativos)
   ============================================ */
.formularios-content-container {
    max-width: 1200px;
    margin: 60px auto 40px auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.formularios-menu-container {
    display: flex;
    gap: 30px;
    min-height: 700px;
}

/*SIDEBAR */
.formularios-sidebar {
    flex: 0 0 350px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
}

.formularios-sidebar-header {
    display: block;
    margin-bottom: 18px;
    border-bottom: 2px solid #071b33;
    padding-bottom: 10px;
}

.formularios-sidebar-header h3 {
    color: #071b33;
    font-size: 1.3em;
    margin: 0;
    text-align: left;
}

/* Botão adicionar */
.formularios-actions .btn-action.btn-action-dark,
.formularios-add-btn.btn-action.btn-action-dark {
    background: #071b33;
    border-color: #071b33;
    color: #ffffff;
}

.formularios-actions .btn-action.btn-action-dark:hover,
.formularios-add-btn.btn-action.btn-action-dark:hover {
    background: #0a2240;
    border-color: #0a2240;
}

.formularios-add-btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 14px;
    padding: 10px 12px;
    font-size: 0.9em;
}

/* Lista vazia */
.formularios-list-empty {
    text-align: center;
    font-size: 0.95em;
    color: #4b5563;
    padding: 18px 10px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
}

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

/*ITENS DA LISTA */
.formulario-item {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    background: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
    border: 1px solid #e0e0e0;
}

.formulario-item:hover {
    background: #f0f7ff;
    border-left-color: #071b33;
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(7, 27, 51, 0.2);
}

.formulario-item.active {
    background: #e3f2fd;
    border-left-color: #071b33;
    box-shadow: 0 2px 8px rgba(7, 27, 51, 0.3);
}

.formulario-icon {
    font-size: 0.75em;
    margin-right: 12px;
    flex-shrink: 0;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.6px;
    background: #071b33;
    border-radius: 4px;
    min-width: 40px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.formulario-nome {
    color: #333333;
    font-size: 0.95em;
    line-height: 1.3;
    font-weight: 500;
}

.formulario-item.active .formulario-nome {
    color: #071b33;
    font-weight: 600;
}

/* VIEWER (estrutura idêntica a normativos)*/
.formularios-viewer {
    flex: 1;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.formularios-title-block {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 16px 24px;
}

.formularios-title-block h4 {
    margin: 0;
    color: #071b33;
    font-size: 1.2em;
    font-weight: 700;
}

.formularios-viewer-header {
    background: linear-gradient(135deg, #071b33 0%, #0a2240 100%);
    padding: 12px 25px;
    color: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

/* Container dos botões de ação */
.formularios-actions {
    display: flex;
    gap: 10px;
}

/* Botões de ação (herdam .btn-action do normativos) */
/* Apenas garantimos que os botões dentro de .formularios-actions tenham o estilo correto */
.formularios-actions .btn-action {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.formularios-actions .btn-action:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.formularios-actions .btn-action-danger {
    background: #b42318;
    border-color: #b42318;
    color: #fff;
}

.formularios-actions .btn-action-danger:hover {
    background: #912018;
    border-color: #912018;
}

/*IFRAME CONTAINER*/
.formularios-iframe-container {
    padding: 0;
    height: calc(100% - 80px);
    min-height: 600px;
}

#html-viewer {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    background: #ffffff;
}

.formularios-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666666;
    font-size: 1.1em;
    text-align: center;
}

/* Placeholder */
.formularios-placeholder {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid #e0e0e0;
}

.formularios-placeholder h3 {
    color: #1976d2;
    font-size: 1.5em;
    margin-bottom: 15px;
}

.formularios-placeholder p {
    color: #666666;
    font-size: 1.1em;
    line-height: 1.5;
}

/* RESPONSIVIDADE */
@media (max-width: 1200px) {
    .formularios-sidebar {
        flex: 0 0 300px;
    }
}

@media (max-width: 968px) {
    .formularios-menu-container {
        flex-direction: column;
        gap: 20px;
    }

    .formularios-sidebar {
        flex: none;
        order: 2;
    }

    .formularios-viewer {
        order: 1;
    }

    .formularios-viewer-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .formularios-actions {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .formularios-content-container {
        padding: 20px 15px;
    }

    .formularios-sidebar {
        padding: 20px;
    }

    .formulario-item {
        padding: 12px;
    }

    .formulario-nome {
        font-size: 0.9em;
    }

    .formularios-iframe-container {
        padding: 15px;
        min-height: 500px;
    }

    #html-viewer {
        height: 500px;
    }
}

@media (max-width: 480px) {
    .formularios-title-block h4 {
        font-size: 1em;
    }

    .formularios-actions .btn-action {
        padding: 6px 12px;
        font-size: 0.8em;
    }

    .formularios-iframe-container {
        min-height: 400px;
    }

    #html-viewer {
        height: 400px;
    }
}

/* Fim dos Formulários */



/* OKR Notification Styles */
.okrNotification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 5px;
    color: #ffffff;
    font-weight: 600;
    z-index: 10000;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    max-width: 300px;
    word-wrap: break-word;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.okrNotificationShow {
    opacity: 1;
    transform: translateX(0);
}

.okrNotificationSuccess { background-color: #28a745; }
.okrNotificationError { background-color: #dc3545; }
.okrNotificationInfo { background-color: #17a2b8; }
.okrNotificationWarning { background-color: #ffc107; color: #212529; }

@media (max-width: 768px) {
    .okrNotification {
        left: 10px;
        right: 10px;
        top: 10px;
    }
}

/* Transição suave ao trocar de notícia na Home */
#noticiaContainer {
    transition: opacity 0.65s ease, transform 0.65s ease;
    will-change: opacity, transform;
}

#noticiaContainer.fade-out {
    opacity: 0;
    transform: translateY(6px);
}

#noticiaContainer.fade-in {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    #noticiaContainer {
        transition: none;
    }
}
#rhWrapper {
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
}

#rhBanner {
    width: 100%;
    height: 300px;
    background-image: url('/img/rh/banner.jpg'), url('/img/home/banner.jpg');
    background-size: cover;
    background-position: center;
    background-color: #071B33;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#rhBannerOverlay {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 60px;
}

#rhBannerTextoContainer {
    color: white;
}

#okr2026Wrapper {
    padding: 0;
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
}

#okr2026Banner {
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, #071b33 0%, #0d2744 100%);
    display: flex;
    align-items: center;
}

#okr2026BannerOverlay {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 60px;
    background: linear-gradient(90deg, rgba(7, 27, 51, 0.9) 0%, rgba(7, 27, 51, 0.65) 100%);
}

#okr2026BannerTextoContainer {
    color: #ffffff;
}

.okr2026WelcomeTextWrapper {
    display: inline-block;
    margin: 0 0 20px 0;
}

.okr2026WelcomeText {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 1px;
}

.okr2026BarraDourada {
    height: 8px;
    margin-top: 10px;
    background: #ccb178;
}

.okr2026SubtitleText {
    font-size: 18px;
    color: #f3f4f6;
}

.okr2026-content-container {
    max-width: 1180px;
    margin: 45px auto;
    padding: 20px;
}

.okr2026DashboardCard,
.okr2026DepartmentCard {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(7, 27, 51, 0.08);
    margin-bottom: 18px;
}

.okr2026DepartmentCard {
    padding: 20px;
}

.okr2026DepartmentCard h3 {
    margin: 0 0 14px 0;
    font-size: 20px;
    color: #111827;
}

.okr2026DepartmentCard h3 span {
    color: #0d2744;
}

.okr2026ProgramInfo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.okr2026ProgramBadge {
    background: #071b33;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 16px;
}

.okr2026ProgramHint {
    font-size: 13px;
    color: #4b5563;
}

.okr2026PeriodSelector {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}

.okr2026SelectPeriod {
    min-width: 210px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 9px 10px;
}

.okr2026CardHeader {
    padding: 16px 20px;
    border-bottom: 1px solid #eef2f7;
}

.okr2026CardHeader h3 {
    margin: 0;
    color: #111827;
    font-size: 19px;
}

.okr2026CardContent {
    padding: 18px 20px;
}

.okr2026StatsGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 12px;
}

.okr2026StatItem {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    text-align: center;
    padding: 14px 10px;
}

.okr2026StatNumber {
    font-size: 26px;
    font-weight: 700;
    color: #0d2744;
}

.okr2026StatLabel {
    font-size: 12px;
    color: #6b7280;
}

.okr2026QuarterGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
}

.okr2026QuarterItem {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fcfcfd;
    padding: 12px;
}

.okr2026QuarterTitle {
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.okr2026QuarterMetric {
    font-size: 13px;
    color: #374151;
    margin-bottom: 3px;
}

.okr2026ObjectiveItem {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 15px;
    background: #ffffff;
}

.okr2026ObjectiveHeader {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px;
}

.okr2026ObjectiveTitle {
    margin: 0;
    font-size: 18px;
    color: #111827;
}

.okr2026StatusBadge {
    background: #e5e7eb;
    border-radius: 14px;
    padding: 4px 10px;
    font-weight: 700;
    color: #1f2937;
    font-size: 12px;
}

.okr2026ObjectiveMeta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 8px;
    color: #6b7280;
    font-size: 13px;
}

.okr2026ObjectiveDescription {
    color: #4b5563;
    font-size: 14px;
    margin-bottom: 10px;
}

.okr2026ProgressLabel {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #374151;
    margin-bottom: 5px;
}

.okr2026ProgressBar {
    width: 100%;
    height: 10px;
    border-radius: 8px;
    background: #e5e7eb;
    overflow: hidden;
    margin-bottom: 12px;
}

.okr2026ProgressFill {
    height: 100%;
    background: linear-gradient(90deg, #0d2744 0%, #ccb178 100%);
}

.okr2026ProgressBarSmall {
    height: 8px;
    margin: 6px 0 0 0;
}

.okr2026KeyResultItem {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    padding: 11px;
    margin-top: 9px;
}

.okr2026KeyResultHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.okr2026KeyResultTitle {
    margin: 0;
    font-size: 14px;
    color: #111827;
}

.okr2026KeyResultActions {
    display: flex;
    gap: 6px;
}

.okr2026BtnUpdateProgress,
.okr2026BtnDetails,
.okr2026BtnPrimary,
.okr2026BtnSecondary {
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    padding: 7px 10px;
}

.okr2026BtnUpdateProgress,
.okr2026BtnPrimary {
    background: #0d2744;
    color: #ffffff;
}

.okr2026BtnSecondary {
    background: #e5e7eb;
    color: #111827;
}

.okr2026BtnDetails {
    background: #dbeafe;
    color: #1d4ed8;
}

.okr2026KeyResultDescription {
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 7px;
}

.okr2026KeyResultProgress,
.okr2026KeyResultDeadline {
    font-size: 12px;
    color: #374151;
}

.okr2026Loading,
.okr2026EmptyState {
    text-align: center;
    color: #6b7280;
    padding: 28px 12px;
}

.okr2026EmptyIcon {
    font-size: 40px;
    margin-bottom: 6px;
}

.okr2026EmptyHint {
    opacity: 0.7;
    margin: 0;
}

.okr2026EmptyKeyResults {
    margin: 4px 0;
    color: #6b7280;
    font-size: 13px;
}

.okr2026Modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.okr2026ModalContent {
    width: min(620px, 92vw);
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
}

.okr2026ModalHeader,
.okr2026ModalBody,
.okr2026ModalFooter {
    padding: 16px 18px;
}

.okr2026ModalHeader {
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.okr2026ModalClose {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 24px;
    color: #6b7280;
}

.okr2026FormGroup {
    margin-bottom: 12px;
}

.okr2026FormGroup label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    color: #374151;
}

.okr2026FormGroup input,
.okr2026FormGroup textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 9px;
    font-size: 14px;
}

.okr2026FormRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.okr2026ModalFooter {
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.okr2026ObservationsContent {
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 8px;
    padding: 12px;
    min-height: 70px;
    white-space: pre-wrap;
}

@media (max-width: 900px) {
    .okr2026StatsGrid,
    .okr2026QuarterGrid {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}

@media (max-width: 768px) {
    #okr2026BannerOverlay {
        padding-left: 20px;
        padding-right: 20px;
    }

    .okr2026WelcomeText {
        font-size: 30px;
    }

    .okr2026-content-container {
        margin: 20px auto;
        padding: 12px;
    }

    .okr2026PeriodSelector {
        flex-direction: column;
        align-items: flex-start;
    }

    .okr2026FormRow {
        grid-template-columns: 1fr;
    }
}