/**
    ===============================================================================
    Manual de marca Renova (revisado por legibilidade)
    - Borba Sans: titulos e demarcacao de capitulo (CAIXA ALTA)
    - IBM Plex Sans: todo o texto corrido, botoes, menu, formularios e dados
    - Somente cores da paleta do manual
    - Cantos arredondados em imagens e elementos graficos, sem efeitos
    ===============================================================================
*/

/*
    Arquivos da Borba Sans (fonte licenciada, MyFonts) devem ficar em fonts/borba_sans/.
    Enquanto eles nao existirem, os titulos caem para a IBM Plex Sans.
*/
@font-face {
	font-family: 'Borba Sans';
	src: url(../fonts/borba_sans/BorbaSans-Regular.woff2) format('woff2'),
		url(../fonts/borba_sans/BorbaSans-Regular.otf) format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Borba Sans';
	src: url(../fonts/borba_sans/BorbaSans-Bold.woff2) format('woff2'),
		url(../fonts/borba_sans/BorbaSans-Bold.otf) format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Cores principais */
	--renova-azul-escuro: #003c78;
	--renova-azul: #005aa0;
	--renova-azul-medio: #0a7dc8;
	--renova-cinza: #94a2aa;
	--renova-branco: #ffffff;
	--renova-preto: #000000;

	/* Cores secundarias usadas no site */
	--renova-azul-claro: #d3e3f4;
	--renova-fundo: #ebf0f5;
	--renova-alerta: #fba200;
	--renova-erro: #ff4400;
	--renova-sucesso: #369742;

	--fonte-titulo: 'Borba Sans', 'IBM Plex Sans', sans-serif;
	--fonte-texto: 'IBM Plex Sans', sans-serif;

	--raio-imagem: 35px;
	--raio-botao: 14px;
	--raio-campo: 10px;
}

/**
    ===============================================================================
    Base
    ===============================================================================
*/
* {
	font-family: var(--fonte-texto);
}

body {
	background-color: var(--renova-fundo);
	color: var(--renova-preto);
	font-size: 17px;
	line-height: 1.55;
}

a {
	color: var(--renova-azul);
	text-decoration: underline;
	font-weight: 700;
}

a:hover,
a:focus {
	color: var(--renova-azul-escuro);
	cursor: pointer;
}

/* Titulos e perguntas: azul escuro, negrito, nunca em CAIXA ALTA */
h3,
h4 {
	color: var(--renova-azul-escuro);
	font-family: var(--fonte-titulo);
	font-weight: 700;
	text-transform: none;
}

h3 *,
h4 * {
	font-family: inherit;
}

h3 {
	font-size: 1.75rem;
	line-height: 1.2;
	padding: 40px 0 12px 0;
}

h4 {
	font-size: 1.15rem;
	height: auto;
	padding-top: 1.5em;
}

/* Demarcacao de capitulo: sempre em CAIXA ALTA */
fieldset h3 {
	color: var(--renova-azul);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--renova-azul-claro);
	padding: 32px 0 8px 0;
	margin: 0 0 20px 0;
}

fieldset {
	margin-bottom: 20px;
}

fieldset div {
	margin: 0;
}

p,
div#complainantFields div,
fieldset div {
	margin: 0 0 0 0;
}

.required-mark {
	color: var(--renova-erro);
}

#validMailPhone {
	color: var(--renova-azul);
	font-size: 15px;
	margin: 12px 0 8px 0;
}

/**
    ===============================================================================
    Cabecalho
    ===============================================================================
*/
.bg-light {
	background-color: var(--renova-branco) !important;
}

.navbar {
	padding-top: 16px;
	padding-bottom: 16px;
}

/* Altura fixa para o novo logo encaixar independente do tamanho do arquivo */
.navbar-brand img {
	height: 48px;
	width: auto;
}

li.nav-item {
	padding: 10px 0;
}

.nav-link {
	color: var(--renova-azul) !important;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.06em;
	padding: 0 12px;
	text-transform: uppercase;
	text-decoration: none;
}

.nav-link:hover,
.nav-link:focus {
	color: var(--renova-azul-escuro) !important;
	text-decoration: none;
}

/**
    ===============================================================================
    Conteudo
    ===============================================================================
*/
.main {
	background-color: var(--renova-branco);
	border-radius: var(--raio-imagem);
	margin: 32px auto 48px;
	max-width: 1140px;
	padding: 40px 48px 56px;
	width: calc(100% - 32px);
}

@media (max-width: 767.98px) {
	:root {
		--raio-imagem: 20px;
	}

	.main {
		margin: 16px auto 32px;
		padding: 24px 20px 40px;
	}

	/*
	    Texto justificado abre buracos entre as palavras em telas estreitas.
	    !important porque os textos das mensagens trazem text-align inline.
	*/
	.main p {
		text-align: left !important;
	}
}

.image-container {
	width: 100%;
	height: 0;
	padding-top: 30%;
	background-color: var(--renova-azul-claro);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	border-radius: var(--raio-imagem);
}

.image-container.initial-page-image {
	background-image: url(../images/initial-page.jpg);
}

.image-container.participation-term-page-image {
	background-image: url(../images/particiation-term-page.jpg);
}

.image-container.identification-page-image {
	background-image: url(../images/identification-page.jpg);
}

.image-container.report-page-image {
	background-image: url(../images/telefonista.jpg);
}

/* Banner da pagina inicial, inspirado na capa do manual de marca */
.hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	align-items: center;
	gap: 32px;
	min-height: 360px;
	padding: 56px 48px;
	overflow: hidden;
	border-radius: var(--raio-imagem);
	background-color: var(--renova-azul-escuro);
	background-image: linear-gradient(160deg, var(--renova-azul) 0%, var(--renova-azul-escuro) 100%);
}

/* Faixa de rede no topo, vazando pela borda como na capa do manual */
.hero__network {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	fill: none;
	stroke: var(--renova-azul-medio);
	stroke-width: 1;
	pointer-events: none;
}

.hero__network circle {
	fill: var(--renova-azul-medio);
	stroke: none;
}

.hero__content {
	position: relative;
}

.hero__eyebrow {
	color: var(--renova-azul-claro);
	font-family: var(--fonte-titulo);
	font-size: 14px;
	letter-spacing: 0.12em;
	margin: 0 0 12px 0;
	text-align: left;
	text-transform: uppercase;
}

.hero__title {
	color: var(--renova-branco);
	font-family: var(--fonte-titulo);
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	font-weight: 700;
	line-height: 1.05;
	margin: 0 0 16px 0;
}

.hero__text {
	color: var(--renova-azul-claro);
	font-size: 18px;
	line-height: 1.5;
	margin: 0 0 28px 0;
	max-width: 32em;
	text-align: left;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hero__actions .button {
	margin: 0;
	padding: 12px 24px;
}

.hero .button:focus-visible {
	outline-color: var(--renova-branco);
}

.hero__illustration {
	position: relative;
	justify-self: end;
	width: 100%;
	max-width: 440px;
	fill: none;
	stroke: var(--renova-azul-claro);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hero__illustration-back {
	stroke: var(--renova-azul-medio);
}

@media (max-width: 991.98px) {
	.hero {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.hero__illustration {
		display: none;
	}
}

@media (max-width: 575.98px) {
	.hero {
		padding: 32px 20px;
	}

	/* block em vez de inline-flex para a seta seguir o texto quando ele quebra */
	.hero__actions .button {
		display: block;
		width: 100%;
		padding: 12px 16px;
		text-align: center;
	}
}

.inital-page-section {
	border-bottom: 1px solid var(--renova-azul-claro);
	padding: 32px 0;
}

.inital-page-section h3 {
	padding: 0 0 12px 0;
}

/* Numero de protocolo: e um dado que o denunciante precisa copiar, por isso IBM Plex */
#newProtocol .incidentProtocol {
	color: var(--renova-azul-escuro);
	font-family: var(--fonte-texto);
	font-size: 2.5rem;
	padding: 24px 0;
}

.map img {
	width: 30%;
}

.confidential {
	width: 286px;
}

/**
    ===============================================================================
    Botoes
    ===============================================================================
*/
button:focus,
.button:focus,
button:active,
.button:active {
	outline: none;
	box-shadow: none;
}

.button:focus-visible {
	outline: 2px solid var(--renova-azul-medio);
	outline-offset: 2px;
}

.dxButtons {
	margin-top: 32px;
	margin-bottom: 32px;
}

/* Padrao (secundario): fundo branco com borda azul */
.button,
.button--secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 220px;
	min-height: 48px;
	height: auto;
	margin: 6px 12px 6px 0;
	padding: 12px 28px;
	background-color: var(--renova-branco);
	border: 1px solid var(--renova-azul-escuro);
	border-radius: var(--raio-botao);
	color: var(--renova-azul-escuro);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.button *,
.button--secondary * {
	color: inherit;
	letter-spacing: inherit;
}

.button:hover,
.button--secondary:hover {
	background-color: var(--renova-fundo);
}

/* Principal: fundo azul escuro */
#incidentStatusDiv fieldset ul li label.button--primary,
label.button--primary,
.button--primary {
	min-width: 220px;
	height: auto;
	margin: 6px 12px 6px 0;
	background-color: var(--renova-azul-escuro);
	border: 1px solid var(--renova-azul-escuro);
	border-radius: var(--raio-botao);
	color: var(--renova-branco);
}

#incidentStatusDiv fieldset ul li label.button--primary.primary-hover:hover,
.button--primary:hover,
.primary-hover:hover {
	background-color: var(--renova-azul);
	border-color: var(--renova-azul);
}

.button--primary:active {
	box-shadow: none;
}

/* Indisponivel */
.button:disabled,
.button--primary:disabled {
	background-color: var(--renova-cinza);
	border-color: var(--renova-cinza);
	color: var(--renova-branco);
	cursor: not-allowed;
}

/* Botoes de avanco, como "Continuar ->" do manual */
.button--arrow::after {
	content: "\2192";
	margin-left: 8px;
}

/* Variantes para fundo azul (banner) */
.button--light {
	background-color: var(--renova-branco);
	border-color: var(--renova-branco);
	color: var(--renova-azul-escuro);
}

.button--light:hover {
	background-color: var(--renova-azul-claro);
	border-color: var(--renova-azul-claro);
}

.button--outline-light {
	background-color: transparent;
	border-color: var(--renova-branco);
	color: var(--renova-branco);
}

.button--outline-light:hover {
	background-color: var(--renova-azul);
}

/* Anexar arquivo: botao secundario */
#incidentCreationDiv #labeattach,
#incidentStatusDiv #labeattach,
#labeattach {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	background-color: var(--renova-branco);
	border: 1px solid var(--renova-azul-escuro);
	color: var(--renova-azul-escuro);
	font-size: 16px;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

#incidentCreationDiv #labeattach:hover,
#incidentStatusDiv #labeattach:hover,
#labeattach:hover {
	background-color: var(--renova-fundo);
}

#labeattach span {
	color: inherit;
	line-height: 1.2;
	padding: 0;
}

@media (max-width: 575.98px) {
	.dxButtons .button {
		width: 100%;
		margin-right: 0;
	}
}

/**
    ===============================================================================
    Formularios
    ===============================================================================
*/
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select {
	min-height: 48px;
	padding: 12px 16px;
	background-color: var(--renova-branco);
	border: 1px solid var(--renova-azul-escuro);
	border-radius: var(--raio-campo);
	color: var(--renova-azul-escuro);
	font-size: 16px;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
	border: 1px solid var(--renova-azul);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	background-color: var(--renova-branco);
	border: 1px solid var(--renova-azul-escuro);
	box-shadow: 0 0 0 1px var(--renova-azul-escuro);
	outline: none;
}

input::placeholder,
textarea::placeholder {
	color: var(--renova-cinza);
	opacity: 1;
}

input[type="radio"],
input[type="checkbox"] {
	accent-color: var(--renova-azul-escuro);
}

/* Rotulos dos campos: CAIXA ALTA, como no design system */
#incidentCreationDiv label,
#complainantFields label,
#anonymousEmailDiv label,
#supplementaryInformationFormDiv form label,
#searchIncidentStatusDiv .protocolField label {
	color: var(--renova-azul);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.06em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

div#complainantFields > div,
div#anonymousEmailDiv {
	margin-bottom: 16px;
}

#incidentCreationDiv .form-container {
	border-bottom: 1px solid var(--renova-azul-claro);
}

fieldset div.form-item {
	margin-bottom: 20px;
}

fieldset div.form-item textarea {
	display: inline-block;
	width: 100%;
}

fieldset div.form-item input {
	display: block;
	width: 100%;
	max-width: 480px;
}

#related {
	width: auto;
}

#incidentCode {
	margin: 15px 0;
}

.identification-option-container * {
	display: inline-block;
	color: var(--renova-azul-escuro);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 16px;
}

.identification-option-container > * {
	margin-right: 30px;
}

.identification-option-container > *:hover {
	cursor: pointer;
}

.identification-option-container input {
	margin-right: 8px;
}

/**
    ===============================================================================
    Acompanhar denuncia
    ===============================================================================
*/
#incidentStatusDiv h3 {
	padding: 40px 0 12px 0;
}

#incidentStatusDiv fieldset h3 {
	padding: 32px 0 8px 0;
}

.incident-status-info li {
	margin: 0 0 16px 0;
}

#incidentStatusDiv .incident-status-info label {
	display: block;
	background: none;
	color: var(--renova-azul);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.4;
	padding: 0;
	text-transform: uppercase;
}

.incident-status-info span {
	color: var(--renova-preto);
	font-size: 16px;
	line-height: 1.5;
	padding: 0;
}

table#incidentAuditTable {
	border: 1px solid var(--renova-azul-claro);
	border-collapse: separate;
	border-radius: var(--raio-campo);
	border-spacing: 0;
	overflow: hidden;
}

table#incidentAuditTable td,
table#incidentAuditTable th {
	padding: 12px 16px;
}

table#incidentAuditTable th {
	background: var(--renova-azul-escuro);
	color: var(--renova-branco);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

table#incidentAuditTable tr:nth-child(2n+1),
table#incidentAuditTable tr.odd {
	background: var(--renova-fundo);
}

/**
    ===============================================================================
    Termo de aceite (switch)
    ===============================================================================
*/
.switch {
	display: flex;
	align-items: center;
	cursor: pointer;
	margin-top: 2%;
}

.switch .switch-text {
	padding-left: 1rem;
	font-weight: 700;
}

.switch .switch-wrapper {
	display: inline-block;
	min-width: 60px;
	height: 34px;
	position: relative;
}

.switch .switch-wrapper .switch-button {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 40px;
	background: var(--renova-azul-claro);
}

.switch .switch-wrapper input {
	opacity: 0;
	width: 0;
	height: 0;
}

.switch .switch-wrapper input:focus-visible + .switch-button {
	outline: 2px solid var(--renova-azul-medio);
	outline-offset: 2px;
}

.switch .switch-wrapper .switch-button::before {
	content: "";
	min-width: 26px;
	height: 26px;
	position: absolute;
	left: 4px;
	bottom: 4px;
	border-radius: 50%;
	transition: .4s all ease;
	background: var(--renova-branco);
}

.switch .switch-wrapper input:checked + .switch-button {
	background-color: var(--renova-azul-escuro);
}

.switch .switch-wrapper input:checked + .switch-button::before {
	transform: translateX(26px);
	content: "\f00c";
	font-family: FontAwesome;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--renova-azul-escuro);
	font-weight: bold;
}

.some {
	display: none;
}

/**
    ===============================================================================
    Rodape
    ===============================================================================
*/
.background-1 {
	background-color: var(--renova-azul-escuro);
	color: var(--renova-branco);
}

div.footer {
	background-color: var(--renova-azul-escuro);
	color: var(--renova-branco);
	font-size: 14px;
	letter-spacing: 0.04em;
	min-height: 64px;
	padding: 20px 16px;
	position: relative;
	bottom: 0px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.color,
.color > strong {
	color: var(--renova-branco);
}

.title-mapa {
	margin-bottom: 15px;
}

.title-mapa > strong {
	color: var(--renova-branco);
}

.footer table {
	padding-left: 8%;
}

.footer table tr td a {
	float: left;
}

.footer table tr td div {
	float: right;
	margin: 0 10px 0 10px;
}

/**
    ===============================================================================
    Carregando, anexos, avisos e dialogos
    ===============================================================================
*/
.overlay {
	background: var(--renova-azul-escuro);
	opacity: 0.6;
}

.fileUploadProgress {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 60, 120, 0.2);
	text-align: center;
}

.fileUploadProgress span {
	background-color: var(--renova-branco);
	padding: 20px;
	border-radius: var(--raio-campo);
	display: inline-block;
	vertical-align: middle;
	position: fixed;
	top: 50%;
	height: 20px;
	width: 350px;
	margin-top: -10px;
	margin-left: -175px;
	z-index: 10000;
	display: none;
}

#toast-container * {
	color: var(--renova-branco);
}

#toast-container button {
	min-width: 12px;
}

#toast-container > div,
#toast-container > :hover {
	border-radius: var(--raio-campo);
	box-shadow: none;
}

.toast-success {
	background-color: var(--renova-sucesso);
}

.toast-error {
	background-color: var(--renova-erro);
}

.toast-info {
	background-color: var(--renova-azul);
}

.toast-warning {
	background-color: var(--renova-alerta);
}

.vex.vex-theme-default .vex-overlay {
	background: rgba(0, 60, 120, 0.45);
}

.vex.vex-theme-default .vex-content {
	background: var(--renova-branco);
	border-radius: var(--raio-imagem);
	color: var(--renova-preto);
	font-family: var(--fonte-texto);
	padding: 32px;
}

.vex.vex-theme-default .vex-dialog-button {
	border: 1px solid var(--renova-azul-escuro);
	border-radius: var(--raio-botao);
	font-family: var(--fonte-texto);
	font-size: 15px;
	letter-spacing: 0.06em;
	padding: 14px 28px;
}

.vex.vex-theme-default .vex-dialog-button:focus {
	animation: none;
	outline: 2px solid var(--renova-azul-medio);
	outline-offset: 2px;
}

.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-primary {
	background: var(--renova-azul-escuro);
	color: var(--renova-branco);
}

.vex.vex-theme-default .vex-dialog-button.vex-dialog-button-secondary {
	background: var(--renova-branco);
	color: var(--renova-azul-escuro);
}