/* ============================================================================
   Acesso à Informação · Relayout (Proposta 2026.05.001 · Frente 1.5)
   Modernização visual focada na seção Acesso à Informação.
   Referência: CODEGO (estrutura via NucleoGov).
   ============================================================================ */

/* --- Tokens locais (estendem os globais do style.css) ------------------- */
:root {
	--ai-azul-escuro:    #1F4E9C;
	--ai-azul:           #496CA5;
	--ai-azul-claro:     #55B7E3;
	--ai-azul-fundo:     #F4F8FC;
	--ai-borda:          #D5E1ED;
	--ai-texto:          #1F2937;
	--ai-texto-suave:    #6B7280;
	--ai-destaque-bg:    #FFF7E0;
	--ai-destaque-borda: #F0C040;
	--ai-sucesso:        #1F8A4C;
	--ai-radius:         8px;
	--ai-radius-sm:      4px;
	--ai-shadow:         0 1px 2px rgba(31,78,156,0.04), 0 2px 8px rgba(31,78,156,0.06);
	--ai-shadow-strong:  0 4px 16px rgba(31,78,156,0.10);
}

/* --- Cabeçalho da seção -------------------------------------------------- */
.leitura .cabecalho,
body[class*="acesso"] .cabecalho {
	background-color: var(--ai-azul-escuro);
	background-blend-mode: multiply;
}

/* --- Grid de categorias (padrão oficial CGE/CODEGO) --------------------- */
/* Espelha 1:1 o CSS do plugin nucleoweb-essentials da CODEGO */
.acesso-grid {
	display: flex !important;
	flex-flow: row wrap !important;
	gap: 40px !important;
	grid-gap: 40px !important;   /* alias do gap em alguns browsers/specs */
	grid-template-columns: none !important;
}
.acesso-grid-item {
	background-color: #ededed !important;
	border: 0 !important;
	border-radius: 4px !important;
	box-shadow: 0 0 4px rgba(0,0,0,.03), 0 1px 2px rgba(0,0,0,.1) !important;
	display: flex !important;
	flex-direction: column;
	gap: 4px;
	overflow: hidden;
	padding: 24px 30px 24px !important;
	position: relative;
	width: calc(33.33333% - 26.66667px);
}
@media (max-width: 980px) { .acesso-grid-item { width: calc(50% - 20px); } }
@media (max-width: 600px) { .acesso-grid-item { width: 100%; } }

/* Faixa azul reta no topo (8px, full-width) */
.acesso-grid-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 8px;
	background: #00549A;
}
/* Barra colorida vinda do DB fica oculta — usamos o ::before */
.acesso-grid-item__codigo {
	display: none !important;
}

/* Header: ícone + título lado a lado */
.acesso-grid-item__categoria {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	color: #000;
	font-size: 1.0625em;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 !important;
	padding: 0 !important;
}
.acesso-grid-item__categoria figure {
	display: flex;
	width: 36px;
	margin: 0;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}
.acesso-grid-item__categoria figure img {
	max-width: 100%;
	max-height: 36px;
}
/* Título com sublinhado laranja CGE — sublinhado = largura do texto */
.acesso-grid-item__categoria strong {
	border-bottom: 2px solid #fd6008;
	color: #000;
	font-weight: 700;
	padding-bottom: 4px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-width: 0;
	max-width: calc(100% - 48px); /* 36px icone + 12px gap = caber sem estourar */
	width: fit-content;
	hyphens: auto;
}
/* Lista de itens — checkmark bullet via ::before */
.acesso-grid-links {
	display: flex;
	flex-direction: column;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
}
.acesso-grid-links li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}
.acesso-grid-links a {
	color: #000;
	display: flex !important;
	gap: 8px;
	justify-content: flex-start;
	padding: 6px 0;
	font-size: 1em;
	text-decoration: none !important;
	margin: 0 !important;
	line-height: 1.4;
	align-items: flex-start;
}
.acesso-grid-links a:hover {
	color: #00549A;
	text-decoration: none !important;
}
/* Bullet ponto simples (padrão CGE oficial) */
.acesso-grid-links a::before {
	content: "•";
	display: inline-block;
	flex-shrink: 0;
	width: 10px;
	color: #000;
	font-size: 1.2em;
	line-height: 1;
	margin-top: .05em;
	text-align: center;
}

/* --- Categoria/título nas páginas internas ------------------------------ */
.acesso__categoria {
	display: inline-block;
	font-size: .8125em !important;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ai-azul-claro) !important;
	background: var(--ai-azul-fundo);
	padding: .25em .75em;
	border-radius: 999px;
	margin-bottom: .5rem !important;
}
.leitura .titulo1 {
	font-weight: 400;
	color: var(--ai-azul-escuro);
	line-height: 1.15;
	max-width: 100% !important;
}

/* --- Filtros ------------------------------------------------------------- */
.form.filtros {
	background: var(--ai-azul-fundo);
	border: 1px solid var(--ai-borda);
	border-radius: var(--ai-radius);
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
}
.form.filtros .form__colunas {
	gap: .75rem;
	flex-wrap: wrap;
}
.form.filtros dt {
	font-size: .8125em;
	color: var(--ai-texto-suave);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.form.filtros input[type="text"] {
	border-radius: var(--ai-radius-sm);
	border-color: var(--ai-borda);
	background: #fff;
}
.form.filtros input[type="text"]:focus {
	border-color: var(--ai-azul-claro);
	outline: none;
	box-shadow: 0 0 0 3px rgba(85,183,227,.15);
}
.form.filtros .button {
	border-radius: var(--ai-radius-sm);
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.filtros__nota {
	margin: 0 !important;
	padding-top: .75rem;
	border-top: 1px dashed var(--ai-borda);
	color: var(--ai-texto-suave) !important;
}

/* --- Cards de Legislação (frente 1.5 · espelho CODEGO) ------------------ */
.legislacao-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	margin: 2rem 0;
}
.legislacao-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--ai-borda);
	border-radius: var(--ai-radius);
	padding: 1.5rem 1.25rem 1.25rem;
	color: var(--ai-texto);
	text-decoration: none !important;
	transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
	box-shadow: var(--ai-shadow);
	position: relative;
	overflow: hidden;
	min-height: 220px;
}
.legislacao-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: linear-gradient(90deg, var(--ai-azul) 0%, var(--ai-azul-claro) 100%);
}
.legislacao-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--ai-shadow-strong);
	border-color: var(--ai-azul-claro);
}
.legislacao-card__icone {
	display: inline-flex;
	width: 56px;
	height: 56px;
	background: var(--ai-azul-fundo);
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: var(--ai-azul);
	margin-bottom: 1rem;
	margin-top: .5rem;
}
.legislacao-card:hover .legislacao-card__icone {
	background: var(--ai-azul);
	color: #fff;
}
.legislacao-card__titulo {
	font-size: 1.0625em;
	font-weight: 600;
	color: var(--ai-azul-escuro);
	letter-spacing: .01em;
	text-transform: uppercase;
	margin-bottom: .5rem;
	line-height: 1.2;
}
.legislacao-card__desc {
	font-size: .8125em;
	color: var(--ai-texto-suave);
	line-height: 1.4;
	flex: 1;
	margin-bottom: 1rem;
}
.legislacao-card__contagem {
	display: inline-block;
	font-size: .75em;
	font-weight: 600;
	color: var(--ai-azul);
	background: var(--ai-azul-fundo);
	padding: .25em .625em;
	border-radius: 999px;
	letter-spacing: .04em;
}

@media (max-width: 980px) {
	.legislacao-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.legislacao-cards { grid-template-columns: 1fr; }
	.legislacao-card { min-height: auto; }
}

.contrast .legislacao-card {
	background: #000 !important;
	border-color: var(--amarelo, #FFDC47) !important;
}
.contrast .legislacao-card__titulo,
.contrast .legislacao-card__icone,
.contrast .legislacao-card__contagem {
	color: var(--amarelo, #FFDC47) !important;
	background-color: transparent !important;
}
.contrast .legislacao-card__icone {
	border: 2px solid var(--amarelo, #FFDC47);
}

/* --- Abas de Exercício (frente 1.1 e 1.2) ------------------------------- */
.exercicio-tabs {
	display: flex;
	gap: 0;
	margin: 1.5rem 0 0;
	border-bottom: 2px solid var(--ai-borda);
	flex-wrap: wrap;
	scroll-margin-top: 1rem; /* respiro ao rolar via #planilhas */
}
.exercicio-tab {
	display: inline-block;
	padding: .75rem 1.25rem;
	color: var(--ai-texto-suave);
	font-size: .9375em;
	font-weight: 500;
	text-decoration: none !important;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: all 150ms;
	letter-spacing: .04em;
}
.exercicio-tab:hover {
	color: var(--ai-azul);
	background: var(--ai-azul-fundo);
}
.exercicio-tab--ativa {
	color: var(--ai-azul-escuro);
	border-bottom-color: var(--ai-azul-claro);
	font-weight: 600;
}
.exercicio-tab--ativa:hover {
	background: transparent;
}

.contrast .exercicio-tabs {
	border-bottom-color: var(--amarelo, #FFDC47);
}
.contrast .exercicio-tab {
	color: #ccc;
}
.contrast .exercicio-tab--ativa {
	color: var(--amarelo, #FFDC47);
	border-bottom-color: var(--amarelo, #FFDC47);
}

/* --- Paginação --------------------------------------------------------- */
.pagination {
	display: flex;
	justify-content: center;
	gap: 4px;
	padding: 1rem;
	border-top: 1px solid var(--ai-borda);
	background: #fff;
}
.pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 .625rem;
	border: 1px solid var(--ai-borda);
	color: var(--ai-azul);
	font-size: .875em;
	font-weight: 500;
	text-decoration: none !important;
	transition: all 100ms;
}
.pagination a:hover {
	background: var(--ai-azul-fundo);
	border-color: var(--ai-azul-claro);
}
.pagination a.pagination__active,
.pagination a.active {
	background: var(--ai-azul);
	color: #fff;
	border-color: var(--ai-azul);
}
.contrast .pagination a {
	background: #000;
	color: var(--amarelo, #FFDC47);
	border-color: var(--amarelo, #FFDC47);
}
.contrast .pagination a.pagination__active,
.contrast .pagination a.active {
	background: var(--amarelo, #FFDC47);
	color: #000;
}

/* --- Bloco de Exercício (frente 1.1 e 1.2) ------------------------------ */
.exercicio {
	background: #fff;
	border: 1px solid var(--ai-borda);
	margin-bottom: 1.5rem;
	overflow: hidden;
	box-shadow: var(--ai-shadow);
}
.exercicio__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(180deg, var(--ai-azul-fundo) 0%, #fff 100%);
	border-bottom: 1px solid var(--ai-borda);
}
.exercicio__titulo {
	margin: 0 !important;
	font-size: 1.5em !important;
	font-weight: 500;
	color: var(--ai-azul-escuro) !important;
	line-height: 1.2;
}
.exercicio__titulo::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 1.25em;
	background: var(--ai-azul-claro);
	margin-right: .625em;
	vertical-align: -3px;
	border-radius: 2px;
}
.exercicio__acoes {
	display: flex;
	gap: .375rem;
	flex-wrap: wrap;
}
.exercicio__acoes .button,
.exercicio__acoes .button__sec {
	font-size: .6875em;
	padding: .375em .875em;
	background: #fff !important;
	color: var(--ai-azul) !important;
	border: 1px solid var(--ai-borda) !important;
	letter-spacing: .04em;
	transition: all 100ms;
}
.exercicio__acoes .button:hover {
	background: var(--ai-azul) !important;
	color: #fff !important;
	border-color: var(--ai-azul) !important;
}

/* --- Tabelas dentro do exercício ---------------------------------------- */
.exercicio .tabela1 {
	margin: 0 !important;
	font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: .8125em !important;
}
.exercicio .tabela1 th {
	background: var(--ai-azul-fundo) !important;
	color: var(--ai-azul-escuro) !important;
	border: 0 !important;
	border-bottom: 2px solid var(--ai-borda) !important;
	padding: .75rem .625rem !important;
	font-size: .75em;
	font-weight: 600;
	letter-spacing: .04em;
	text-align: left !important;
	text-transform: uppercase;
}
.exercicio .tabela1 td {
	border: 0 !important;
	border-bottom: 1px solid var(--ai-borda) !important;
	padding: .625rem !important;
	text-align: left !important;
	color: var(--ai-texto);
	vertical-align: top;
}
.exercicio .tabela1 tr:hover td {
	background: var(--ai-azul-fundo);
}

/* Totalizador anual destacado */
.exercicio .tabela1 tr.exercicio__total td {
	background: var(--ai-destaque-bg) !important;
	border-top: 2px solid var(--ai-destaque-borda) !important;
	border-bottom: 0 !important;
	padding: .875rem .75rem !important;
	font-size: 1em !important;
	font-weight: 700 !important;
	color: var(--ai-texto) !important;
	letter-spacing: .02em;
}
.exercicio .tabela1 tr.exercicio__total td:last-child {
	color: var(--ai-azul-escuro) !important;
}

/* --- Tabela genérica fora de exercício (acesso-despesa.php) ------------- */
.leitura .tabela1 {
	font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: .8125em;
	border: 1px solid var(--ai-borda);
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}
.leitura .tabela1 th {
	background: var(--ai-azul-fundo) !important;
	color: var(--ai-azul-escuro) !important;
	border: 0 !important;
	border-bottom: 2px solid var(--ai-borda) !important;
	padding: .75rem .625rem !important;
	font-weight: 600;
	letter-spacing: .04em;
}
.leitura .tabela1 td {
	border: 0 !important;
	border-bottom: 1px solid var(--ai-borda) !important;
	padding: .625rem !important;
}
.leitura .tabela1 tr:last-child td {
	border-bottom: 0 !important;
}
.leitura .tabela1 tr:nth-child(even) td {
	background: rgba(244,248,252,.5);
}

/* --- Botão voltar ao índice -------------------------------------------- */
.leitura__voltar {
	margin-top: 2rem;
	background: #fff !important;
	color: var(--ai-azul) !important;
	border: 1px solid var(--ai-borda) !important;
	border-radius: var(--ai-radius-sm);
	transition: all 150ms;
}
.leitura__voltar:hover {
	background: var(--ai-azul) !important;
	color: #fff !important;
	border-color: var(--ai-azul) !important;
}

/* --- Breadcrumb (caminho) ----------------------------------------------- */
.caminho {
	background: var(--ai-azul-fundo);
	border-bottom: 1px solid var(--ai-borda);
}
.caminho p {
	color: var(--ai-texto-suave);
	font-size: .875em;
}
.caminho a {
	color: var(--ai-azul);
}
.caminho strong {
	color: var(--ai-azul-escuro);
}

/* --- Responsividade ------------------------------------------------------ */
@media (max-width: 768px) {
	.acesso-grid {
		grid-template-columns: 1fr !important;
	}
	.exercicio__header {
		flex-direction: column;
		align-items: stretch;
		gap: .75rem;
	}
	.exercicio__titulo {
		font-size: 1.25em !important;
	}
	.exercicio__acoes {
		justify-content: stretch;
	}
	.exercicio__acoes a {
		flex: 1;
		text-align: center;
	}
	/* tabela: scroll horizontal em telas pequenas */
	.exercicio,
	.leitura__texto {
		overflow-x: auto;
	}
	.exercicio .tabela1,
	.leitura .tabela1 {
		min-width: 600px;
	}
}

/* --- Modo de alto contraste (acessibilidade existente) ------------------ */
.contrast .exercicio,
.contrast .form.filtros,
.contrast .acesso-grid-item {
	background: #000 !important;
	border-color: var(--amarelo, #FFDC47) !important;
}
.contrast .exercicio__titulo,
.contrast .acesso-grid-item__categoria,
.contrast .leitura .titulo1 {
	color: var(--amarelo, #FFDC47) !important;
}
.contrast .exercicio .tabela1 th,
.contrast .leitura .tabela1 th {
	background: #000 !important;
	color: var(--amarelo, #FFDC47) !important;
	border-bottom-color: var(--amarelo, #FFDC47) !important;
}
.contrast .exercicio .tabela1 td,
.contrast .leitura .tabela1 td {
	color: #fff !important;
	border-bottom-color: rgba(255,220,71,.3) !important;
}
.contrast .exercicio .tabela1 tr.exercicio__total td {
	background: rgba(255,220,71,.15) !important;
	color: var(--amarelo, #FFDC47) !important;
	border-top-color: var(--amarelo, #FFDC47) !important;
}