/* Camada da E-Transparência pública (layout `transparencia`) sobre o núcleo
   menu_topo.css: marca com a Lei de Acesso à Informação, ações do cabeçalho (alto
   contraste, voltar ao portal), barra de título com caminho e controles, hero da página
   inicial. Prefixo tp-. O tema do site (public/front) segue carregado para o conteúdo
   das telas; as regras abaixo neutralizam o que ele aplica de forma global. */

/* O tema define fonte, tamanhos de título e cor de link globais. */
body.tp { font-family: "Open Sans", system-ui, sans-serif; }
.tp .mt-topo a, .tp .mt-faixa a { text-decoration: none; }

/* ── Marca ─────────────────────────────────────────────────────────── */
.tp-marca-texto { display: grid; line-height: 1.15; }
.tp-marca-texto small {
  font-size: 11px; font-weight: 600; letter-spacing: .02em; opacity: .8; white-space: nowrap;
}

/* ── Ações do cabeçalho ────────────────────────────────────────────── */
.tp-acao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px;
  padding: 0 12px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px;
  background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.tp-acao:hover { background: rgba(255, 255, 255, .1); color: inherit; }
.is-rolado .tp-acao, html:not(.mt-js) .tp-acao { border-color: var(--mt-borda); }
.is-rolado .tp-acao:hover, html:not(.mt-js) .tp-acao:hover { background: #eef2f8; }
.tp-acao[aria-pressed="true"] { background: var(--mt-ouro); border-color: var(--mt-ouro); color: var(--mt-marinho-escuro); }

/* "Voltar ao portal" dentro da lista do menu só aparece na gaveta. */
.tp-so-gaveta { display: none; }

/* ── Barra de título sobre a faixa ─────────────────────────────────── */
.tp-titulo {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
}
.tp-titulo h1 {
  margin: 0 0 6px; color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
}
.tp-caminho .breadcrumb {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; background: none; font-size: 13px;
}
.tp-caminho .breadcrumb-item,
.tp-caminho .breadcrumb-item a,
.tp-caminho .breadcrumb-item.active { color: rgba(255, 255, 255, .82); }
.tp-caminho .breadcrumb-item a:hover { color: #fff; text-decoration: underline; }
.tp-caminho .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .55); content: "›"; padding: 0 6px 0 2px; }
.tp-caminho .breadcrumb-item.active { color: #fff; font-weight: 600; }

/* Controles da página (anos, consulta avançada, voltar) sobre a faixa. */
.tp-titulo-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tp-titulo-acoes .year-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tp-titulo-acoes .year-pill,
.tp-titulo-acoes .et-btn {
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); color: #fff;
}
.tp-titulo-acoes .year-pill:hover,
.tp-titulo-acoes .et-btn:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.tp-titulo-acoes .year-pill.active { background: var(--mt-ouro); border-color: var(--mt-ouro); color: var(--mt-marinho-escuro); }

/* ── Hero da página inicial (sobre a faixa) ────────────────────────── */
.tp-hero { padding-top: 28px; }
.tp-hero .et-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.tp-hero .et-hero-kicker { color: var(--mt-ouro); }
.tp-hero h1 { margin: 6px 0 8px; color: #fff; font-size: 32px; font-weight: 800; line-height: 1.15; }
.tp-hero p { color: rgba(255, 255, 255, .85); max-width: 760px; }

/* ── Conteúdo ──────────────────────────────────────────────────────── */
/* As telas trazem o próprio .container do Bootstrap; dentro do mt-container ele não
   pode somar mais margens/padding nem limitar a largura de novo. */
.tp .mt-conteudo .container { max-width: none; padding-left: 0; padding-right: 0; }
.tp-flash { border-radius: var(--mt-raio); }
/* Tabelas e listas largas rolam no próprio quadro, nunca a página. */
.tp .mt-conteudo .table-responsive,
.tp .mt-conteudo .et-card:has(table) { overflow-x: auto; }

/* Entre 1200 e 1440px: some o texto da marca e o rótulo do "Voltar ao portal". */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .tp-voltar span { display: none; }
}

/* ── Gaveta (abaixo de 1200px) ─────────────────────────────────────── */
@media (max-width: 1199.98px) {
  .tp-voltar { display: none; }
  .tp-so-gaveta { display: block; border-top: 1px solid var(--mt-borda); margin-top: 6px; padding-top: 6px; }
  .tp-hero .et-hero-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
  .tp-titulo h1 { font-size: 22px; }
  .tp-hero h1 { font-size: 26px; }
}

/* ── Alto contraste (classe "contrast" no body, do contrast.js) ────── */
body.contrast .mt-faixa { background: #000 !important; border-bottom-color: #ff0; }
body.contrast .mt-topo, body.contrast .mt-topo.is-rolado { background: #000 !important; color: #fff !important; }
body.contrast .mt-menu-link, body.contrast .mt-grupo-titulo, body.contrast .tp-acao { color: #ff0 !important; }
body.contrast .mt-grupo-painel { background: #000; border-color: #ff0; }
body.contrast .mt-grupo-item { color: #ff0 !important; }

/* ── Impressão ─────────────────────────────────────────────────────── */
@media print {
  .tp-titulo h1, .tp-caminho .breadcrumb-item, .tp-caminho .breadcrumb-item a { color: #000 !important; }
  .tp-titulo-acoes { display: none; }
}

/* Filtros que abrem o conteúdo (ex.: situação das licitações): em card, como o resto —
   solto, o primeiro elemento cairia sobre a borda da faixa. */
.tp .mt-conteudo .et-filters {
  padding: 12px 16px; background: #fff; border: 1px solid var(--mt-borda); border-radius: var(--mt-raio);
  box-shadow: var(--mt-sombra);
}

/* ── Busca ─────────────────────────────────────────────────────────── */
.tp-busca { width: min(560px, 100%); margin: 0; }
.tp-busca-aviso { padding: 20px 24px; }
.tp-busca-aviso p { margin: 0; }
.tp-busca-resumo {
  margin: 0 0 16px; padding: 12px 16px; background: #fff; border: 1px solid var(--mt-borda);
  border-radius: var(--mt-raio); box-shadow: var(--mt-sombra);
}
.tp-busca-total {
  margin-left: auto; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: .8rem;
}
.tp-busca-lista { list-style: none; margin: 0; padding: 0; }
.tp-busca-lista li + li { border-top: 1px solid var(--mt-borda); }
.tp-busca-lista a { display: grid; gap: 2px; padding: 12px 20px; color: var(--mt-texto); text-decoration: none; }
.tp-busca-lista a:hover { background: #f4f7fb; }
.tp-busca-lista strong { color: var(--mt-marinho); }
.tp-busca-lista span { color: var(--mt-texto-suave); font-size: .92rem; overflow-wrap: anywhere; }
.tp-busca-mais { margin: 0; padding: 10px 20px; font-size: .88rem; color: var(--mt-texto-suave); border-top: 1px solid var(--mt-borda); }