/**
 * Widget "Tabela de Dados" (widgets/pagina-tabela.php)
 *
 * Reproduz as quatro tabelas da página "Abrangência da Comunicação": os canais
 * abertos com abas por estado e busca, a TV por assinatura, a antena
 * parabólica e as emissoras de rádio.
 *
 * O mockup foi feito com outra paleta (`--primary:#244A90`) e outra família
 * (Quicksand/Nunito). Aqui vale o Kit do tema — Inter e o azul FJPN — por
 * decisão registrada: duas páginas com tipografia própria leem como se
 * fossem de outro site.
 */

.fjpn-tabela {
	background: var(--fjpn-tabela-secao-bg, transparent);
	padding-block: var(--fjpn-space-section-py-md);
}

/* ==========================================================================
   1. CABEÇALHO
   ========================================================================== */

.fjpn-tabela__cabecalho {
	max-width: 52rem; /* ~820px, a medida do aprovado para o bloco de título */
	margin-bottom: var(--fjpn-gap-grid);
}

.fjpn-tabela__eyebrow {
	display: block;
	margin-bottom: var(--fjpn-gap-icon-text);
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-eyebrow);
	font-weight: var(--fjpn-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--fjpn-tabela-eyebrow, var(--fjpn-orange-primary));
}

.fjpn-tabela__titulo {
	margin: 0 0 var(--fjpn-gap-medium);
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-heading-lg);
	font-weight: var(--fjpn-weight-bold);
	line-height: var(--fjpn-leading-snug);
	color: var(--fjpn-tabela-titulo, var(--fjpn-text-primary));
}

.fjpn-tabela__texto {
	margin: 0;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-body);
	line-height: var(--fjpn-leading-relaxed);
	color: var(--fjpn-tabela-texto, var(--fjpn-text-muted));
}

/* Variante compacta: quadro do ícone + título ao lado, usada nas tabelas
   secundárias (assinatura, parabólica, rádio). */
.fjpn-tabela__cabecalho--compacto {
	display: flex;
	align-items: center;
	gap: var(--fjpn-gap-icon-text-lg);
	margin-bottom: var(--fjpn-gap-medium);
}

.fjpn-tabela__icone {
	display: grid;
	place-items: center;
	flex: 0 0 2.875rem; /* 46px */
	width: 2.875rem;
	height: 2.875rem;
	border-radius: var(--fjpn-radius-lg);
	background: var(--fjpn-tabela-icone-bg, var(--fjpn-blue-primary));
	color: var(--fjpn-white);
}

/* O Elementor entrega <i> (ícone de fonte) ou <svg> inline. O <i> herda o
   tamanho; o <svg> não tem dimensão intrínseca útil e precisa ser fixado. */
.fjpn-tabela__icone svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
}

.fjpn-tabela__icone i {
	font-size: 1.25rem;
	line-height: 1;
}

.fjpn-tabela__titulo--compacto {
	margin: 0;
	font-size: var(--fjpn-text-heading-sm);
	color: var(--fjpn-tabela-titulo, var(--fjpn-blue-primary));
}

/* ==========================================================================
   2. ABAS E BUSCA
   ========================================================================== */

.fjpn-tabela__ferramentas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--fjpn-gap-medium);
	margin-bottom: var(--fjpn-gap-medium);
}

.fjpn-tabela__abas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fjpn-gap-icon-text);
}

.fjpn-tabela__aba {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
	padding: 0.4375rem 0.8125rem;
	border: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
	border-radius: var(--fjpn-radius-full);
	background: var(--fjpn-white);
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	font-weight: var(--fjpn-weight-bold);
	line-height: 1;
	color: var(--fjpn-tabela-aba-ativa, var(--fjpn-blue-primary));
	cursor: pointer;
	/* O tema pai declara `button { padding: 6px 26px }` em main.css — mesma
	   armadilha já documentada em banner-carrossel.css. O padding acima é
	   explícito para não herdar aquele. */
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.fjpn-tabela__aba:hover {
	border-color: var(--fjpn-blue-mid);
}

.fjpn-tabela__aba-num {
	font-weight: var(--fjpn-weight-semibold);
	color: var(--fjpn-slate-400);
}

.fjpn-tabela__aba.is-active {
	background: var(--fjpn-tabela-aba-ativa, var(--fjpn-blue-primary));
	border-color: var(--fjpn-tabela-aba-ativa, var(--fjpn-blue-primary));
	color: var(--fjpn-white);
}

.fjpn-tabela__aba.is-active .fjpn-tabela__aba-num {
	color: rgba(255, 255, 255, 0.72);
}

/* Foco visível é o que permite operar as abas pelo teclado. `:focus-visible`
   e não `:focus` para o anel não aparecer no clique de mouse. */
.fjpn-tabela__aba:focus-visible,
.fjpn-tabela__busca input:focus-visible {
	outline: var(--fjpn-border-width-outline) solid var(--fjpn-orange-focus);
	outline-offset: 2px;
}

.fjpn-tabela__busca {
	position: relative;
	flex: 0 1 17.5rem;
	min-width: 14.375rem;
}

.fjpn-tabela__busca input {
	width: 100%;
	padding: 0.6875rem 0.875rem;
	border: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
	border-radius: var(--fjpn-radius-default);
	background: var(--fjpn-white);
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	color: var(--fjpn-text-primary);
}

.fjpn-tabela__busca input::placeholder {
	color: var(--fjpn-slate-400);
}

/* ==========================================================================
   3. TABELA
   ========================================================================== */

.fjpn-tabela__card {
	border: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
	border-radius: var(--fjpn-radius-lg);
	overflow: hidden;
	background: var(--fjpn-white);
	box-shadow: var(--fjpn-shadow-card);
}

/* Tabela larga rola dentro do próprio cartão, nunca empurrando a página —
   é o que mantém o site sem rolagem horizontal no celular. */
.fjpn-tabela__scroll {
	overflow-x: auto;
}

.fjpn-tabela__tabela {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
}

.fjpn-tabela__tabela thead th {
	padding: 0.8125rem 1.125rem;
	background: var(--fjpn-tabela-cabecalho-bg, var(--fjpn-blue-primary));
	color: var(--fjpn-tabela-cabecalho-cor, var(--fjpn-white));
	font-weight: var(--fjpn-weight-bold);
	font-size: var(--fjpn-text-small);
	text-align: start;
	white-space: nowrap;
}

.fjpn-tabela__tabela tbody th,
.fjpn-tabela__tabela tbody td {
	padding: 0.75rem 1.125rem;
	border-top: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
	vertical-align: middle;
	color: var(--fjpn-slate-700);
}

/* O filtro esconde as linhas com o atributo `hidden`. A regra do navegador
   para `[hidden]` é `display: none`, mas qualquer folha que declare
   `display: table-row` em `tr` a venceria por especificidade e as linhas
   filtradas reapareceriam. O tema pai é grande o bastante para isso ser um
   risco real, então a regra fica explícita. */
.fjpn-tabela__tabela tr[hidden] {
	display: none;
}

/* `:nth-child` conta a posição no DOM, não o que está visível: ao filtrar,
   a alternância vira aleatória (duas linhas claras seguidas). Zebrar pelo
   que sobra exigiria JS reescrevendo classes a cada tecla digitada — o
   `nth-child` é o custo aceito, e o efeito é sutil o bastante para não
   parecer defeito. */
.fjpn-tabela--zebra .fjpn-tabela__tabela tbody tr:nth-child(even) td {
	background: var(--fjpn-slate-50);
}

/* Estilos de coluna — cada um corresponde a um item do seletor "Aparência da
   coluna" no painel. */
.fjpn-tabela__col--id {
	width: 3.5rem;
	color: var(--fjpn-slate-400);
}

.fjpn-tabela__col--destaque {
	font-weight: var(--fjpn-weight-bold);
	color: var(--fjpn-tabela-destaque, var(--fjpn-blue-primary));
	white-space: nowrap;
}

.fjpn-tabela__col--discreto {
	white-space: nowrap;
	color: var(--fjpn-text-muted);
}

.fjpn-tabela__tabela tbody th.fjpn-tabela__col--rotulo {
	width: 46%;
	background: var(--fjpn-bg-soft);
	font-weight: var(--fjpn-weight-semibold);
	text-align: start;
}

/* O cabeçalho da coluna em destaque herdaria a cor da marca sobre o fundo
   azul do <thead> — azul sobre azul. A cor do cabeçalho sempre vence. */
.fjpn-tabela__tabela thead th.fjpn-tabela__col--destaque,
.fjpn-tabela__tabela thead th.fjpn-tabela__col--discreto,
.fjpn-tabela__tabela thead th.fjpn-tabela__col--id {
	color: var(--fjpn-tabela-cabecalho-cor, var(--fjpn-white));
	width: auto;
}

/* ==========================================================================
   4. ESTADO VAZIO
   ========================================================================== */

.fjpn-tabela__vazio {
	display: none;
	margin: 0;
	padding: 1.375rem 1.125rem;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	color: var(--fjpn-slate-500);
}

.fjpn-tabela__vazio.is-visivel {
	display: block;
}

/* Sem isto, o cabeçalho azul fica sozinho acima do aviso de "nenhum
   resultado", como se a tabela tivesse quebrado. */
.fjpn-tabela__card--vazio .fjpn-tabela__scroll {
	display: none;
}

.fjpn-tabela__nota {
	margin: var(--fjpn-gap-icon-text) 0 0;
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-small);
	color: var(--fjpn-slate-500);
}

/* ==========================================================================
   5. RESPONSIVO
   ========================================================================== */

@media (max-width: 767px) {
	/* Colunas marcadas como "ocultar no celular" saem aqui — tipicamente a
	   numeração, que rouba largura da coluna que a pessoa foi consultar. */
	.fjpn-tabela__col--oculta-mobile {
		display: none;
	}

	.fjpn-tabela__busca {
		flex: 1 1 100%;
	}

	.fjpn-tabela__tabela thead th,
	.fjpn-tabela__tabela tbody th,
	.fjpn-tabela__tabela tbody td {
		padding: 0.6875rem 0.8125rem;
	}
}