/* =========================================================================
   transparencia-portal.css
   Template visual EXCLUSIVO do Portal da Transparência (TCE-AM) no eContas.
   Fiel à página de referência: https://transparencia-new.tceam.tc.br/adefa
   (Next.js + Tailwind) — paleta azul-900, faixa #3b5998, fundo slate-50,
   cards arredondados (rounded-xl) e rodapé escuro (#1e293b).

   Carregado somente pelo template_transparencia.xhtml (por último, para
   sobrepor o tema modena injetado pelo web.xml). Os overrides de componentes
   ficam sob ".tp-portal" (conteúdo) para não vazar; regras de overlays do
   PrimeFaces (dropdowns/diálogos, que são anexados ao body) ficam ao final.
   ========================================================================= */

:root {
	--tp-brand: #3b5998;          /* faixas social/menu                 */
	--tp-brand-hover: #2d4373;
	--tp-blue-900: #1e3a8a;       /* acento principal (títulos/botões)  */
	--tp-blue-800: #1e40af;
	--tp-orange: #ea580c;         /* orange-600 (link INICIAL)          */
	--color-orange-600: oklch(64.6% .222 41.116);  /* INÍCIO (1º item do breadcrumb) */
	--color-blue-900: oklch(37.9% .146 265.522);   /* demais itens do breadcrumb      */
	--tp-bg: #f8fafc;             /* slate-50 (fundo do conteúdo)       */
	--tp-surface: #ffffff;
	--tp-border: #e2e8f0;         /* slate-200                          */
	--tp-slate-100: #f1f5f9;
	--tp-slate-400: #94a3b8;
	--tp-slate-500: #64748b;
	--tp-slate-600: #475569;
	--tp-slate-800: #1e293b;
	--tp-footer: #1e293b;
	--tp-accent: #facc15;         /* amarelo de destaque                */
	--tp-radius: .75rem;          /* rounded-xl                         */
	--tp-radius-md: .375rem;      /* rounded-md                         */
	--tp-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, "robotoregular", sans-serif;
}

/* ============================== BASE ================================== */

body.tp-body {
	margin: 0;
	background: var(--tp-bg);
	font-family: var(--tp-font);
	color: #334155;
}

#contentWrap { width: 100%; }

/* =========================== CHROME: CABEÇALHO =========================== */

#cabecalho { width: 100%; }

/* Faixa 1 — social */
.tp-topbar {
	background-color: var(--tp-brand);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}
.tp-topbar .tp-social,
.tp-topbar .tp-quicklinks { display: flex; align-items: center; gap: 12px; }
.tp-topbar a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; }
.tp-topbar .tp-social a { transition: transform .2s ease; }
.tp-topbar .tp-social a i { font-size: 15px; line-height: 1; }
.tp-topbar .tp-social a:hover { transform: scale(1.15); }
.tp-topbar .tp-quicklinks a:hover { text-decoration: underline; }
.tp-topbar .tp-sep { opacity: .5; }

/* Faixa 2 — logo */
.tp-logobar {
	background-color: #fff;
	border-bottom: 1px solid var(--tp-slate-100);
	padding: 20px 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.tp-logobar img { max-width: 100%; height: auto; width: 450px; }

/* Faixa 3 — menu */
.tp-menubar {
	background-color: var(--tp-brand);
	color: #fff;
	padding: 8px 2rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 2rem;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	box-sizing: border-box;
}
.tp-menubar a { color: #fff; text-decoration: none; cursor: pointer; transition: color .2s ease; }
.tp-menubar a:hover { color: #bfdbfe; }
.tp-menubar .tp-sep { opacity: .3; font-weight: 300; font-size: 18px; }

/* ======================= CONTEÚDO (área .tp-portal) ==================== */

.tp-portal {
	background-color: var(--tp-bg);
	min-height: 60vh;
	padding: 1.5rem 1rem;
	box-sizing: border-box;
	text-align: left;
	color: #334155;
	font-family: var(--tp-font);
}
.tp-content-inner { width: 100%; }
/* clearfix para o layout baseado em float herdado do eContas */
.tp-portal .Container100::after,
.tp-content-inner::after { content: ""; display: block; clear: both; }

/* Cabeçalho da página (breadcrumb + título + linha) estilo /adefa */
.tp-portal .tp-pagehead { margin-bottom: 1.25rem; }
.tp-portal .tp-page-title {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0;
	color: var(--tp-blue-900);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: -.5px;
	border-bottom: 2px solid var(--tp-blue-900);
	padding-bottom: .75rem;
}
.tp-portal .tp-page-title i { font-size: 26px; color: var(--tp-blue-900); }

/* Breadcrumb — apenas o INÍCIO (1º item) laranja; demais itens azul-900 */
.tp-portal .ui-breadcrumb {
	background: transparent;
	border: 0;
	padding: 0 0 1.25rem 0;
	margin: 0 0 .5rem 0;
	font-size: 13px;
	font-weight: 600;
}
/* padrão: todos os itens em azul-900 */
.tp-portal .ui-breadcrumb .ui-menuitem-link,
.tp-portal .ui-breadcrumb .ui-menuitem-text { color: var(--color-blue-900); text-transform: uppercase; letter-spacing: .3px; }
/* exceção: o primeiro item (INÍCIO) em laranja */
.tp-portal .ui-breadcrumb li:first-child .ui-menuitem-link .ui-menuitem-text,
.tp-portal .ui-breadcrumb li:first-child .ui-menuitem-text { color: var(--color-orange-600); }
.tp-portal .ui-breadcrumb li:first-child .ui-menuitem-link:hover .ui-menuitem-text { color: #c2410c; }
.tp-portal .ui-breadcrumb .ui-breadcrumb-chevron { color: var(--tp-slate-400); margin: 0 6px; }
.tp-portal .ui-breadcrumb li:last-child .ui-menuitem-text { color: var(--color-blue-900); font-weight: 800; }

/* Card container principal */
.tp-portal #div-principal-modulos-novo,
.tp-portal .Card {
	background: var(--tp-surface);
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius);
	box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
	padding: 1.25rem;
	box-sizing: border-box;
}
/* clearfix: os filhos usam .Container100 (float:left); sem isto o card
   colapsa e os campos flutuados vazam para fora da caixa visível */
.tp-portal .Card::after { content: ""; display: block; clear: both; }

/* Painel de filtros (p:panel) */
.tp-portal .ui-panel {
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius);
	overflow: hidden;
	background: var(--tp-surface);
}
.tp-portal .ui-panel .ui-panel-titlebar {
	background: var(--tp-blue-900) !important;
	background-color: var(--tp-blue-900) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: .75rem 1.25rem !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: 15px;
	margin: 0 !important;
}
.tp-portal .ui-panel .ui-panel-titlebar .ui-panel-title { color: #fff !important; font-family: var(--tp-font); }
.tp-portal .ui-panel .ui-panel-content { background: var(--tp-surface); padding: 1.25rem; }

/* Labels dos filtros */
.tp-portal .ui-outputlabel,
.tp-portal label {
	color: var(--tp-blue-900);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .3px;
	margin-bottom: 6px;
}

/* Inputs / selects / calendar */
.tp-portal .ui-inputfield,
.tp-portal .ui-selectonemenu,
.tp-portal .ui-selectcheckboxmenu {
	border: 1px solid var(--tp-border) !important;
	border-radius: var(--tp-radius-md) !important;
	background-color: var(--tp-bg) !important;
	color: #334155 !important;
	font-family: var(--tp-font) !important;
	font-size: 13px !important;
	padding: 10px 12px !important;
	box-sizing: border-box;
	transition: border-color .2s ease, box-shadow .2s ease !important;
}
.tp-portal .ui-selectonemenu { padding: 0 !important; }
.tp-portal .ui-selectonemenu .ui-selectonemenu-label { border: 0 !important; background: transparent !important; padding: 10px 12px !important; font-size: 13px !important; color: #334155 !important; }
.tp-portal .ui-inputfield:focus,
.tp-portal .ui-selectonemenu.ui-state-focus,
.tp-portal .ui-inputfield.ui-state-focus {
	border-color: var(--tp-blue-900) !important;
	box-shadow: 0 0 0 3px rgba(30, 58, 138, .15) !important;
	background: #fff !important;
}

/* Botões — primário azul-900 (rounded-md).
   NÃO incluir .ui-commandlink aqui: p:commandLink é usado como link de texto
   dentro de células de tabela (viraria uma "caixa" azul). */
.tp-portal .ui-button {
	background: var(--tp-blue-900) !important;
	border: 1px solid var(--tp-blue-900) !important;
	color: #fff !important;
	border-radius: var(--tp-radius-md) !important;
	font-weight: 700 !important;
	font-family: var(--tp-font) !important;
	padding: 9px 18px !important;
	transition: background .2s ease, transform .1s ease !important;
	box-shadow: none !important;
}
.tp-portal .ui-button:hover { background: var(--tp-blue-800) !important; border-color: var(--tp-blue-800) !important; }
.tp-portal .ui-button:active { transform: translateY(1px); }
.tp-portal .ui-button .ui-button-text { color: #fff !important; }
.tp-portal .ui-button.ui-state-hover { background: var(--tp-blue-800) !important; }

/* Command links inline (ex.: valores clicáveis nas células) — texto, não botão */
.tp-portal .ui-commandlink,
.tp-portal a.textDesigner {
	background: transparent !important;
	border: 0 !important;
	color: #334155 !important;
	padding: 0 !important;
	font-weight: 400 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-decoration: none;
}
.tp-portal .ui-commandlink:hover,
.tp-portal a.textDesigner:hover { color: var(--tp-blue-900) !important; text-decoration: underline; }

/* Botão verde (Salvar em diálogos) */
.tp-portal .GreenButton.ui-button { background: #16a34a !important; border-color: #16a34a !important; }
.tp-portal .GreenButton.ui-button:hover { background: #15803d !important; }

/* DataTable */
.tp-portal .ui-datatable {
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius);
	overflow: hidden;
	background: var(--tp-surface);
}
.tp-portal .ui-datatable table { border-collapse: collapse; width: 100%; }
.tp-portal .ui-datatable .ui-datatable-header {
	background: var(--tp-slate-100) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--tp-border) !important;
	color: var(--tp-slate-600) !important;
	text-align: left;
}
.tp-portal .ui-datatable thead th {
	background: rgba(30, 58, 138, .06) !important;
	color: var(--tp-blue-900) !important;
	font-weight: 700 !important;
	border-bottom: 2px solid var(--tp-blue-900) !important;
	text-transform: uppercase;
	font-size: 12px;
	padding: 14px 12px !important;
	text-align: left;
}
.tp-portal .ui-datatable tbody td {
	border-bottom: 1px solid var(--tp-border) !important;
	padding: 14px 12px !important;
	font-size: 13.5px;
	color: var(--tp-slate-600);
	font-family: var(--tp-font);
}
.tp-portal .ui-datatable tbody tr.ui-datatable-even { background: #fbfdff; }
.tp-portal .ui-datatable tbody tr.ui-state-hover,
.tp-portal .ui-datatable tbody tr:hover { background: var(--tp-slate-100) !important; }

/* Tabela com larguras rígidas: força o navegador a respeitar os width das
   colunas (table-layout: fixed) e a quebrar textos longos, em vez de expandir
   a tabela além do container e recortar a última coluna. Usar em conjunto com
   reflow="true" e larguras percentuais definidas nas <p:column>. */
.tp-portal .tp-table-fixed table { table-layout: fixed; }
.tp-portal .tp-table-fixed thead th,
.tp-portal .tp-table-fixed tbody td {
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-word;
	/* padding horizontal menor para reduzir o vão entre colunas e ganhar
	   espaço útil na tabela (mantém o vertical de 14px vindo das regras acima) */
	padding-left: 6px !important;
	padding-right: 6px !important;
}

/* Paginação */
.tp-portal .ui-paginator {
	background: var(--tp-surface) !important;
	border: 0 !important;
	border-top: 1px solid var(--tp-border) !important;
	padding: 12px !important;
}
.tp-portal .ui-paginator .ui-paginator-page,
.tp-portal .ui-paginator .ui-paginator-first,
.tp-portal .ui-paginator .ui-paginator-prev,
.tp-portal .ui-paginator .ui-paginator-next,
.tp-portal .ui-paginator .ui-paginator-last {
	background: transparent !important;
	color: var(--tp-slate-600) !important;
	border-radius: var(--tp-radius-md) !important;
	margin: 0 3px !important;
	min-width: 2.2rem;
}
.tp-portal .ui-paginator .ui-paginator-page.ui-state-active {
	background: var(--tp-blue-900) !important;
	color: #fff !important;
}
.tp-portal .ui-paginator .ui-paginator-page:not(.ui-state-active):hover { background: var(--tp-slate-100) !important; }

/* Barra de filtros (ano / tipo UG / botão) — espaçamento + alturas iguais (/adefa) */
.tp-portal .tp-filtros-barra {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
	margin-bottom: 16px;
}
.tp-portal .tp-filtros {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
/* Altura uniforme de selects e botões da barra de filtros */
.tp-portal .tp-filtros .ui-selectonemenu,
.tp-portal .tp-filtros .ui-button {
	height: 40px;
	box-sizing: border-box;
	margin: 0;
	display: inline-flex;
	align-items: center;
}
.tp-portal .tp-filtros .ui-button { justify-content: center; }
.tp-portal .tp-filtros .ui-selectonemenu .ui-selectonemenu-label {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	line-height: 38px !important;
	display: flex;
	align-items: center;
}
.tp-portal .tp-filtros .ui-selectonemenu .ui-selectonemenu-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Tabela simples (HTML puro) com o mesmo visual das datatables do portal */
.tp-portal .tp-simple-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius);
	overflow: hidden;
	background: var(--tp-surface);
}
.tp-portal .tp-simple-table th {
	background: rgba(30, 58, 138, .06);
	color: var(--tp-blue-900);
	font-weight: 700;
	border-bottom: 2px solid var(--tp-blue-900);
	text-transform: uppercase;
	font-size: 12px;
	padding: 14px 12px;
	text-align: left;
}
.tp-portal .tp-simple-table td {
	border-bottom: 1px solid var(--tp-border);
	padding: 14px 12px;
	font-size: 13.5px;
	color: var(--tp-slate-600);
}

/* TabView (abas) */
.tp-portal .ui-tabs { border: 0; background: transparent; }
.tp-portal .ui-tabs .ui-tabs-nav {
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--tp-border);
	padding: 0;
}
.tp-portal .ui-tabs .ui-tabs-nav li {
	background: transparent;
	border: 0;
	border-radius: var(--tp-radius-md) var(--tp-radius-md) 0 0;
	margin-right: 4px;
}
.tp-portal .ui-tabs .ui-tabs-nav li a { color: var(--tp-slate-600); font-weight: 700; }
.tp-portal .ui-tabs .ui-tabs-nav li.ui-state-active { background: var(--tp-blue-900); }
.tp-portal .ui-tabs .ui-tabs-nav li.ui-state-active a { color: #fff; }
.tp-portal .ui-tabs .ui-tabs-panels { background: transparent; border: 0; }
.tp-portal .ui-tabs .ui-tabs-panel { background: var(--tp-surface); }

/* Mensagens */
.tp-portal .ui-messages { border-radius: var(--tp-radius-md); }

/* ============================ CHROME: RODAPÉ ============================ */

#rodape { width: 100%; }

/* Faixa de selos — dois grupos titulados, empilhados (estilo /adefa) */
.tp-selos { background: #fff; border-top: 1px solid var(--tp-border); padding: 3rem 1.5rem; }
.tp-selos .tp-selos-inner {
	max-width: 1120px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 3rem;
}
.tp-selos .tp-selos-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
}
.tp-selos .tp-selos-title { display: flex; align-items: center; gap: 1rem; width: 100%; max-width: 900px; }
.tp-selos .tp-selos-title span:not(.tp-rule) {
	color: var(--tp-blue-900);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .2em;
	white-space: nowrap;
}
.tp-selos .tp-selos-title-secondary span:not(.tp-rule) { color: var(--tp-slate-500); }
.tp-selos .tp-selos-title .tp-rule { height: 1px; background: var(--tp-border); flex: 1; }
.tp-selos .tp-selos-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem 4rem; }
.tp-selos .tp-selos-grid img { width: 96px; height: auto; transition: transform .4s ease; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .08)); }
.tp-selos .tp-selos-grid a:hover img { transform: scale(1.1); }

/* Bloco escuro */
.tp-footer { background: var(--tp-footer); color: #cbd5e1; padding: 3.5rem 1.5rem 1.5rem; }
.tp-footer .tp-footer-cols { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; text-align: left; }
.tp-footer h3 { color: #fff; font-weight: 700; font-size: 18px; margin: 0 0 .75rem; display: flex; align-items: center; gap: .75rem; }
.tp-footer h3 .tp-bar { width: 6px; height: 32px; background: var(--tp-brand); display: inline-block; }
.tp-footer h4 { color: #fff; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid #334155; padding-bottom: .5rem; margin: 0 0 1rem; }
.tp-footer p, .tp-footer a { font-size: 14px; line-height: 1.5; }
.tp-footer a { color: #cbd5e1; text-decoration: none; }
.tp-footer a:hover { color: #fff; }
.tp-footer .tp-institucional-link { color: #60a5fa; font-weight: 600; text-transform: uppercase; font-size: 12px; letter-spacing: .05em; }
.tp-footer .tp-contato-item { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.tp-footer .tp-contato-item i { color: var(--tp-brand); font-size: 18px; margin-top: 2px; }
.tp-footer .tp-contato-item span.tp-label { display: block; color: #f1f5f9; font-weight: 500; }

.tp-credito { max-width: 1120px; margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid #334155; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.tp-credito .tp-copy { font-size: 10px; text-transform: uppercase; letter-spacing: .15em; opacity: .5; }
.tp-credito .tp-dev { font-size: 9px; font-weight: 700; letter-spacing: -.02em; opacity: .6; }

/* ============ UTILITÁRIOS DE LAYOUT (portados do core-layout.css) ======= */
/* Necessários porque o template do portal não carrega o core-layout.css.   */

.tp-portal .Container100 { width: 100%; float: left; }
.tp-portal .Container50 { width: 50%; float: left; }
.tp-portal .Responsive100 { }
.tp-portal .Responsive50 { }
.tp-portal .Responsive { }
.tp-portal .ContainerIndent { display: block; margin: 0 auto; padding: 2px; }
.tp-portal .FontRobotoLight { font-family: var(--tp-font); font-weight: 300; }
.tp-portal .FontRobotoRegular { font-family: var(--tp-font); font-weight: 400; }
.tp-portal .ShowOnDesktop { display: inline-block; }
.tp-portal .ShowOnMobile { display: none; }
/* Classes de cor herdadas do modena-layout.css (não carregado pelo portal) */
.tp-portal .White { color: #ffffff; }
.tp-portal .BoldGray { color: #546e7a; }
.tp-portal .LeadenGreen { color: var(--color-blue-900); }  /* labels do portal: azul-900 (antes verde #26a69a) */
.tp-portal .EmptyBox5 { display: block; width: 100%; height: 5px; overflow: hidden; }
.tp-portal .EmptyBox10 { display: block; width: 100%; height: 10px; overflow: hidden; }
.tp-portal .EmptyBox20 { display: block; width: 100%; height: 20px; overflow: hidden; }
.tp-portal .EmptyBox30 { display: block; width: 100%; height: 30px; overflow: hidden; }
.tp-portal .Fright { float: right; }
.tp-portal .Wid50 { width: 50%; }
.tp-portal .Fs16 { font-size: 16px !important; }
.tp-portal .Fs18 { font-size: 18px !important; }
.tp-portal .Separator { display: block; width: 100%; height: 1px; background: var(--tp-border); margin: 20px 0; clear: both; }

/* ================================ OVERLAYS ============================== */
/* PrimeFaces anexa estes elementos ao <body> (fora de .tp-portal).         */

.ui-selectonemenu-panel .ui-selectonemenu-item { font-family: var(--tp-font); font-size: 13px; }
.ui-selectonemenu-panel .ui-selectonemenu-item.ui-state-highlight { background: var(--tp-blue-900); color: #fff; }
.ui-dialog .ui-dialog-titlebar { background: var(--tp-blue-900); color: #fff; border: 0; }
.ui-dialog .ui-dialog-titlebar .ui-dialog-title { color: #fff; font-weight: 700; }

/* ===================== TABELAS DE VALORES (DETALHE) ==================== */
/* Grupos Valor empenho / Liquidação / Pagamento em despesa_detalhe.       */

/* Três cards lado a lado, todos com a mesma altura (flex + stretch). */
.tp-portal .tp-valores-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: stretch;
}
.tp-portal .tp-valores-card { flex: 1 1 0; min-width: 260px; display: flex; }
.tp-portal .tp-valores-card > .Card { width: 100%; margin: 0; }

.tp-portal .tp-valores { width: 100%; border-collapse: collapse; margin: 0; }
.tp-portal .tp-valores td {
	border: 1px solid var(--tp-border);
	padding: 8px 12px;
	text-align: left;
	vertical-align: middle;
}
.tp-portal .tp-valores td:last-child { text-align: right; white-space: nowrap; }

/* Rótulo "Final" com ícone de informação */
.tp-portal .tp-valor-label { display: inline-flex; align-items: center; gap: 6px; }
.tp-portal .tp-info-icon { color: var(--tp-blue-900); cursor: help; font-size: 14px; }

@media (max-width: 768px) {
	.tp-portal .tp-valores-card { flex: 1 1 100%; }
}

/* ============================= RESPONSIVO ============================== */

@media (max-width: 992px) {
	.tp-portal .Responsive50 { width: 100%; float: left; }
}

@media (max-width: 768px) {
	.tp-topbar { flex-direction: column; gap: 8px; padding: 8px 1rem; }
	.tp-menubar { padding: 8px 1rem; gap: 6px 1rem; }
	.tp-menubar .tp-sep { display: none; }
	.tp-logobar img { width: 300px; }
	.tp-portal .Responsive100 { width: 100%; float: left; }
	.tp-portal .Container50 { width: 100%; float: left; }
	.tp-portal .ShowOnDesktop { display: none; }
	.tp-portal .ShowOnMobile { display: inline-block; }
	.tp-footer .tp-footer-cols { grid-template-columns: 1fr; gap: 2rem; }
	.tp-credito { flex-direction: column; text-align: center; }
	.tp-selos .tp-selos-grid { gap: 1.5rem 2rem; }
	.tp-selos .tp-selos-grid img { width: 80px; }
}