/* ============================================================================
   institucional-municipal.css — Shell do Portal Municipal
   ----------------------------------------------------------------------------
   Cabeçalho, rodapé e layout-base compartilhados pelas páginas voltadas ao
   município (cidadao.html e gestao.html). Depende de bootstrap.css (tokens X Byte).
   ========================================================================== */

body { background: var(--xb-bg); }

.mp-container { max-width: 1080px; }

/* ---- Cabeçalho do portal municipal ---- */
.mp-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--xb-line);
}
.mp-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; }

/* Brasão / identidade do município (placeholder até o cliente enviar) */
.mp-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.mp-crest {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  background: var(--xb-blue-050); border: 1px solid var(--xb-blue-100);
  display: grid; place-items: center; color: var(--xb-navy-700); font-size: 1.2rem;
}
.mp-brand .mp-city { font-weight: 700; color: var(--xb-ink-900); font-size: 1.02rem; line-height: 1.1; letter-spacing: -.01em; }
.mp-brand .mp-sub { font-size: .74rem; color: var(--xb-slate-500); }

/* selo Protocoli discreto */
.mp-powered { display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; color: var(--xb-slate-400); font-family: var(--xb-font-mono); }
.mp-powered .dot { width: 16px; height: 16px; border-radius: 4px; background: var(--xb-navy-800); display: inline-grid; place-items: center; color: #fff; font-size: .6rem; }

.mp-actions { display: flex; align-items: center; gap: .6rem; }

/* navegação do portal (cidadão) */
.mp-nav { display: flex; gap: .3rem; }
.mp-nav a {
  font-size: .9rem; font-weight: 500; color: var(--xb-slate-600);
  padding: .45rem .8rem; border-radius: 9px; text-decoration: none; transition: all .15s ease;
}
.mp-nav a:hover { background: var(--xb-blue-050); color: var(--xb-navy-800); }
.mp-nav a.active { background: var(--xb-navy-800); color: #fff; }

/* ---- Rodapé ---- */
.mp-footer { border-top: 1px solid var(--xb-line); background: #fff; padding: 2rem 0; margin-top: 3rem; }
.mp-footer .row-1 { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.mp-footer .links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.mp-footer a { color: var(--xb-slate-600); font-size: .88rem; text-decoration: none; }
.mp-footer a:hover { color: var(--xb-navy-800); }
.mp-footer .copy { font-size: .8rem; color: var(--xb-slate-400); margin-top: 1rem; }
.mp-footer .copy b { color: var(--xb-slate-600); font-weight: 600; }

/* ---- Status chips (compartilhados portal) ---- */
.st { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 600; padding: .3rem .65rem; border-radius: 50rem; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-recebida { color: var(--xb-st-recebida); background: rgba(100,116,139,.12); }
.st-analise { color: var(--xb-st-analise); background: rgba(183,121,31,.12); }
.st-programada { color: var(--xb-st-programada); background: rgba(47,120,181,.12); }
.st-execucao { color: var(--xb-st-execucao); background: rgba(15,61,99,.12); }
.st-resolvida { color: var(--xb-st-resolvida); background: var(--xb-green-100); }

@media (max-width: 575.98px) {
  .mp-powered span.txt { display: none; }
  .mp-brand .mp-sub { display: none; }
}