/*
 * Estilos do formulario publico do Brapa Ouvidoria.
 * Todas as regras ficam sob .brapa-ouvidoria-form para nao vazar para o
 * resto do tema. Nao usar seletores globais (body, *, etc. fora deste
 * escopo).
 */

.brapa-ouvidoria-form {
	--brapa-ouvidoria-primary: #158795;
	background: #ffffff;
	border-radius: 12px;
	padding: 24px;
	max-width: 720px;
	margin: 0 auto;
	box-sizing: border-box;
	font-size: 16px;
	line-height: 1.5;
}

.brapa-ouvidoria-form *,
.brapa-ouvidoria-form *::before,
.brapa-ouvidoria-form *::after {
	box-sizing: inherit;
}

.brapa-ouvidoria-notice {
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 20px;
	font-size: 14px;
}

.brapa-ouvidoria-notice p {
	margin: 0;
}

.brapa-ouvidoria-notice-dev {
	background: #fff8e5;
	border: 1px solid #e6c200;
	color: #6b5900;
}

.brapa-ouvidoria-notice-error {
	background: #fdecea;
	border: 1px solid #d63638;
	color: #7a1a1a;
}

.brapa-ouvidoria-notice-test {
	background: #eafaf1;
	border: 1px solid #1a8a4a;
	color: #0d5a30;
}

.brapa-ouvidoria-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.brapa-ouvidoria-row > .brapa-ouvidoria-field {
	flex: 1 1 260px;
}

.brapa-ouvidoria-field {
	margin-bottom: 18px;
}

.brapa-ouvidoria-form label,
.brapa-ouvidoria-form .brapa-ouvidoria-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 14px;
}

.brapa-ouvidoria-required {
	color: #d63638;
}

.brapa-ouvidoria-form input[type="text"],
.brapa-ouvidoria-form input[type="email"],
.brapa-ouvidoria-form input[type="date"],
.brapa-ouvidoria-form select,
.brapa-ouvidoria-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
	background: #ffffff;
	color: #1d2939;
}

.brapa-ouvidoria-form input:focus,
.brapa-ouvidoria-form select:focus,
.brapa-ouvidoria-form textarea:focus {
	outline: 2px solid var(--brapa-ouvidoria-primary);
	outline-offset: 1px;
	border-color: var(--brapa-ouvidoria-primary);
}

.brapa-ouvidoria-form input:disabled {
	background: #f2f4f7;
	color: #98a2b3;
}

.brapa-ouvidoria-form textarea {
	resize: vertical;
	min-height: 120px;
}

.brapa-ouvidoria-description {
	font-size: 13px;
	color: #555555;
	margin: 4px 0 8px;
}

.brapa-ouvidoria-error {
	display: block;
	color: #d63638;
	font-size: 13px;
	margin-top: 4px;
}

.brapa-ouvidoria-radio {
	display: block;
	font-weight: 400;
	margin-bottom: 6px;
}

.brapa-ouvidoria-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400;
}

.brapa-ouvidoria-checkbox input {
	margin-top: 4px;
}

.brapa-ouvidoria-hp-wrap {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

.brapa-ouvidoria-submit-wrap {
	margin-top: 8px;
}

.brapa-ouvidoria-button {
	background: var(--brapa-ouvidoria-primary);
	color: #ffffff;
	border: none;
	border-radius: 8px;
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.brapa-ouvidoria-button:hover {
	filter: brightness(0.92);
}

@media (max-width: 600px) {
	.brapa-ouvidoria-row {
		flex-direction: column;
		gap: 0;
	}

	/*
	 * Correcao de espacamento vertical excessivo no mobile: o flex-basis
	 * de 260px em ".brapa-ouvidoria-row > .brapa-ouvidoria-field" (regra
	 * acima, fora deste media query) define a LARGURA minima de cada
	 * campo quando o eixo principal do flex e horizontal (desktop). Ao
	 * mudar para flex-direction: column aqui, o eixo principal passa a
	 * ser vertical, e esse mesmo flex-basis:260px passa a valer para a
	 * ALTURA de cada campo - forcando cada um a ocupar ~260px de altura
	 * mesmo tendo bem menos conteudo real, e criando o vao vertical
	 * excessivo entre os campos no mobile. Resetar para flex-basis:auto
	 * (via "flex: 0 1 auto") faz cada campo ocupar apenas a altura do seu
	 * proprio conteudo - o espacamento visivel entre campos passa a vir
	 * unicamente de ".brapa-ouvidoria-field { margin-bottom: 18px; }"
	 * (ja definido fora deste media query, dentro da faixa de 16-20px
	 * pedida). Escopo restrito as classes do plugin, sem afetar o
	 * comportamento em telas acima de 600px.
	 */
	.brapa-ouvidoria-row > .brapa-ouvidoria-field {
		flex: 0 1 auto;
	}
}

/*
 * Tela de sucesso (Sprint 3) - protocolo e codigo de acesso.
 * scroll-margin-top (UX): quando a pagina carrega ja posicionada na
 * ancora #brapa-ouvidoria-sucesso (ver o redirect do PRG em
 * public/class-public.php), evita que um cabecalho fixo do tema cubra o
 * inicio do bloco. Ajuste o valor conforme a altura real do header fixo
 * do site, se necessario.
 */
#brapa-ouvidoria-sucesso {
	scroll-margin-top: 120px;
}

.brapa-ouvidoria-success-field {
	background: #f8f9fb;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 14px;
}

.brapa-ouvidoria-success-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #555555;
	margin-bottom: 4px;
}

.brapa-ouvidoria-success-value {
	display: block;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #1d2939;
	word-break: break-all;
}

/* Consulta publica (Sprint 5). */
.brapa-ouvidoria-consulta-title {
	margin: 0 0 8px;
	font-size: 20px;
}

/*
 * Atualizacoes da manifestacao (Sprint 7) - texto corrido (mensagem
 * publica), nunca um codigo curto como protocolo/codigo de acesso.
 * Classe PROPRIA, deliberadamente sem "word-break: break-all" (que
 * ".brapa-ouvidoria-success-value" usa de proposito para protocolo/
 * codigo, ver acima) - aplicar break-all a frases normais fragmenta
 * palavras no meio no mobile. "overflow-wrap: break-word" ainda evita
 * estouro de layout no caso raro de um token muito longo sem espacos.
 */
.brapa-ouvidoria-update-message {
	display: block;
	font-size: 15px;
	font-weight: 400;
	word-break: normal;
	overflow-wrap: break-word;
}

/* Botao "Copiar dados de acesso" (Sprint 8). */
.brapa-ouvidoria-copy-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 4px 0 14px;
}

.brapa-ouvidoria-copy-feedback {
	font-size: 13px;
	color: #0d5a30;
}

/*
 * Estado hover/focus do botao "Copiar dados de acesso" - correcao de
 * legibilidade (fundo/texto claros sobre claro em alguns temas). Regra
 * restrita exclusivamente a esta classe (usada so neste botao, ver
 * public/views/success.php) - nao altera o estado normal do botao nem
 * o hover/focus de nenhum outro botao do plugin (ex.: "Consultar outro
 * protocolo", que tambem usa .brapa-ouvidoria-button-secondary mas nao
 * esta classe). !important usado deliberadamente para garantir que este
 * estado prevaleca mesmo sobre estilos de botao mais especificos vindos
 * do tema do site.
 */
.brapa-ouvidoria-copy-button:hover,
.brapa-ouvidoria-copy-button:focus {
	background-color: #000000 !important;
	color: #ffffff !important;
	border-color: #000000 !important;
}

.brapa-ouvidoria-button-secondary {
	background: transparent;
	color: var(--brapa-ouvidoria-primary);
	border: 1px solid var(--brapa-ouvidoria-primary);
	margin-top: 8px;
}

.brapa-ouvidoria-button-secondary:hover {
	filter: none;
	background: rgba(0, 0, 0, 0.03);
}

/* Selecao incremental de anexos (melhoria pos-Sprint 6). */
.brapa-ouvidoria-attachments-add {
	padding: 8px 18px;
	font-size: 14px;
	margin-bottom: 8px;
}

.brapa-ouvidoria-attachments-add:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.brapa-ouvidoria-attachments-list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}

.brapa-ouvidoria-attachment-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	margin-bottom: 6px;
	font-size: 13px;
}

.brapa-ouvidoria-attachment-name {
	flex: 1 1 auto;
	color: #1d2939;
	word-break: break-all;
}

.brapa-ouvidoria-attachment-size {
	flex: 0 0 auto;
	color: #555555;
}

.brapa-ouvidoria-attachment-remove {
	flex: 0 0 auto;
	background: transparent;
	border: 1px solid #d63638;
	color: #d63638;
	border-radius: 6px;
	padding: 4px 10px;
	font-size: 12px;
	cursor: pointer;
}

.brapa-ouvidoria-attachment-remove:hover {
	background: #fdecea;
}

.brapa-ouvidoria-attachments-count {
	display: block;
	font-size: 12px;
	color: #555555;
	margin-bottom: 8px;
}