/*
 * Página interna "Associados" — segunda página interna do site.
 *
 * Herda o sistema visual da Home aprovada (baseline congelada): container,
 * tokens de cor, Manrope/Inter, radius, escalas de espaçamento, eyebrow
 * (mark + label) e sistema de revelação. Nenhum token novo foi criado.
 *
 * Prefixo `.assoc-` para NÃO colidir com `.associados*`, que pertence à
 * seção "Associados" da Home.
 *
 * Hierarquia tipográfica (mesma lógica de página interna já usada em
 * Logística Reversa — mais contida que a Home):
 *   H1 (hero)            → teto ~54px
 *   H2 (seções)          → teto ~46px
 *   nome do associado    → ~20–23px (protagonista da linha do diretório)
 *
 * Ritmo de fundo, deliberadamente diferente de Logística Reversa:
 *   Hero (off-white) → Rede (verde profundo, manifesto curto) →
 *   Diretório (off-white, bloco longo) → Fecho (off-white, filete) →
 *   Footer (verde profundo, global)
 */

/* ============================================================
   Compartilhados da página
   ============================================================ */

.assoc-mark {
	flex: none;
	overflow: visible;
}

.assoc-mark path {
	fill: none;
	stroke: var(--color-accent);
	stroke-width: 2;
	stroke-linecap: round;
}

.assoc-mark-line {
	width: 28px;
	height: 2px;
	border-radius: 1px;
	background: var(--color-accent);
	flex: none;
}

.assoc-meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.assoc-label {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--font-size-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-brand-deep);
}

.assoc-label--light {
	color: rgba(245, 243, 237, 0.78);
}

/* ============================================================
   01 — HERO (tipográfico, sem fotografia)
   ============================================================ */

.assoc-hero {
	background: var(--color-bg);
	padding-block: clamp(40px, 6vw, 80px) clamp(56px, 7vw, 104px);
}

.assoc-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--space-7);
}

@media (min-width: 1024px) {
	/*
	 * Assimetria intencional: a headline ocupa a coluna maior à esquerda e o
	 * bloco institucional vive numa coluna estreita à direita, deslocado
	 * verticalmente para baixo. Não é o empilhamento
	 * "eyebrow → headline → parágrafo" das outras páginas.
	 */
	.assoc-hero__grid {
		grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
		column-gap: clamp(48px, 6vw, 112px);
		align-items: start;
	}

	.assoc-hero__aside {
		padding-top: clamp(24px, 3.5vw, 56px);
	}
}

.assoc-hero__lead {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-5);
}

.assoc-hero__headline {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-text);
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.4rem);
	max-width: 14ch;
	overflow-wrap: break-word;
}

.assoc-hero__support {
	margin: 0 0 var(--space-6);
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	line-height: 1.7;
	color: var(--color-text);
	max-width: 46ch;
}

/* Faixa de estados — navegação editorial discreta, não estatística. */
.assoc-hero__estados {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--color-border);
}

.assoc-hero__estados li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding-block: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.assoc-hero__estado-uf {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	color: var(--color-accent);
	min-width: 2.2em;
}

.assoc-hero__estado-nome {
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-text);
}

/* ============================================================
   02 — REDE (verde profundo, manifesto com muito respiro)
   ============================================================ */

.assoc-rede {
	background: var(--color-brand-deep);
	color: var(--color-off-white);
	padding-block: var(--section-space-mobile);
}

@media (min-width: 1024px) {
	.assoc-rede {
		padding-block: clamp(104px, 9vw, 148px);
	}
}

.assoc-rede__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-6);
}

.assoc-rede__meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

/*
 * Declaração central: escala grande, mas com largura de leitura curta e
 * muito espaço negativo ao redor — a força vem da tipografia e do vazio,
 * não de massa gráfica (mesma lógica documentada em specs/design.md sobre
 * a referência Servolux).
 */
.assoc-rede__statement {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--color-off-white);
	font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.9rem);
	max-width: 20ch;
}

@media (min-width: 1024px) {
	.assoc-rede__statement {
		max-width: 22ch;
	}
}

.assoc-rede__support {
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
	line-height: 1.7;
	color: rgba(245, 243, 237, 0.74);
	max-width: 52ch;
}

@media (min-width: 1024px) {
	/* Deslocamento à direita: o texto de apoio não nasce alinhado à
	   declaração, cria um segundo eixo de leitura dentro da mesma seção. */
	.assoc-rede__support {
		margin-left: clamp(0px, 12vw, 220px);
	}
}

/* ============================================================
   03/04/05 — DIRETÓRIO
   ============================================================ */

.assoc-diretorio {
	background: var(--color-bg);
	padding-block: var(--section-space-mobile);
}

@media (min-width: 1024px) {
	.assoc-diretorio {
		padding-block: clamp(100px, 8.5vw, 136px);
	}
}

.assoc-diretorio__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}

.assoc-diretorio__headline {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--color-text);
	font-size: clamp(1.9rem, 1.45rem + 1.9vw, 2.9rem);
	max-width: 18ch;
}

/* ---------- Busca + filtros ---------- */

.assoc-busca {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--space-6);
	margin-bottom: var(--space-7);
}

@media (min-width: 900px) {
	.assoc-busca {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: clamp(32px, 5vw, 80px);
		align-items: end;
	}
}

/*
 * Campo de busca: linha editorial, não caixa de formulário. Sem fundo, sem
 * borda em volta, sem radius — apenas um filete inferior que ganha verde
 * profundo no foco. O label fica acima, em escala de label do sistema.
 */
.assoc-busca__campo {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}

.assoc-busca__label {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--font-size-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.assoc-busca__input {
	width: 100%;
	margin: 0;
	padding: 0 0 var(--space-3);
	border: 0;
	border-bottom: 2px solid var(--color-border);
	border-radius: 0;
	background: transparent;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	line-height: 1.3;
	color: var(--color-text);
	transition: border-color var(--motion-micro) var(--motion-ease);
	-webkit-appearance: none;
	appearance: none;
}

.assoc-busca__input::placeholder {
	color: var(--color-text-muted);
	font-weight: 500;
	opacity: 1;
}

.assoc-busca__input:focus {
	outline: none;
	border-bottom-color: var(--color-brand-deep);
}

/* Fallback de acessibilidade: se o navegador não suportar :focus-visible,
   o filete acima já comunica foco; aqui reforçamos com outline offset. */
.assoc-busca__input:focus-visible {
	outline: 2px solid var(--color-brand-deep);
	outline-offset: 6px;
}

.assoc-busca__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* Filtros: pequena navegação editorial, sem pill e sem select. */
.assoc-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 2vw, 32px);
}

.assoc-filtro {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 0 0 var(--space-2);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 1rem;
	color: var(--color-text-muted);
	transition:
		color var(--motion-micro) var(--motion-ease),
		border-color var(--motion-micro) var(--motion-ease);
}

.assoc-filtro__contagem {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	transition: color var(--motion-micro) var(--motion-ease);
}

.assoc-filtro:hover,
.assoc-filtro:focus-visible {
	color: var(--color-brand-deep);
}

.assoc-filtro.is-active {
	color: var(--color-brand-deep);
	font-weight: 600;
	border-bottom-color: var(--color-brand-deep);
}

.assoc-filtro.is-active .assoc-filtro__contagem {
	color: var(--color-accent);
}

/* ---------- Contador de resultados ---------- */

.assoc-resultado {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.assoc-resultado__num {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--color-brand-deep);
	font-variant-numeric: tabular-nums;
}

.assoc-resultado__texto {
	font-family: var(--font-body);
	font-size: var(--font-size-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* ---------- Lista ---------- */

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

/*
 * Colunas do registro centralizadas em variáveis: a numeração vive numa
 * coluna de largura conhecida e TUDO o mais (nome, estado, detalhes
 * expandidos) começa no mesmo eixo X. Sem isso, os detalhes alinhariam com
 * a margem da página enquanto o nome ficaria deslocado — o registro leria
 * como dois blocos desconectados.
 */
.assoc-item {
	--assoc-num-col: 2.25rem;
	--assoc-num-gap: clamp(14px, 2vw, 28px);

	border-bottom: 1px solid var(--color-border);
}

@media (min-width: 900px) {
	.assoc-item {
		--assoc-num-col: 3.5rem;
		--assoc-num-gap: clamp(20px, 2.4vw, 40px);
	}
}

.assoc-item[hidden] {
	display: none;
}

/*
 * Linha do associado — grid rigoroso: numeração, nome (protagonista),
 * estado e sinal de expansão. Sem card, sem fundo, sem sombra.
 * O hover desloca discretamente o nome, reforçando que a linha é clicável.
 */
.assoc-item__toggle {
	display: grid;
	grid-template-columns: var(--assoc-num-col) 1fr auto;
	grid-template-areas:
		"num nome sinal"
		".   uf   sinal";
	align-items: baseline;
	column-gap: var(--assoc-num-gap);
	row-gap: 6px;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: clamp(20px, 2.2vw, 30px) 0;
	cursor: pointer;
	font-family: inherit;
	color: inherit;
}

.assoc-item__toggle--estatico {
	cursor: default;
}

@media (min-width: 900px) {
	/* Desktop: nome e estado na mesma linha, colunas fixas — alinhamento
	   rigoroso entre todos os registros (números, nomes e estados sempre
	   no mesmo eixo X). */
	.assoc-item__toggle {
		grid-template-columns: var(--assoc-num-col) minmax(0, 1fr) minmax(160px, 15%) 2rem;
		grid-template-areas: "num nome uf sinal";
		align-items: center;
		column-gap: var(--assoc-num-gap);
		row-gap: 0;
	}
}

.assoc-item__num {
	grid-area: num;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
	transition: color var(--motion-micro) var(--motion-ease);
}

.assoc-item__nome {
	grid-area: nome;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.4375rem);
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: var(--color-text);
	transition:
		color var(--motion-micro) var(--motion-ease),
		transform var(--motion-micro) var(--motion-ease);
}

.assoc-item__uf {
	grid-area: uf;
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: var(--color-text-muted);
	transition: color var(--motion-micro) var(--motion-ease);
}

/* Sinal de expansão: um "+" desenhado em CSS que vira "−" quando aberto.
   Sem ícone importado, sem biblioteca. */
.assoc-item__sinal {
	grid-area: sinal;
	position: relative;
	width: 14px;
	height: 14px;
	align-self: center;
	justify-self: end;
	flex: none;
}

.assoc-item__sinal::before,
.assoc-item__sinal::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: var(--color-brand-deep);
	transition:
		transform var(--motion-micro) var(--motion-ease),
		opacity var(--motion-micro) var(--motion-ease);
}

.assoc-item__sinal::before {
	width: 14px;
	height: 2px;
}

.assoc-item__sinal::after {
	width: 2px;
	height: 14px;
}

.assoc-item__toggle[aria-expanded="true"] .assoc-item__sinal::after {
	transform: scaleY(0);
	opacity: 0;
}

.assoc-item__toggle:hover .assoc-item__nome,
.assoc-item__toggle:focus-visible .assoc-item__nome {
	color: var(--color-brand-deep);
}

@media (min-width: 900px) {
	.assoc-item__toggle:hover .assoc-item__nome,
	.assoc-item__toggle:focus-visible .assoc-item__nome {
		transform: translateX(4px);
	}
}

.assoc-item__toggle:hover .assoc-item__num,
.assoc-item__toggle:focus-visible .assoc-item__num {
	color: var(--color-accent);
}

.assoc-item__toggle--estatico:hover .assoc-item__nome {
	color: var(--color-text);
	transform: none;
}

.assoc-item__toggle--estatico:hover .assoc-item__num {
	color: var(--color-text-muted);
}

/* ---------- Detalhes expandidos ---------- */

.assoc-item__detalhe[hidden] {
	display: none;
}

/* Alinha os detalhes com a coluna do NOME em qualquer largura — a
   numeração continua sendo a única coisa na margem esquerda. */
.assoc-item__detalhe {
	padding: 0 0 clamp(24px, 2.6vw, 34px);
	padding-left: calc(var(--assoc-num-col) + var(--assoc-num-gap));
}

@media (min-width: 900px) {
	.assoc-item__detalhe {
		padding-right: 2rem;
	}
}

.assoc-dados {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	margin: 0;
	padding-top: var(--space-2);
}

@media (min-width: 700px) {
	.assoc-dados {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(32px, 4vw, 64px);
	}
}

@media (min-width: 1200px) {
	.assoc-dados {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 0.85fr);
	}
}

.assoc-dado dt {
	margin: 0 0 5px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.6875rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.assoc-dado dd {
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text);
	overflow-wrap: break-word;
}

@media (min-width: 1200px) {
	/* Endereço é o campo mais longo dos quatro: ganha a coluna do meio,
	   que é a mais larga, e ocupa a linha inteira quando necessário. */
	.assoc-dado--largo {
		grid-column: 2 / 3;
		grid-row: 1 / 3;
	}
}

.assoc-dado__link {
	color: var(--color-brand-deep);
	text-decoration: none;
	font-weight: 500;
	border-bottom: 1px solid transparent;
	transition: border-color var(--motion-micro) var(--motion-ease);
}

.assoc-dado__link:hover,
.assoc-dado__link:focus-visible {
	border-bottom-color: var(--color-brand-deep);
}

/* ---------- Estados vazios / carregar mais ---------- */

.assoc-vazio,
.assoc-sem-resultado {
	margin: 0;
	padding-block: var(--space-8);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	color: var(--color-text-muted);
}

.assoc-sem-resultado[hidden] {
	display: none;
}

.assoc-mais {
	display: flex;
	justify-content: center;
	padding-top: var(--space-7);
}

.assoc-mais[hidden] {
	display: none;
}

.assoc-mais__botao {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	background: none;
	border: 0;
	border-bottom: 2px solid var(--color-border);
	padding: 0 0 var(--space-2);
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	color: var(--color-brand-deep);
	transition: border-color var(--motion-micro) var(--motion-ease);
}

.assoc-mais__botao:hover,
.assoc-mais__botao:focus-visible {
	border-bottom-color: var(--color-brand-deep);
}

.assoc-mais__restante {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   06 — FECHAMENTO (mínimo, filete)
   ============================================================ */

.assoc-fecho {
	background: var(--color-bg);
	padding-block: 0 var(--section-space-mobile);
}

@media (min-width: 1024px) {
	.assoc-fecho {
		padding-block: 0 clamp(100px, 8.5vw, 136px);
	}
}

.assoc-fecho__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	padding-top: clamp(32px, 4vw, 56px);
	border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
	.assoc-fecho__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-6);
	}
}

.assoc-fecho__texto {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.5rem);
	line-height: 1.35;
	color: var(--color-text);
	max-width: 26ch;
}

.assoc-fecho__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	color: var(--color-brand-deep);
	text-decoration: none;
	padding-block: 2px;
	border-bottom: 1px solid transparent;
	transition:
		border-color var(--motion-micro) var(--motion-ease),
		gap var(--motion-micro) var(--motion-ease);
}

.assoc-fecho__cta:hover,
.assoc-fecho__cta:focus-visible {
	border-bottom-color: var(--color-brand-deep);
	gap: 12px;
}

.assoc-fecho__arrow {
	display: inline-block;
	transition: transform var(--motion-micro) var(--motion-ease);
}

.assoc-fecho__cta:hover .assoc-fecho__arrow,
.assoc-fecho__cta:focus-visible .assoc-fecho__arrow {
	transform: translateX(3px);
}

/* Foco visível sobre a seção verde profunda */
.assoc-rede :focus-visible {
	outline-color: var(--color-off-white);
}

/* ============================================================
   Revelação ao entrar na viewport — mesmo sistema da Home/LR
   ([data-arpan-reveal] + IntersectionObserver em main.js)
   ============================================================ */

[data-arpan-reveal] .assoc-hero__lead,
[data-arpan-reveal] .assoc-hero__aside,
[data-arpan-reveal] .assoc-rede__meta,
[data-arpan-reveal] .assoc-rede__statement,
[data-arpan-reveal] .assoc-rede__support,
[data-arpan-reveal] .assoc-diretorio__intro,
[data-arpan-reveal] .assoc-busca,
[data-arpan-reveal] .assoc-fecho__inner {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--motion-reveal) var(--motion-ease),
		transform var(--motion-reveal) var(--motion-ease);
}

[data-arpan-reveal].is-visible .assoc-hero__lead,
[data-arpan-reveal].is-visible .assoc-hero__aside,
[data-arpan-reveal].is-visible .assoc-rede__meta,
[data-arpan-reveal].is-visible .assoc-rede__statement,
[data-arpan-reveal].is-visible .assoc-rede__support,
[data-arpan-reveal].is-visible .assoc-diretorio__intro,
[data-arpan-reveal].is-visible .assoc-busca,
[data-arpan-reveal].is-visible .assoc-fecho__inner {
	opacity: 1;
	transform: translateY(0);
}

[data-arpan-reveal].is-visible .assoc-hero__aside,
[data-arpan-reveal].is-visible .assoc-rede__statement {
	transition-delay: 110ms;
}

[data-arpan-reveal].is-visible .assoc-rede__support,
[data-arpan-reveal].is-visible .assoc-busca {
	transition-delay: 200ms;
}

@media (prefers-reduced-motion: reduce) {
	[data-arpan-reveal] .assoc-hero__lead,
	[data-arpan-reveal] .assoc-hero__aside,
	[data-arpan-reveal] .assoc-rede__meta,
	[data-arpan-reveal] .assoc-rede__statement,
	[data-arpan-reveal] .assoc-rede__support,
	[data-arpan-reveal] .assoc-diretorio__intro,
	[data-arpan-reveal] .assoc-busca,
	[data-arpan-reveal] .assoc-fecho__inner {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.assoc-item__nome,
	.assoc-item__num,
	.assoc-item__sinal::before,
	.assoc-item__sinal::after,
	.assoc-filtro,
	.assoc-busca__input,
	.assoc-fecho__cta,
	.assoc-fecho__arrow,
	.assoc-dado__link,
	.assoc-mais__botao {
		transition: none;
	}
}

/* ============================================================
   Polimento premium — mobile do diretório
   ------------------------------------------------------------
   A lista funcionava, mas estava densa demais no celular. Os ajustes abaixo
   melhoram legibilidade e separação SEM transformar cada associado num card
   e sem perder densidade informacional.
   ============================================================ */

@media (max-width: 899px) {
	/* Respiro vertical um pouco maior entre registros: a leitura de uma
	   lista longa no celular depende mais de espaço que de divisórias. */
	.assoc-item__toggle {
		padding-block: 22px;
		row-gap: 4px;
	}

	/* Nome com mais presença e respiro em relação ao estado. */
	.assoc-item__nome {
		font-size: 1.125rem;
		line-height: 1.32;
	}

	.assoc-item__uf {
		font-size: 0.8125rem;
	}

	/* O "+" ganha área de toque real (antes eram 14px de alvo). */
	.assoc-item__sinal {
		width: 18px;
		height: 18px;
	}

	.assoc-item__sinal::before {
		width: 18px;
	}

	.assoc-item__sinal::after {
		height: 18px;
	}

	/* Filtros: mais respiro entre linhas quando quebram em duas. */
	.assoc-filtros {
		gap: 14px 22px;
	}

	/* Busca com mais ar em relação aos filtros. */
	.assoc-busca {
		row-gap: var(--space-5);
	}

	/* Detalhes expandidos: separa visualmente do próximo registro. */
	.assoc-item__detalhe {
		padding-block-end: 26px;
	}

	.assoc-dados {
		gap: var(--space-4);
	}
}

/* O "+" indica estado: gira sutilmente ao abrir — microinteração discreta
   que confirma a ação sem animar a lista inteira. */
.assoc-item__sinal::before,
.assoc-item__sinal::after {
	transition:
		transform var(--motion-micro) var(--motion-ease),
		opacity var(--motion-micro) var(--motion-ease),
		background-color var(--motion-micro) var(--motion-ease);
}

.assoc-item__toggle[aria-expanded="true"] .assoc-item__sinal::before {
	background: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
	.assoc-item__sinal::before,
	.assoc-item__sinal::after {
		transition: none;
	}
}