/**
 * Ouvidoria — estilos do recibo de envio e do acompanhamento.
 *
 * Usa os tokens do design system do child theme quando existem, com valor de
 * reserva ao lado: este CSS carrega no front-end e não pode depender de o
 * `style.css` do tema ter carregado antes.
 *
 * @package faac-ouvidoria
 */

.faac-ouv-recibo:focus-visible {
	outline: 2px solid #213449;
	outline-offset: 3px;
}

.faac-ouv-recibo {
	border: 1px solid #c8d6e2;
	border-left: 4px solid #213449;
	border-radius: 12px;
	background: #f6f9fb;
	padding: clamp(20px, 4vw, 30px);
	margin: 8px 0;
	outline: none;
}

.faac-ouv-recibo h3 {
	margin: 0 0 14px;
	font-size: clamp(1.1rem, 2.4vw, 1.35rem);
	color: #213449;
}

.faac-ouv-recibo-linha {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid #e2eaf1;
	font-size: 0.95rem;
}

.faac-ouv-recibo-linha span {
	color: #55636f;
}

.faac-ouv-recibo-rotulo {
	margin: 18px 0 6px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #55636f;
}

.faac-ouv-codigo {
	margin: 0 0 12px;
}

.faac-ouv-codigo code {
	display: block;
	padding: 14px 16px;
	background: #fff;
	border: 1px dashed #9fb3c4;
	border-radius: 8px;
	font-family: Consolas, Menlo, monospace;
	font-size: clamp(0.85rem, 2.6vw, 1rem);
	letter-spacing: 0.06em;
	color: #213449;
	/* O código tem 32 caracteres e precisa caber em tela de celular sem
	   estourar a largura da página. */
	word-break: break-all;
}

.faac-ouv-recibo-alerta {
	margin: 0 0 16px;
	font-size: 0.9rem;
	line-height: 1.6;
	color: #3a4a58;
}

.faac-ouv-recibo-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0;
}

.faac-ouv-copiar {
	appearance: none;
	border: 1px solid #213449;
	background: #213449;
	color: #fff;
	border-radius: 8px;
	padding: 10px 18px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.faac-ouv-copiar.faac-ouv-copiar:hover {
	background: #2c455e;
}

/* #213449 -> #2c455e dá ~1,2:1 entre os dois estados: como indicador de foco
   isso é invisível na prática (WCAG 1.4.11). O foco precisa de contorno. */
.faac-ouv-copiar:focus-visible {
	background: #2c455e;
	outline: 3px solid #213449;
	outline-offset: 2px;
}

/* ---- Acompanhamento ---- */

.faac-ouv-form-consulta p {
	margin: 0 0 16px;
}

.faac-ouv-form-consulta label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	color: #213449;
}

/* Padrão de formulário fechado em 18/08/2026 (child theme §2.10). A borda
   #9fb3c4 anterior dava 2,15:1 sobre branco — abaixo dos 3:1 de WCAG 1.4.11,
   e a borda é o que identifica o controle num fundo branco. 52px e 17px pelo
   mesmo motivo do resto do site: abaixo de 16px o Safari do iOS dá zoom ao
   focar. */
.faac-ouv-form-consulta input[type="text"] {
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	border: 1px solid #7B8FA5;
	border-radius: 5px;
	font: inherit;
	font-size: 17px;
	color: #16232F;
	background: #fff;
}

.faac-ouv-form-consulta input[type="text"]::placeholder {
	color: #5B6B7D;
	opacity: 1;
}

.faac-ouv-form-consulta input[type="text"]:hover {
	border-color: #5B6B7D;
}

/* Sem estado de foco visível não havia como saber onde o teclado estava
   (WCAG 2.4.7) — os campos não tinham :focus nenhum. */
.faac-ouv-form-consulta input[type="text"]:focus,
.faac-ouv-form-consulta input[type="text"]:focus-visible {
	border-color: #213449;
	box-shadow: 0 0 0 3px rgba(33, 52, 73, 0.25);
	outline: none;
}

.faac-ouv-form-consulta small {
	display: block;
	margin-top: 6px;
	font-size: 0.82rem;
	line-height: 1.5;
	color: #55636f;
}

.faac-ouv-form-consulta button[type="submit"] {
	appearance: none;
	border: 0;
	background: #213449;
	color: #fff;
	border-radius: 5px;
	padding: 13px 28px;
	min-height: 52px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.faac-ouv-form-consulta button[type="submit"]:hover {
	background: #2c455e;
}

.faac-ouv-form-consulta button[type="submit"]:focus-visible {
	outline: 3px solid #213449;
	outline-offset: 2px;
}

/* Isca de robô: fora da tela, e não apenas `display:none` — alguns robôs
   ignoram campo com display none justamente por saberem que é armadilha. */
.faac-ouv-isca {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.faac-ouv-erro {
	padding: 12px 14px;
	border-radius: 8px;
	background: #fdecec;
	border-left: 3px solid #b91c1c;
	color: #7f1d1d;
}

.faac-ouv-resultado {
	border: 1px solid #c8d6e2;
	border-radius: 12px;
	padding: clamp(20px, 4vw, 30px);
	background: #f6f9fb;
}

.faac-ouv-dados {
	display: grid;
	grid-template-columns: minmax(140px, auto) 1fr;
	gap: 6px 18px;
	margin: 0 0 20px;
}

.faac-ouv-dados dt {
	color: #55636f;
	font-size: 0.9rem;
}

.faac-ouv-dados dd {
	margin: 0;
	color: #1f2937;
}

.faac-ouv-resposta {
	padding: 14px 16px;
	background: #fff;
	border-left: 3px solid #213449;
	border-radius: 0 8px 8px 0;
	margin-bottom: 12px;
}

.faac-ouv-resposta-data {
	margin: 0 0 6px;
	font-size: 0.82rem;
	color: #55636f;
}

.faac-ouv-aviso {
	color: #55636f;
	font-size: 0.92rem;
}

@media (max-width: 480px) {
	.faac-ouv-recibo-linha {
		flex-direction: column;
		gap: 2px;
	}

	.faac-ouv-dados {
		grid-template-columns: 1fr;
	}

	.faac-ouv-dados dd {
		margin-bottom: 10px;
	}
}

/* ==========================================================================
   UI da página — reformulação de 18/08/2026

   Três das quatro correções abaixo existem porque o Elementor NÃO emite CSS de
   largura para container filho sem `content_width: full`. Medido: a coluna do
   número do fluxo rendia 611px em vez de 44px, e o campo do formulário rendia
   1276px para receber um e-mail. O gerador foi corrigido; o que está aqui é o
   que o Elementor não sabe montar — linha do tempo, marcador, preenchimento
   por scroll e paridade entre os dois botões da página.
   ========================================================================== */

/* ---- CTAs do hero -------------------------------------------------------- */

.faac-ouv-hero-acoes {
	margin-top: 12px;
}

.faac-ouv-cta .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 30px;
	border-radius: 5px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.faac-ouv-cta--primario .elementor-button {
	background-color: #213449;
	color: #fff;
	border: 1px solid #213449;
}

.faac-ouv-cta--primario .elementor-button:hover,
.faac-ouv-cta--primario .elementor-button:focus {
	background-color: #2c455e;
	border-color: #2c455e;
	color: #fff;
}

/* Secundário é contorno, não uma segunda cor cheia: duas ações de mesmo peso
   visual não são duas ações, são uma indecisão. */
.faac-ouv-cta--secundario .elementor-button {
	background-color: transparent;
	color: #213449;
	border: 1px solid #7B8FA5;
}

.faac-ouv-cta--secundario .elementor-button:hover,
.faac-ouv-cta--secundario .elementor-button:focus {
	background-color: #E9EEF2;
	border-color: #213449;
	color: #213449;
}

.faac-ouv-cta .elementor-button:focus-visible {
	outline: 3px solid #2861BD;
	outline-offset: 2px;
}

/* ---- Linha do tempo do fluxo -------------------------------------------- */

.faac-ouv-timeline {
	position: relative;
}

/* Trilho e preenchimento partem do CENTRO do primeiro marcador e terminam no
   centro do último (28px = metade do marcador de 56px) — senão a linha nasce e
   morre no vazio, acima do 1 e abaixo do 6. */
.faac-ouv-timeline::before,
.faac-ouv-timeline::after {
	content: "";
	position: absolute;
	left: 27px;
	top: 28px;
	width: 2px;
	border-radius: 2px;
}

.faac-ouv-timeline::before {
	height: calc(100% - 56px);
	background: #DCE4EC;
}

.faac-ouv-timeline::after {
	height: calc((100% - 56px) * var(--faac-ouv-progresso, 0));
	background: #2861BD;
	transition: height .12s linear;
}

.faac-ouv-passo {
	position: relative;
	padding-bottom: 30px;
}

.faac-ouv-passo:last-child {
	padding-bottom: 0;
}

.faac-ouv-passo > .faac-ouv-passo-num {
	flex: 0 0 56px !important;
	width: 56px !important;
	max-width: 56px !important;
}

.faac-ouv-passo > .faac-ouv-passo-txt {
	flex: 1 1 auto !important;
	width: auto !important;
	max-width: none !important;
	padding-top: 12px;
}

.faac-ouv-passo-num .elementor-heading-title {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0;
	border-radius: 50%;
	border: 2px solid #DCE4EC;
	background: #fff;
	color: #6B7280;
	font-variant-numeric: tabular-nums;
	transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* ⚠ Escopado ao NÚMERO. Sem o `.faac-ouv-passo-num` no meio, a regra pegava
   também o <h3> do título da etapa e pintava uma tarja azul de ponta a ponta
   atrás dele — e só nas etapas já alcançadas, o que fazia parecer defeito de
   renderização em vez de erro de seletor. */
.faac-ouv-passo.is-alcancado .faac-ouv-passo-num .elementor-heading-title {
	border-color: #2861BD;
	background: #2861BD;
	color: #fff;
}

/* Em seção com fundo alternado o marcador tem de acompanhar, senão ele vira um
   disco branco flutuando. */
.e-con[class*="faacsup"] .faac-ouv-passo-num .elementor-heading-title {
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.faac-ouv-timeline::after {
		height: calc(100% - 56px);
		transition: none;
	}
	.faac-ouv-passo-num .elementor-heading-title {
		transition: none;
	}
}

@media (max-width: 600px) {
	.faac-ouv-timeline::before,
	.faac-ouv-timeline::after {
		left: 21px;
		top: 22px;
	}
	.faac-ouv-timeline::before { height: calc(100% - 44px); }
	.faac-ouv-timeline::after  { height: calc((100% - 44px) * var(--faac-ouv-progresso, 0)); }
	.faac-ouv-passo > .faac-ouv-passo-num {
		flex-basis: 44px !important;
		width: 44px !important;
		max-width: 44px !important;
	}
	.faac-ouv-passo-num .elementor-heading-title {
		width: 44px;
		height: 44px;
	}
	.faac-ouv-passo > .faac-ouv-passo-txt { padding-top: 8px; }
}

/* ---- Coluna de apoio do formulário -------------------------------------- */

.faac-ouv-apoio-t {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6B7280;
}

ul.faac-ouv-apoio {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.faac-ouv-apoio li {
	position: relative;
	margin: 0 0 14px;
	padding-left: 18px;
	line-height: 1.6;
}

ul.faac-ouv-apoio li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 7px;
	height: 2px;
	background: #7B8FA5;
}

ul.faac-ouv-apoio li strong {
	color: #16232F;
}

/* Parágrafo logo depois de lista nasce colado nela. */
p.faac-ouv-apos-lista {
	margin-top: 18px;
}

/* ---- Formulário do Elementor: paridade com o resto da página ------------- */

.faac-ouv-form-wrap .elementor-field-group > label {
	font-size: 16px;
	font-weight: 600;
}

.faac-ouv-form-wrap .elementor-button[type="submit"],
.faac-ouv-form-wrap button[type="submit"] {
	min-height: 52px;
	border-radius: 5px;
	font-size: 17px !important;
	font-weight: 600 !important;
	letter-spacing: 0;
}

/* ---- Acompanhamento: os dois campos numa linha -------------------------- */

.faac-ouv-consulta-linha {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 0 20px;
	align-items: start;
}

.faac-ouv-consulta-linha > p {
	margin: 0 0 12px;
	min-width: 0;
}

.faac-ouv-consulta-ajuda {
	margin: 0 0 20px;
}

.faac-ouv-form-consulta button[type="submit"] {
	min-height: 52px;
	padding: 0 30px;
	font-size: 17px;
	font-weight: 600;
	transition: background-color .18s ease;
}

@media (max-width: 700px) {
	.faac-ouv-consulta-linha {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Correções da 2ª volta (18/08) -------------------------------------- */

/* O honeypot do formulário do Elementor aparecia na tela com o rótulo "Não
   preencha este campo" — instrução sem sentido para quem é humano e dica de
   graça para quem é robô. Fora da tela, não `display:none`: parte dos robôs
   pula campo com display none justamente por saber que é armadilha. */
.faac-ouv-form-wrap .elementor-field-group-ouv_confirme {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px;
	overflow: hidden;
}

/* O bloco de acompanhamento não precisa da largura da página: são dois campos
   para 6 e 32 caracteres, e o de código chegava a 780px. */
.faac-ouv-consulta-bloco {
	max-width: 880px;
}

/* ==========================================================================
   Página do Regulamento (/ouvidoria/regulamento/)
   ========================================================================== */

/* ⚠ A tentativa anterior capava o corpo em 860px pela medida de leitura. Deu
   errado na prática: o corpo ficava em x=10 enquanto o h1 do hero ficava em
   x=80, e a coluna estreita deixava metade da direita vazia — o documento
   parecia solto na página, não alinhado a ela. O corpo agora usa a MESMA
   largura de container do resto do site, que é o que alinha de verdade.

   O custo da linha longa é pago com texto justificado e hifenização: é como
   norma impressa se apresenta, e o gênero comporta. */
.faac-reg-corpo .elementor-widget-text-editor,
.faac-reg-corpo .elementor-widget-text-editor p {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* Título e assinatura não se justificam — só o corpo dos artigos. */
.faac-reg-corpo h2,
.faac-reg-status p {
	text-align: left;
	hyphens: manual;
}

@media (max-width: 700px) {
	/* Em tela estreita, justificar abre rios brancos entre as palavras. */
	.faac-reg-corpo .elementor-widget-text-editor,
	.faac-reg-corpo .elementor-widget-text-editor p {
		text-align: left;
	}
}

.faac-reg-corpo h2 {
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid #DCE4EC;
}

.faac-reg-corpo > .elementor-element:first-child h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.faac-reg-corpo p {
	margin: 0 0 14px;
}

/* Aviso de que o texto ainda não está assinado. Publicar um regulamento sem
   isso seria apresentar minuta como norma vigente. */
.faac-reg-status {
	border-left: 3px solid #C8501C;
	background: #FDF6F2;
	border-radius: 0 8px 8px 0;
	padding: 16px 20px;
}

.faac-reg-status p {
	margin: 0;
}

.faac-reg-voltar .elementor-button::before {
	content: "\2190";
	margin-right: 10px;
	font-size: 1.1em;
	line-height: 1;
}

/* ---- Correções da 3ª volta (18/08, noite) -------------------------------- */

/* Cartões de mesma altura na fileira.
   A fileira agora emite `align-items: stretch` (parâmetro `alinha` de
   `colunas()`), o que estica a COLUNA. O cartão dentro dela continuava com a
   altura do próprio conteúdo, então três cartões de texto desigual terminavam
   em degraus — foi o que o Thiago viu no bloco "Outros canais de atendimento".
   `flex: 1 1 auto` faz o cartão ocupar a coluna inteira.

   ⚠ A altura igual é metade da correção. A outra metade é o texto: cartão
   esticado com pouco texto vira caixa com um vazio embaixo, que é pior do que
   o degrau. Os três textos dos canais foram reescritos para o mesmo peso em
   `ouv-pagina-gera.py`. */
.faac-ouv-cartao {
	/* ⚠ `flex: 1 1 auto` aqui NÃO funciona. O Elementor 4 declara
	   `.e-con { flex: var(--flex-grow) var(--flex-shrink) var(--flex-basis) }`
	   com `--flex-grow: 0`, e essa regra tem a MESMA especificidade (0,1,0)
	   desta e vem depois na cascata — então ela ganha. Medido em 18/08/2026:
	   a coluna esticava certinho (169px nas três), o cartão dentro dela ficava
	   em 123px e a fileira continuava com degrau. Quem manda é a variável. */
	--flex-grow: 1;
	flex-grow: 1;
}

/* ⚠ E a variável sozinha também não basta: `.e-con { --flex-grow: 0 }` do
   Elementor tem a mesma especificidade (0,1,0) e vem depois. A classe repetida
   sobe para (0,2,0) sem `!important` e sem depender da ordem de enfileiramento.
   O `height: 100%` é o cinto além do suspensório: a coluna JÁ é esticada pela
   fileira (medido: 169px nas três), então ela tem altura definida e o 100%
   resolve mesmo que um dia o mecanismo de flex do Elementor mude de nome. */
.faac-ouv-cartao.faac-ouv-cartao {
	--flex-grow: 1;
	height: 100%;
}

/* Aviso de que o link abre noutra aba. Visível, não escondido para leitor de
   tela: mudança de contexto sem aviso é falha de WCAG 3.2.5, e o alerta serve
   a quem enxerga tanto quanto a quem não enxerga. */
.faac-ouv-nova-aba {
	font-size: .82em;
	color: #5B6B7D;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Linha do tempo do acompanhamento por protocolo
   --------------------------------------------------------------------------

   ⚠ É o ÚNICO canal de quem se manifestou anonimamente: não há e-mail para
   essa pessoa, por desenho. O que não estiver legível aqui não existe para
   ela — por isso a resposta aparece por inteiro, e não resumida. */

.faac-ouv-linha {
  list-style: none;
  margin: 12px 0 24px;
  padding: 0 0 0 26px;
  border-left: 2px solid var(--faac-ouv-borda, #DCE3EA);
}

.faac-ouv-linha-item {
  position: relative;
  margin: 0 0 22px;
}

.faac-ouv-linha-item:last-child {
  margin-bottom: 0;
}

/* O marcador fica sobre a linha: -26px do padding, menos metade do disco. */
.faac-ouv-linha-item::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -33px;
  width: 12px;
  height: 12px;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  background: var(--faac-ouv-nav, #213449);
}

.faac-ouv-linha-data {
  display: block;
  font-size: 13px;
  color: var(--faac-ouv-muted, #5B6B7D);
}

.faac-ouv-linha-titulo {
  margin: 2px 0 0;
  font-weight: 600;
  line-height: 1.4;
}

.faac-ouv-linha-texto {
  margin: 6px 0 0;
  line-height: 1.65;
  overflow-wrap: break-word;
}