/* --------------------------------------------------------------------------
   Estrutura compartilhada: containers, cabeçalhos e rodapé.
   -------------------------------------------------------------------------- */
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.page-shell { padding: 24px 0 48px; }
.surface-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(220, 229, 239, 0.96);
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(12px);
}
.site-header__inner { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.public-brand, .admin-brand { display: inline-flex; align-items: center; gap: 13px; min-width: 0; }
.public-brand__text, .admin-brand > span:last-child { display: grid; gap: 2px; min-width: 0; }
.public-brand strong, .admin-brand strong { color: var(--color-primary-900); font-size: 1rem; }
.public-brand small, .admin-brand small { color: var(--color-muted); font-size: 0.79rem; }
.brand-mark {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 11px;
    color: #fff;
    font-weight: 900;
    letter-spacing: -0.04em;
    background: linear-gradient(145deg, var(--color-primary-900), var(--color-primary-600));
    box-shadow: 0 6px 16px rgba(13, 71, 143, 0.14);
}
.brand-mark--image {
    width: auto;
    min-width: 58px;
    max-width: 70px;
    height: 34px;
    flex: 0 0 auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.site-footer { border-top: 1px solid var(--color-border); background: #ffffff; }
.site-footer .container { min-height: 70px; display: flex; align-items: center; }
.site-footer p { margin: 0; color: #7b8897; font-size: 0.84rem; line-height: 1.45; }


/* Faixa institucional multicolorida inspirada na identidade visual municipal. */
.municipal-ribbon {
    width: 100%;
    height: 5px;
    background: linear-gradient(
        to right,
        #004a99 0%,
        #004a99 20%,
        #009541 20%,
        #009541 40%,
        #fde910 40%,
        #fde910 60%,
        #e30613 60%,
        #e30613 80%,
        #002b5c 80%,
        #002b5c 100%
    );
}

/* Navegação compartilhada das páginas públicas. */
.public-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.public-nav { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid #d8e1ea; border-radius: 11px; background: #f7f9fc; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.public-nav__link { padding: 7px 12px; border-radius: 8px; color: #4a5a6d; font-size: .78rem; font-weight: 750; transition: color var(--transition), background var(--transition), box-shadow var(--transition); }
.public-nav__link:hover { color: var(--color-primary-900); background: #fff; }
.public-nav__link.is-active { color: var(--color-primary-900); background: #fff; box-shadow: 0 1px 3px rgba(20, 32, 51, .08); }
.site-footer__inner { justify-content: space-between; gap: 20px; align-items: center; }
.site-footer__text { flex: 1; }
.site-footer__link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #d7e0ea;
    border-radius: 10px;
    background: #f8fafc;
    color: var(--color-primary-800);
    font-size: .82rem;
    font-weight: 750;
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition);
}
.site-footer__link:hover { background: #f2f6fa; border-color: #cfdbe7; }

.site-header--official {
    border-bottom: 1px solid #dbe3ec;
    background: rgba(255,255,255,.97);
}

.public-brand-wrap {
    display: block;
}

.public-brand__tag {
    color: #788799;
    font-size: .73rem;
}


.municipal-ribbon { position: relative; }
.municipal-ribbon::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    height: 2px;
    background: #3c3c3c;
}