/*
 * Índices Econômicos — estilo do shortcode [indices_economicos]
 *
 * Princípio: NÃO impor identidade visual. Tipografia, cor de texto e estilos de
 * título vêm do tema do site. Bordas, fundos e textos secundários são derivados
 * da própria cor do texto (currentColor), então o bloco acompanha o tema
 * automaticamente — inclusive em temas escuros, sem media query.
 */

.ie-wrap {
	/* Fallback para navegadores sem color-mix (sobrescrito no @supports abaixo). */
	--ie-linha: rgba(128, 128, 128, .28);
	--ie-suave: rgba(90, 90, 90, 1);
	--ie-cartao: transparent;
	--ie-zebra: rgba(128, 128, 128, .06);

	/* Personalizáveis em Configurações → Índices Econômicos. */
	--ie-marca: #005597;
	--ie-sobe: #0f7b3f;
	--ie-cai: #b32d2e;
	--ie-raio: 3px;

	font: inherit;
	color: inherit;
}

@supports (color: color-mix(in srgb, currentColor 50%, transparent)) {
	.ie-wrap {
		--ie-linha: color-mix(in srgb, currentColor 16%, transparent);
		/*
		 * 78%, não menos: rótulos e notas são texto pequeno e precisam de 4,5:1
		 * (WCAG AA). Com a cor de texto do afabesp.org.br (#005597) sobre branco,
		 * 78% dá 4,6:1 — a 62% cairia para 3,2:1 e reprovaria.
		 */
		--ie-suave: color-mix(in srgb, currentColor 78%, transparent);
		--ie-cartao: color-mix(in srgb, currentColor 3.5%, transparent);
		--ie-zebra: color-mix(in srgb, currentColor 4.5%, transparent);
	}
}

/* Títulos: só espaçamento. Tamanho, peso e fonte ficam com o tema. */
.ie-titulo {
	margin: 0 0 .5em;
}

.ie-grupo {
	margin: 1.5em 0 .6em;
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

/* Cabeçalho "filete": discreto, cor derivada do texto. */
.ie-cab-filete .ie-grupo {
	padding-bottom: .35em;
	border-bottom: 1px solid var(--ie-linha);
	color: var(--ie-suave);
}

/*
 * Cabeçalho "faixa": barra sólida na cor da marca com texto branco centralizado.
 * Reproduz o padrão de seção usado no afabesp.org.br.
 */
.ie-cab-faixa .ie-grupo {
	padding: .7em 1em;
	background: var(--ie-marca);
	border-radius: var(--ie-raio);
	color: #fff;
	text-align: center;
}

.ie-lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 10px;
}

.ie-item {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"icone rotulo"
		"icone valores"
		"nota  nota";
	align-items: center;
	column-gap: 10px;
	row-gap: 2px;
	padding: 12px 14px;
	background: var(--ie-cartao);
	border: 1px solid var(--ie-linha);
	border-radius: var(--ie-raio);
}

.ie-sem-icones .ie-item {
	grid-template-columns: 1fr;
	grid-template-areas:
		"rotulo"
		"valores"
		"nota";
}

.ie-icone {
	grid-area: icone;
	font-size: 1.45em;
	line-height: 1;
}

.ie-sem-icones .ie-icone {
	display: none;
}

.ie-rotulo {
	grid-area: rotulo;
	font-size: .82em;
	font-weight: 600;
	color: var(--ie-suave);
}

.ie-valores {
	grid-area: valores;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .1em .5em;
}

.ie-valor {
	font-size: 1.15em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ie-valor-2 {
	font-size: .95em;
	font-weight: 600;
	color: var(--ie-suave);
}

.ie-var {
	font-size: .86em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ie-sobe   { color: var(--ie-sobe); }
.ie-cai    { color: var(--ie-cai); }
.ie-neutro { color: var(--ie-suave); }

.ie-nota {
	grid-area: nota;
	margin-top: 4px;
	font-size: .76em;
	color: var(--ie-suave);
}

.ie-defasado { border-style: dashed; }

.ie-rodape {
	margin-top: 1.5em;
	font-size: .8em;
	color: var(--ie-suave);
}

.ie-aviso {
	display: inline-block;
	margin-left: .4em;
}

.ie-vazio {
	padding: 1em;
	border: 1px dashed var(--ie-linha);
	border-radius: var(--ie-raio);
}

/* ------------------------------------------------------------------ *
 * Estilo "lista": uma linha por indicador, separadas por filete
 * ------------------------------------------------------------------ */

.ie-estilo-lista .ie-lista {
	display: block;
}

.ie-estilo-lista .ie-item {
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"icone rotulo valores"
		"icone nota   nota";
	padding: 9px 2px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ie-linha);
	border-radius: 0;
}

.ie-estilo-lista.ie-sem-icones .ie-item {
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"rotulo valores"
		"nota   nota";
}

.ie-estilo-lista .ie-rotulo {
	font-size: 1em;
	font-weight: 500;
	color: inherit;
}

.ie-estilo-lista .ie-valor {
	font-size: 1em;
}

.ie-estilo-lista .ie-valores {
	justify-content: flex-end;
}

/* ------------------------------------------------------------------ *
 * Estilo "tabela": linhas zebradas e densas
 * ------------------------------------------------------------------ */

.ie-estilo-tabela .ie-lista {
	display: block;
	border: 1px solid var(--ie-linha);
	border-radius: var(--ie-raio);
	overflow: hidden;
}

.ie-estilo-tabela .ie-item {
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"icone rotulo valores"
		"icone nota   nota";
	padding: 8px 14px;
	background: none;
	border: 0;
	border-radius: 0;
}

.ie-estilo-tabela.ie-sem-icones .ie-item {
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"rotulo valores"
		"nota   nota";
}

.ie-estilo-tabela .ie-item:nth-child(odd) {
	background: var(--ie-zebra);
}

.ie-estilo-tabela .ie-rotulo {
	font-size: .95em;
	font-weight: 500;
	color: inherit;
}

.ie-estilo-tabela .ie-valor {
	font-size: 1em;
}

.ie-estilo-tabela .ie-valores {
	justify-content: flex-end;
}

.ie-estilo-tabela .ie-nota {
	margin-top: 0;
}

/* ------------------------------------------------------------------ */

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

	.ie-estilo-lista .ie-item,
	.ie-estilo-tabela .ie-item {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"icone rotulo"
			"icone valores"
			"nota  nota";
	}

	.ie-estilo-lista.ie-sem-icones .ie-item,
	.ie-estilo-tabela.ie-sem-icones .ie-item {
		grid-template-columns: 1fr;
		grid-template-areas:
			"rotulo"
			"valores"
			"nota";
	}

	.ie-estilo-lista .ie-valores,
	.ie-estilo-tabela .ie-valores {
		justify-content: flex-start;
	}
}