.sem-link {
    text-decoration: none !important;
    color: #676A6E !important;
    border: 0px !important;
    outline: none !important;
}

.linha-preta {
    border-top: 2px solid #8c8b8b;
}

/*tooltipo*/
.titulo-inicio {
    position: relative;
    display: inline-block;
}

.titulo-inicio .titulo-inicio-text {
    visibility: hidden;
    width: 400px;
    background-color: #FFDC00;
    color: #000000;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 0;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}

.titulo-inicio .titulo-inicio-text::after {
    content: "";
    position: absolute;
    top: 100%;

}

.titulo-inicio:hover .titulo-inicio-text {
    visibility: visible;
    opacity: 1;
}

.titulo-inicio-direita {
    position: relative;
    display: inline-block;
}

.titulo-inicio-direita .titulo-inicio-direita-text {
    visibility: hidden;
    width: 400px;
    background-color: #FFDC00;
    color: #000000;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    margin-left: -260px;
    opacity: 0;
    transition: opacity 1s;
}

.titulo-inicio-direita .titulo-inicio-direita-text::after {
    content: "";
    position: absolute;
    top: 100%;
}

.titulo-inicio-direita:hover .titulo-inicio-direita-text {
    visibility: visible;
    opacity: 1;
}

.mapa-site > li > a {
    color: #97989a;
    font-weight: 600;
}
.mapa-site > li {
    display: block;
    margin-bottom: 10px;
}

.info-legal {
    background-color: #dadbdb;
    color: #676a6c;
    padding: 25px;
    font-size: 14px;
}

.item-menu-wp{
    font-size: 12px!important;
}

div.tooltips-vantagem {
    position: relative;
    display: inline;
    cursor: pointer;
}
div.tooltips-vantagem span {
    position: absolute;
    width:300px;
    color: #178BFF;
    background: #b1b1b1;
    text-align: center;
    visibility: hidden;
    border-radius: 17px;
    z-index: 999999999999999999999999999999999999!important;
}
div.tooltips-vantagem span:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 35%;
    margin-left: -8px;
    width: 0; height: 0;
    border-bottom: 8px solid #178BFF;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    z-index: 999999999999999999999999999999999999!important;
}
div:hover.tooltips-vantagem span {
    visibility: visible;
    top: 30px;
    left: 35%;
    margin-left: -100px;
    z-index: 999999999999999999999999999999999999!important;
}


div.tooltips-descontos {
    position: relative;
    display: inline;
    cursor: pointer;
}
div.tooltips-descontos span {
    position: absolute;
    width:250px;
    color: #178BFF;
    background: #b1b1b1;
    text-align: center;
    visibility: hidden;
    border-radius: 17px;
    z-index: 999999999999999999999999999999999999!important;
}
div.tooltips-descontos span:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 60%;
    margin-left: -8px;
    width: 0; height: 0;
    border-bottom: 8px solid #178BFF;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    z-index: 999999999999999999999999999999999999!important;
}
div:hover.tooltips-descontos span {
    visibility: visible;
    top: 30px;
    left: 35%;
    margin-left: -150px;
    z-index: 999999999999999999999999999999999999!important;
}

#btnPluginVLibras {
    display: none !important;
}

.regular-font-size {
    font-size: 12px;
}

.minimum-font-size {
    font-size: 10px;
}

.maximum-font-size {
    font-size: 16px;
}

.navbar-nav .nav-item {
    padding: 0;
}

.navbar-nav .nav-item .btn-link {
    padding: 20px;
}

/* ============================================================
   Shim FontAwesome 4 → 5: nomes renomeados continuam funcionando
   sem precisar mexer no banco de dados. Force solid (weight 900).
   ============================================================ */
.fa-file-text,
.fa-file-text-o {
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
}
.fa-file-text::before,
.fa-file-text-o::before { content: "\f15c"; }  /* fa-file-alt */

.fa-pencil::before,
.fa-pencil-square-o::before { content: "\f303"; }  /* fa-pencil-alt */

.fa-trash-o::before { content: "\f2ed"; }  /* fa-trash-alt */

.fa-sign-out::before { content: "\f2f5"; }  /* fa-sign-out-alt */
.fa-sign-in::before { content: "\f2f6"; }  /* fa-sign-in-alt */

.fa-external-link::before { content: "\f35d"; }  /* fa-external-link-alt */

.fa-clipboard-list::before { content: "\f46d"; }
.fa-tachometer::before { content: "\f3fd"; }  /* fa-tachometer-alt */

.fa-close::before,
.fa-remove::before,
.fa-times::before { content: "\f00d"; }

/* Garante peso solid para esses aliases */
.fa-pencil, .fa-pencil-square-o,
.fa-trash-o,
.fa-sign-out, .fa-sign-in,
.fa-external-link,
.fa-tachometer,
.fa-edit {
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
}

/* ============================================================
   Modernização do index (escopo: .home-moderna)
   ============================================================ */
.home-moderna {
    background: #f5f7fb;
    min-height: 100vh;
}

.home-moderna .navbar-moderno {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    box-shadow: 0 2px 12px rgba(15, 32, 80, 0.08);
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid rgba(15, 32, 80, 0.06);
}

.home-moderna .navbar-moderno .marca {
    display: flex;
    align-items: center;
    gap: 16px;
}

.home-moderna .navbar-moderno .marca img {
    max-height: 64px;
    width: auto;
}

.home-moderna .navbar-moderno .marca .titulo-prefeitura {
    line-height: 1.2;
}

.home-moderna .navbar-moderno .marca .titulo-prefeitura .nome {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a2238;
    margin: 0;
}

.home-moderna .navbar-moderno .marca .titulo-prefeitura .subtitulo {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #5a6fa1;
    margin: 0;
}

.home-moderna .navbar-moderno .acessibilidade-bar .btn-link {
    color: #3a4a78 !important;
    padding: 8px 10px !important;
    border-radius: 8px;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.home-moderna .navbar-moderno .acessibilidade-bar .btn-link:hover {
    background: #e8eefc;
    color: #1656d4 !important;
    transform: translateY(-1px);
}

/* HERO ------------------------------------------------------- */
.home-moderna .hero {
    position: relative;
    margin-top: 80px;
    padding: 28px 24px 48px;
    background: linear-gradient(135deg, #1f4cd6 0%, #2a73ff 50%, #3aa0ff 100%);
    color: #ffffff;
    overflow: hidden;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 8px 24px rgba(31, 76, 214, 0.16);
}

.home-moderna .hero::before,
.home-moderna .hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.home-moderna .hero::before {
    width: 220px; height: 220px;
    top: -100px; right: -60px;
}

.home-moderna .hero::after {
    width: 160px; height: 160px;
    bottom: -60px; left: -40px;
    background: rgba(255, 255, 255, 0.06);
}

.home-moderna .hero .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.home-moderna .hero .hero-content h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: -0.3px;
}

.home-moderna .hero .hero-content p.lead {
    font-size: 0.9rem;
    opacity: 0.92;
    margin-bottom: 18px;
}

/* Busca destacada ------------------------------------------- */
.home-moderna .busca-hero {
    background: #ffffff;
    padding: 5px;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(15, 32, 80, 0.14);
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 560px;
    margin: 0 auto;
}

.home-moderna .busca-hero .ui-inputtext,
.home-moderna .busca-hero input.ui-inputtext {
    flex: 1;
    border: none !important;
    box-shadow: none !important;
    height: 38px !important;
    font-size: 0.9rem;
    padding: 0 12px;
    background: transparent;
    color: #1a2238;
    width: 100% !important;
}

.home-moderna .busca-hero .ui-inputtext:focus {
    outline: none !important;
    box-shadow: none !important;
}

.home-moderna .busca-hero .btn-buscar {
    background: linear-gradient(135deg, #1f4cd6, #2a73ff);
    color: #fff;
    border: none;
    padding: 0 18px;
    height: 38px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.home-moderna .busca-hero .btn-buscar:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(31, 76, 214, 0.35);
    filter: brightness(1.05);
}

.home-moderna .busca-hero .btn-buscar i { font-size: 1rem; }

/* Grid de serviços ------------------------------------------ */
.home-moderna .secao-servicos {
    padding: 32px 0 16px;
}

.home-moderna .secao-servicos .secao-titulo {
    text-align: center;
    color: #1a2238;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.home-moderna .secao-servicos .secao-subtitulo {
    text-align: center;
    color: #5a6fa1;
    margin-bottom: 22px;
    font-size: 0.85rem;
}

.home-moderna .coluna-servico {
    display: flex;
    margin-bottom: 16px;
}

.home-moderna .card-servico {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(15, 32, 80, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
    width: 100%;
    border: 1px solid rgba(15, 32, 80, 0.04);
    text-align: left;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    cursor: pointer;
}

.home-moderna .card-servico:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 32, 80, 0.12);
}

/* Header horizontal: ícone + título lado a lado */
.home-moderna .card-servico .card-servico-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.home-moderna .card-servico .link-card {
    margin-top: auto;
    padding-top: 14px;
    margin-left: 0;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #1656d4 !important;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none !important;
    transition: gap 0.18s ease, color 0.18s ease;
    border-top: 1px solid rgba(15, 32, 80, 0.06);
    margin-top: 14px;
    padding: 12px 0 2px;
}

/* Mantém o "Acessar" colado ao rodapé do card */
.home-moderna .card-servico {
    justify-content: flex-start;
}

.home-moderna .card-servico .descricao-servico,
.home-moderna .card-servico .descricao-servico-texto {
    flex: 1 1 auto;
}

.home-moderna .card-servico .link-card:hover {
    gap: 12px;
    color: #0d3da3 !important;
}

.home-moderna .card-servico .link-card i { font-size: 0.7rem; }

.home-moderna .card-outras .link-card,
.home-moderna .card-outras .link-card-claro {
    color: #ffffff !important;
    border-top-color: rgba(255, 255, 255, 0.18);
}

.home-moderna .card-outras .link-card:hover {
    color: #d6e4ff !important;
}

.home-moderna .card-servico .descricao-servico {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 2px;
}

.home-moderna .card-servico .descricao-servico br { display: none; }

.home-moderna .card-servico .descricao-servico a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    background: #eef3ff;
    color: #1656d4;
    border: 1px solid rgba(22, 86, 212, 0.12);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none !important;
    line-height: 1.2;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
}

.home-moderna .card-servico .descricao-servico a::after {
    content: "\f054"; /* fa-chevron-right */
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 0.65rem;
    opacity: 0.7;
    transition: transform 0.18s ease;
}

.home-moderna .card-servico .descricao-servico a:hover {
    background: #1656d4;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(22, 86, 212, 0.25);
}

.home-moderna .card-servico .descricao-servico a:hover::after {
    transform: translateX(2px);
    opacity: 1;
}

/* Quando o link já tem um <i> antes do texto, esconde o chevron extra */
.home-moderna .card-servico .descricao-servico a > i:first-child + *::after,
.home-moderna .card-servico .descricao-servico a:has(> i) {
    /* mantém alinhamento — o ícone original do link aparece à esquerda */
}

/* Card escuro: variante de botão sobre fundo escuro */
.home-moderna .card-outras .descricao-servico a {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.22);
}

.home-moderna .card-outras .descricao-servico a:hover {
    background: #ffffff;
    color: #1a2238;
}

.home-moderna .card-servico .icone-servico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(15, 32, 80, 0.14);
    flex-shrink: 0;
}

/* Garante FontAwesome solid (peso 900) nos ícones dos cards do home */
.home-moderna .card-servico .icone-servico i,
.home-moderna .card-servico .icone-servico i.fa,
.home-moderna .card-servico .icone-servico i.fas {
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
}

/* Cores reutilizando paleta material-dashboard dinâmica       */
.home-moderna .card-servico .icone-servico.card-header-primary  { background: linear-gradient(135deg, #6a78d1, #4051b5); }
.home-moderna .card-servico .icone-servico.card-header-info     { background: linear-gradient(135deg, #00bcd4, #0097a7); }
.home-moderna .card-servico .icone-servico.card-header-success  { background: linear-gradient(135deg, #4caf50, #2e7d32); }
.home-moderna .card-servico .icone-servico.card-header-warning  { background: linear-gradient(135deg, #ffa726, #fb8c00); }
.home-moderna .card-servico .icone-servico.card-header-danger   { background: linear-gradient(135deg, #ef5350, #c62828); }
.home-moderna .card-servico .icone-servico.card-header-rose     { background: linear-gradient(135deg, #ec407a, #ad1457); }

.home-moderna .card-servico h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a2238;
    margin: 0;
    line-height: 1.25;
    flex: 1;
}

.home-moderna .card-servico .descricao-servico-texto {
    font-size: 0.85rem;
    color: #5a6fa1;
    line-height: 1.5;
}

/* Card "outras consultas" -------------------------------- */
.home-moderna .card-outras {
    background: linear-gradient(135deg, #1a2238, #2a3a6a);
    color: #fff;
}
.home-moderna .card-outras h3,
.home-moderna .card-outras .descricao-servico { color: #fff; }
.home-moderna .card-outras .icone-servico { background: rgba(255,255,255,0.18); box-shadow: none; }
.home-moderna .card-outras .link-card,
.home-moderna .card-outras .link-card-claro { color: #ffffff; }
.home-moderna .card-outras .descricao-servico a { color: #ffffff; }

/* Contato --------------------------------------------------- */
.home-moderna .secao-contato {
    background: #ffffff;
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 6px 18px rgba(15, 32, 80, 0.06);
    margin: 24px 0;
}

.home-moderna .secao-contato .bloco-contato {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.home-moderna .secao-contato .bloco-contato .icone-bloco {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: #e8eefc;
    color: #1656d4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.home-moderna .secao-contato h4 {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
    color: #1a2238;
}

.home-moderna .secao-contato ul {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #3a4a78;
    font-size: 0.92rem;
    line-height: 1.7;
}

.home-moderna .secao-contato ul li i {
    width: 18px;
    color: #1656d4;
    margin-right: 6px;
}

.home-moderna .secao-contato ul li a {
    color: #1656d4;
    text-decoration: none;
}
.home-moderna .secao-contato ul li a:hover { text-decoration: underline; }

/* Info legal ------------------------------------------------ */
.home-moderna .info-legal-moderna {
    background: #ffffff;
    border-radius: 18px;
    padding: 28px 32px;
    color: #3a4a78;
    font-size: 0.92rem;
    line-height: 1.6;
    box-shadow: 0 6px 18px rgba(15, 32, 80, 0.06);
    margin: 24px 0 32px;
}

/* ============================================================
   Tela de Consulta moderna (escopo: .tela-moderna)
   ============================================================ */
.tela-moderna .filtros-card {
    background: #ffffff;
    border: 1px solid rgba(15, 32, 80, 0.08);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 32, 80, 0.04);
    margin-bottom: 20px;
    overflow: hidden;
}

.tela-moderna .filtros-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: linear-gradient(90deg, #f6f9ff 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(15, 32, 80, 0.06);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.18s ease;
}

.tela-moderna .filtros-header:hover {
    background: #eef3ff;
}

.tela-moderna .filtros-header .filtros-titulo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #1a2238;
    font-size: 0.95rem;
}

.tela-moderna .filtros-header .filtros-titulo i {
    color: #1656d4;
    font-size: 0.85rem;
}

.tela-moderna .filtros-header .filtros-toggle i {
    color: #5a6fa1;
    font-size: 0.85rem;
    transition: transform 0.25s ease;
}

.tela-moderna .filtros-header[aria-expanded="false"] .filtros-toggle i {
    transform: rotate(180deg);
}

.tela-moderna .filtros-body {
    padding: 18px 18px 6px;
}

.tela-moderna .filtros-grid {
    margin: 0 -10px;
}

.tela-moderna .campo-filtro {
    padding: 0 10px 14px;
    display: flex;
    flex-direction: column;
}

.tela-moderna .campo-filtro label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    color: #5a6fa1;
    margin-bottom: 6px;
}

.tela-moderna .campo-filtro .form-control,
.tela-moderna .campo-filtro select.form-control,
.tela-moderna .campo-filtro input.form-control {
    height: 38px;
    padding: 6px 12px;
    border: 1px solid rgba(15, 32, 80, 0.12);
    border-radius: 8px;
    background: #fff;
    color: #1a2238;
    font-size: 0.9rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    box-shadow: none;
    width: 100%;
    box-sizing: border-box;
}

.tela-moderna .campo-filtro .form-control:focus,
.tela-moderna .campo-filtro input.form-control:focus,
.tela-moderna .campo-filtro select.form-control:focus {
    border-color: #1656d4;
    box-shadow: 0 0 0 3px rgba(22, 86, 212, 0.12);
    outline: none;
}

/* selectMenu composite tende a renderizar um wrapper; deixa o input interno respirar */
.tela-moderna .campo-filtro .ui-selectonemenu,
.tela-moderna .campo-filtro .ui-autocomplete,
.tela-moderna .campo-filtro .ui-inputfield {
    width: 100% !important;
    border-radius: 8px;
}

.tela-moderna .campo-filtro .ui-selectonemenu .ui-selectonemenu-label {
    height: 38px;
    line-height: 26px;
    padding: 6px 12px;
}

/* Input específico para ano (4 dígitos, monospace) */
.tela-moderna .campo-filtro .input-ano,
.tela-moderna .input-ano,
.detalhe-moderno .input-ano {
    max-width: 110px;
    text-align: center;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    font-size: 0.95rem !important;
}

/* Campo de período: dois calendários lado a lado */
.tela-moderna .periodo-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tela-moderna .periodo-inputs .ui-calendar {
    flex: 1 1 130px;
    min-width: 130px;
}

.tela-moderna .periodo-inputs .input-date {
    height: 38px;
}

.tela-moderna .periodo-sep {
    color: #5a6fa1;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Campo composto: input + botão lookup (ex.: licitação no contrato) */
.tela-moderna .licitacao-inputs {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.tela-moderna .licitacao-inputs > .ui-selectonemenu,
.tela-moderna .licitacao-inputs > select,
.tela-moderna .licitacao-inputs > .form-control {
    flex: 1 1 auto;
}

.tela-moderna .btn-buscar-lookup {
    flex: 0 0 auto;
    background: #1656d4 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(22, 86, 212, 0.18);
    transition: filter 0.18s ease, transform 0.18s ease;
}

.tela-moderna .btn-buscar-lookup:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    color: #ffffff !important;
}

/* Radio moderno (situação, etc.) */
.tela-moderna .radio-moderno td {
    padding: 4px 8px 4px 0;
}

.tela-moderna .radio-moderno label {
    display: inline-block;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: #1a2238;
    font-size: 0.88rem;
    margin-bottom: 0;
    margin-left: 4px;
}

.tela-moderna .radio-moderno input[type="radio"] {
    accent-color: #1656d4;
    margin-right: 4px;
}

/* Ações abaixo dos filtros (botão Pesquisar) */
.tela-moderna .filtros-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 4px 10px 12px;
}

.tela-moderna .btn-pesquisar {
    background: linear-gradient(135deg, #1f4cd6, #2a73ff) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 22px !important;
    height: 38px;
    font-weight: 600;
    font-size: 0.88rem;
    box-shadow: 0 4px 12px rgba(31, 76, 214, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.tela-moderna .btn-pesquisar:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(31, 76, 214, 0.32);
    filter: brightness(1.05);
    color: #ffffff !important;
}

/* Wrapper da tabela: pequena separação visual */
.tela-moderna .resultados-wrapper {
    margin-top: 12px;
    background: #ffffff;
    border: 1px solid rgba(15, 32, 80, 0.08);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 32, 80, 0.04);
    padding: 6px 4px 4px;
    overflow: hidden;
}

.tela-moderna .resultados-wrapper .p-separator,
.tela-moderna .resultados-wrapper .ui-separator {
    display: none;
}

/* Card principal -------------------------------------------- */
.tela-moderna .card {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
}

.tela-moderna .card-body {
    padding: 0;
}

/* Header do card (composite ro:header-card) ----------------- */
.tela-moderna .card-header.card-header-icon {
    background: linear-gradient(135deg, #1f4cd6 0%, #2a73ff 60%, #3aa0ff 100%);
    color: #ffffff;
    border-radius: 14px;
    padding: 18px 22px 18px 88px;
    margin: 0 0 18px;
    box-shadow: 0 8px 22px rgba(31, 76, 214, 0.18);
    position: relative;
    min-height: 72px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.tela-moderna .card-header.card-header-icon .card-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 14px rgba(15, 32, 80, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.tela-moderna .card-header.card-header-icon .card-icon i.material-icons {
    color: #ffffff;
    font-size: 28px;
}

.tela-moderna .card-header.card-header-icon .card-title,
.tela-moderna .card-header.card-header-icon h4.card-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0;
    letter-spacing: -0.2px;
    text-shadow: 0 1px 2px rgba(15, 32, 80, 0.18);
    flex: 1 1 auto;
}

/* Wrapper col-md-6 offset-md-6 do composite header-card vira flex à direita */
.tela-moderna .card-header.card-header-icon > div[class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin-left: auto !important;
    padding-left: 8px;
    padding-right: 0;
    text-align: right;
}

/* Botões de exportar dentro do header */
.tela-moderna .card-header.card-header-icon .btn,
.tela-moderna .card-header.card-header-icon button {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.tela-moderna .card-header.card-header-icon .btn:hover,
.tela-moderna .card-header.card-header-icon button:hover {
    background: #ffffff !important;
    color: #1656d4 !important;
    transform: translateY(-1px);
}

/* Tabela de resultados -------------------------------------- */
.tela-moderna .table-responsive {
    border-radius: 10px;
    overflow-x: auto;
}

.tela-moderna table.table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 0.9rem;
}

.tela-moderna table.table thead th {
    background: #f6f9ff;
    color: #1a2238;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 14px;
    border: none;
    border-bottom: 2px solid rgba(22, 86, 212, 0.16);
    white-space: nowrap;
}

.tela-moderna table.table tbody td {
    padding: 12px 14px;
    color: #1a2238;
    border: none;
    border-bottom: 1px solid rgba(15, 32, 80, 0.06);
    vertical-align: middle;
}

.tela-moderna table.table tbody tr {
    transition: background-color 0.15s ease;
}

.tela-moderna table.table tbody tr:hover {
    background: #eef3ff !important;
}

.tela-moderna table.table.table-striped tbody tr:nth-of-type(odd) {
    background: #fafbfe;
}

.tela-moderna table.table.table-striped tbody tr:nth-of-type(odd):hover {
    background: #eef3ff !important;
}

/* Linha do totalizador (sempre a última do tbody) */
.tela-moderna table.table tbody tr:last-child {
    background: #f6f9ff !important;
    font-weight: 700;
}

.tela-moderna table.table tbody tr:last-child td {
    border-top: 2px solid rgba(22, 86, 212, 0.16);
    border-bottom: none;
    color: #1a2238;
}

.tela-moderna .link-discreto {
    color: #1a2238;
    text-decoration: none;
}

.tela-moderna .link-discreto.negrito {
    font-weight: 700;
}

.tela-moderna a.link-discreto:hover,
.tela-moderna .link-discreto a:hover {
    color: #1656d4;
    text-decoration: underline;
}

/* Paginação --------------------------------------------------- */
.tela-moderna .ui-paginator,
.tela-moderna .pagination {
    background: transparent;
    border: none;
    padding: 12px 8px;
    text-align: center;
}

.tela-moderna .pagination li > a,
.tela-moderna .pagination li > span {
    color: #3a4a78;
    border-radius: 6px !important;
    margin: 0 2px;
    border: 1px solid rgba(15, 32, 80, 0.08);
    transition: background-color 0.18s ease, color 0.18s ease;
}

.tela-moderna .pagination li.active > a,
.tela-moderna .pagination li.active > span {
    background: #1656d4 !important;
    color: #ffffff !important;
    border-color: #1656d4 !important;
}

.tela-moderna .pagination li > a:hover {
    background: #eef3ff;
    color: #1656d4;
}

/* ===== Composite ro:tabela (escopo global, mas combinado com .tela-moderna) ===== */
.ro-tabela {
    margin-top: 6px;
}

.ro-tabela .ro-tabela-scroll {
    width: 100%;
    overflow-x: auto;
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
}

.ro-tabela .ro-tabela-scroll::-webkit-scrollbar {
    height: 8px;
}

.ro-tabela .ro-tabela-scroll::-webkit-scrollbar-thumb {
    background: rgba(15, 32, 80, 0.16);
    border-radius: 4px;
}

.ro-tabela table.ro-tabela-data {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}

.ro-tabela table.ro-tabela-data thead th {
    background: #f6f9ff;
    color: #1a2238;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 14px;
    border: none;
    border-bottom: 2px solid rgba(22, 86, 212, 0.16);
    white-space: nowrap;
    text-align: left;
}

.ro-tabela table.ro-tabela-data tbody td {
    padding: 11px 14px;
    color: #1a2238;
    border: none;
    border-bottom: 1px solid rgba(15, 32, 80, 0.06);
    vertical-align: middle;
}

.ro-tabela table.ro-tabela-data tbody tr {
    transition: background-color 0.15s ease;
}

.ro-tabela table.ro-tabela-data tbody tr:hover {
    background: #eef3ff !important;
}

.ro-tabela table.ro-tabela-data.table-striped tbody tr:nth-of-type(odd) {
    background: #fafbfe;
}

.ro-tabela table.ro-tabela-data.table-striped tbody tr:nth-of-type(odd):hover {
    background: #eef3ff !important;
}

/* Linha do totalizador */
.ro-tabela table.ro-tabela-data tbody tr.ro-tabela-totalizador {
    background: #f6f9ff !important;
    font-weight: 700;
}

.ro-tabela table.ro-tabela-data tbody tr.ro-tabela-totalizador td {
    border-top: 2px solid rgba(22, 86, 212, 0.16);
    border-bottom: none;
    color: #1a2238;
}

.ro-tabela .link-discreto {
    color: #1a2238;
    text-decoration: none;
}

.ro-tabela .link-discreto.negrito {
    font-weight: 700;
}

.ro-tabela a.link-discreto:hover,
.ro-tabela .link-discreto a:hover {
    color: #1656d4;
    text-decoration: underline;
}

/* ===== Composite ro:paginacao ============================== */
.ro-paginacao {
    margin-top: 14px;
    padding: 14px 16px;
    background: #f8faff;
    border: 1px solid rgba(15, 32, 80, 0.06);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ro-paginacao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.ro-paginacao-total {
    font-size: 0.88rem;
    color: #3a4a78;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ro-paginacao-total i {
    color: #1656d4;
    font-size: 0.85rem;
}

.ro-paginacao-total strong {
    color: #1a2238;
    font-weight: 700;
}

.ro-paginacao-tamanhos {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.ro-paginacao-label {
    font-size: 0.82rem;
    color: #5a6fa1;
    margin-right: 4px;
}

.ro-paginacao-tamanho {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    padding: 0 10px;
    border-radius: 6px;
    background: #ffffff !important;
    color: #3a4a78 !important;
    border: 1px solid rgba(15, 32, 80, 0.1) !important;
    font-size: 0.82rem !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    line-height: 1;
    cursor: pointer;
}

.ro-paginacao-tamanho:hover {
    background: #eef3ff !important;
    color: #1656d4 !important;
    border-color: rgba(22, 86, 212, 0.3) !important;
}

/* botão selecionado vem com classe btn-success do controller */
.ro-paginacao-tamanho.btn-success {
    background: linear-gradient(135deg, #1f4cd6, #2a73ff) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 10px rgba(31, 76, 214, 0.25);
}

.ro-paginacao-tamanho.btn-success:hover {
    color: #ffffff !important;
    filter: brightness(1.05);
}

.ro-paginacao-tamanho-todos {
    padding: 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 0.72rem !important;
}

/* Navegação inferior */
.ro-paginacao-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border-top: 1px solid rgba(15, 32, 80, 0.06);
    padding-top: 12px;
}

.ro-paginacao-controles {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.ro-paginacao-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    background: #ffffff !important;
    color: #1656d4 !important;
    border: 1px solid rgba(22, 86, 212, 0.18);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    cursor: pointer;
    line-height: 1;
}

.ro-paginacao-btn:hover {
    background: #1656d4 !important;
    color: #ffffff !important;
    border-color: #1656d4;
    transform: translateY(-1px);
}

.ro-paginacao-btn.ui-state-disabled,
.ro-paginacao-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    background: #f0f2f7 !important;
    color: #8497c5 !important;
    border-color: rgba(15, 32, 80, 0.08);
}

.ro-paginacao-btn i {
    font-size: 0.85rem;
}

.ro-paginacao-atual {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #ffffff;
    border-radius: 8px;
    color: #3a4a78;
    font-size: 0.85rem;
    border: 1px solid rgba(15, 32, 80, 0.08);
}

.ro-paginacao-atual strong {
    color: #1656d4;
    font-weight: 700;
}

/* Botão Topo */
.ro-paginacao-topo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    background: transparent !important;
    color: #5a6fa1 !important;
    border: 1px solid rgba(15, 32, 80, 0.1);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color 0.18s ease, color 0.18s ease;
    cursor: pointer;
    line-height: 1;
}

.ro-paginacao-topo-btn:hover {
    background: #eef3ff !important;
    color: #1656d4 !important;
    border-color: rgba(22, 86, 212, 0.3);
}

/* Responsividade da paginação */
@media (max-width: 768px) {
    .ro-paginacao {
        padding: 12px 10px;
    }
    .ro-paginacao-topo,
    .ro-paginacao-nav {
        flex-direction: column;
        align-items: stretch;
    }
    .ro-paginacao-tamanhos {
        justify-content: center;
    }
    .ro-paginacao-controles {
        justify-content: center;
    }
    .ro-paginacao-btn span {
        display: none;
    }
    .ro-paginacao-btn {
        padding: 8px 10px;
    }
    .ro-paginacao-topo-btn {
        align-self: center;
    }
}

/* Responsividade: 1 coluna em telas pequenas */
@media (max-width: 768px) {
    .tela-moderna .campo-filtro {
        padding: 0 10px 12px;
    }
    .tela-moderna .filtros-header {
        padding: 10px 14px;
    }
    .tela-moderna .filtros-body {
        padding: 14px 8px 4px;
    }
    .tela-moderna .card-header.card-header-icon {
        padding: 16px 16px 16px 78px;
    }
    .tela-moderna .card-header.card-header-icon .card-icon {
        width: 46px;
        height: 46px;
        left: 14px;
    }
    .tela-moderna .card-header.card-header-icon .card-icon i.material-icons {
        font-size: 22px;
    }
    .tela-moderna .card-header.card-header-icon .card-title,
    .tela-moderna .card-header.card-header-icon h4.card-title {
        font-size: 1.05rem;
    }
    .tela-moderna table.table thead th,
    .tela-moderna table.table tbody td {
        padding: 10px 8px;
        font-size: 0.82rem;
    }
}

/* Responsividade ------------------------------------------- */
@media (max-width: 768px) {
    .home-moderna .hero { padding: 40px 16px 80px; margin-top: 70px; }
    .home-moderna .hero .hero-content h1 { font-size: 1.5rem; }
    .home-moderna .busca-hero { flex-direction: column; padding: 12px; }
    .home-moderna .busca-hero .btn-buscar { width: 100%; justify-content: center; }
    .home-moderna .navbar-moderno .marca img { max-height: 48px; }
    .home-moderna .navbar-moderno .marca .titulo-prefeitura .nome { font-size: 0.95rem; }
    .home-moderna .secao-contato { padding: 24px; }
}

/* ============================================================
   Template moderno (escopo: .template-moderno)
   Aplica-se ao layout compartilhado: navbar superior, busca,
   breadcrumb e fundo da página. NÃO altera o menu lateral
   (sidebar é regida por estilos do tema material-dashboard).
   ============================================================ */
.template-moderno {
    background: #f5f7fb;
    min-height: 100vh;
}

/* Navbar superior moderna --------------------------------- */
.template-moderno .navbar-moderno {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    box-shadow: 0 2px 12px rgba(15, 32, 80, 0.08) !important;
    border-bottom: 1px solid rgba(15, 32, 80, 0.06);
    padding: 0.5rem 1rem !important;
    min-height: 64px;
    /* Header cobre toda a largura, acima da sidebar */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1050 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Sidebar começa abaixo do header --------------------------- */
.template-moderno .sidebar {
    top: 64px !important;
    height: calc(100vh - 64px) !important;
    z-index: 1040 !important;
}

/* Main-panel não precisa de margin-top extra: o topo-pagina já tem margin-top: 80px */
.template-moderno .main-panel > nav.navbar-moderno {
    box-shadow: 0 2px 12px rgba(15, 32, 80, 0.08) !important;
}

.template-moderno .navbar-moderno .container-fluid {
    align-items: center;
}

.template-moderno .navbar-moderno .navbar-minimize .btn-toggle-menu {
    background: #eef3ff !important;
    color: #1656d4 !important;
    box-shadow: 0 2px 6px rgba(15, 32, 80, 0.08) !important;
    width: 38px;
    height: 38px;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.template-moderno .navbar-moderno .navbar-minimize .btn-toggle-menu:hover {
    background: #1656d4 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.template-moderno .navbar-moderno .navbar-minimize .btn-toggle-menu i.material-icons {
    color: inherit;
    font-size: 20px;
}

.template-moderno .navbar-moderno .subtitulo-portal {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1a2238;
    letter-spacing: -0.2px;
    margin-left: 12px;
}

/* Marca no header: logo + nome da prefeitura --------------- */
.template-moderno .navbar-moderno .marca-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 12px;
    text-decoration: none !important;
    transition: opacity 0.18s ease;
}

.template-moderno .navbar-moderno .marca-header:hover {
    opacity: 0.85;
}

.template-moderno .navbar-moderno .marca-header img {
    height: 44px;
    width: auto;
    border-radius: 6px;
}

.template-moderno .navbar-moderno .marca-header .titulo-prefeitura {
    line-height: 1.2;
}

.template-moderno .navbar-moderno .marca-header .titulo-prefeitura .nome {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a2238;
    margin: 0;
    letter-spacing: -0.2px;
}

.template-moderno .navbar-moderno .marca-header .titulo-prefeitura .subtitulo {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: #5a6fa1;
    margin: 0;
    font-weight: 600;
}

.template-moderno .navbar-moderno .acessibilidade-bar .navbar-nav {
    flex-direction: row;
    align-items: center;
    gap: 2px;
}

.template-moderno .navbar-moderno .acessibilidade-bar .btn-link {
    color: #3a4a78 !important;
    padding: 8px 10px !important;
    border-radius: 8px;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    text-decoration: none !important;
}

.template-moderno .navbar-moderno .acessibilidade-bar .btn-link:hover {
    background: #e8eefc;
    color: #1656d4 !important;
    transform: translateY(-1px);
}

/* Topo da página: busca + breadcrumb + status --------------- */
.template-moderno .main-panel > .content > .container-fluid {
    padding-top: 70px !important; /* compensa o navbar fixo (64px + folga) */
}

.template-moderno .topo-pagina {
    margin-top: 0;
    margin-bottom: 14px;
    padding: 6px 20px 12px;
    background: linear-gradient(135deg, #1f4cd6 0%, #2a73ff 60%, #3aa0ff 100%);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(31, 76, 214, 0.16);
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

.template-moderno .topo-pagina::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    top: -110px;
    right: -60px;
    pointer-events: none;
}

.template-moderno .topo-pagina .busca-topo {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    padding: 5px;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(15, 32, 80, 0.16);
    max-width: 720px;
    margin: 6px auto 0;
}

.template-moderno .topo-pagina .busca-topo .busca-icone {
    color: #5a6fa1;
    margin-left: 10px;
    font-size: 0.95rem;
}

.template-moderno .topo-pagina .busca-topo .ui-inputtext,
.template-moderno .topo-pagina .busca-topo input.ui-inputtext {
    flex: 1;
    border: none !important;
    box-shadow: none !important;
    height: 38px !important;
    font-size: 0.9rem;
    padding: 0 12px;
    background: transparent;
    color: #1a2238;
    width: 100% !important;
    outline: none !important;
}

.template-moderno .topo-pagina .busca-topo .ui-inputtext:focus {
    outline: none !important;
    box-shadow: none !important;
}

.template-moderno .topo-pagina .busca-topo .btn-buscar-topo {
    background: linear-gradient(135deg, #1f4cd6, #2a73ff);
    color: #ffffff;
    border: none;
    padding: 0 18px;
    height: 38px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.template-moderno .topo-pagina .busca-topo .btn-buscar-topo:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(31, 76, 214, 0.32);
    filter: brightness(1.05);
}

.template-moderno .topo-pagina .info-topo {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
}

/* Quando não há breadcrumb nem info, a margem some */
.template-moderno .topo-pagina .info-topo:empty {
    display: none;
}

/* Breadcrumb moderno --------------------------------------- */
.template-moderno .breadcrumb-moderno {
    margin: 0;
}

.template-moderno .breadcrumb-moderno .breadcrumb {
    background: transparent;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
}

.template-moderno .breadcrumb-moderno .breadcrumb li {
    color: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.template-moderno .breadcrumb-moderno .breadcrumb li i.fa-home {
    margin-right: 4px;
    color: rgba(255, 255, 255, 0.85);
}

.template-moderno .breadcrumb-moderno .breadcrumb li .divider {
    color: rgba(255, 255, 255, 0.55);
    padding: 0 4px;
    font-size: 0.9rem;
}

/* Pílulas de status --------------------------------------- */
.template-moderno .info-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.template-moderno .info-status .info-pill {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.template-moderno .info-status .info-pill i {
    font-size: 0.7rem;
    opacity: 0.85;
}

.template-moderno .info-status .info-pill-online i.fa-circle {
    color: #6fff6f;
    font-size: 0.55rem;
}

/* Conteúdo principal --------------------------------------- */
.template-moderno .main-panel {
    background: transparent;
}

.template-moderno .main-panel > .content {
    background: transparent;
}

.template-moderno .main-panel > .content > .container-fluid {
    padding-top: 0;
}

/* Responsividade do template ------------------------------- */
@media (max-width: 768px) {
    .template-moderno .main-panel > .content > .container-fluid {
        padding-top: 64px !important;
    }
    .template-moderno .topo-pagina {
        margin-top: 0;
        padding: 4px 14px 10px;
        border-radius: 12px;
    }
    .template-moderno .topo-pagina .busca-topo {
        flex-wrap: wrap;
    }
    .template-moderno .topo-pagina .busca-topo .btn-buscar-topo {
        width: 100%;
    }
    .template-moderno .navbar-moderno .subtitulo-portal {
        display: none;
    }
    .template-moderno .info-topo {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   Menu lateral moderno (escopo: .menu-moderno)
   Sobrescreve o tema material-dashboard apenas dentro da
   sidebar do template moderno.
   ============================================================ */
.template-moderno .sidebar.menu-moderno {
    background: #ffffff !important;
    box-shadow: 2px 0 16px rgba(15, 32, 80, 0.06);
    border-right: 1px solid rgba(15, 32, 80, 0.05);
}

.template-moderno .sidebar.menu-moderno::before,
.template-moderno .sidebar.menu-moderno::after {
    display: none !important;
    background: transparent !important;
}

/* Wrapper e nav ------------------------------------------- */
.template-moderno .sidebar.menu-moderno .sidebar-wrapper {
    background: transparent !important;
    padding: 12px 0;
}

.template-moderno .sidebar.menu-moderno .sidebar-wrapper::-webkit-scrollbar {
    width: 6px;
}

.template-moderno .sidebar.menu-moderno .sidebar-wrapper::-webkit-scrollbar-thumb {
    background: rgba(15, 32, 80, 0.16);
    border-radius: 4px;
}

.template-moderno .sidebar.menu-moderno .nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Itens de nível 1 ---------------------------------------- */
.template-moderno .sidebar.menu-moderno .nav .nav-item {
    margin: 2px 10px;
    position: relative;
}

.template-moderno .sidebar.menu-moderno .nav .nav-item > .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    color: #3a4a78 !important;
    background: transparent !important;
    text-decoration: none !important;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    margin: 0 !important;
    box-shadow: none !important;
}

.template-moderno .sidebar.menu-moderno .nav .nav-item > .nav-link:hover,
.template-moderno .sidebar.menu-moderno .nav .nav-item > .nav-link:focus {
    background: #eef3ff !important;
    color: #1656d4 !important;
    transform: translateX(2px);
}

.template-moderno .sidebar.menu-moderno .nav .nav-item.active > .nav-link,
.template-moderno .sidebar.menu-moderno .nav .nav-item > .nav-link.active {
    background: linear-gradient(135deg, #1f4cd6, #2a73ff) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(31, 76, 214, 0.25) !important;
}

.template-moderno .sidebar.menu-moderno .nav .nav-item.active > .nav-link .menu-icone,
.template-moderno .sidebar.menu-moderno .nav .nav-item.active > .nav-link i {
    color: #ffffff !important;
}

/* Ícone em pílula ----------------------------------------- */
.template-moderno .sidebar.menu-moderno .menu-icone {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(22, 86, 212, 0.08);
    color: #1656d4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.18s ease, color 0.18s ease;
    line-height: 1;
    overflow: hidden;
}

.template-moderno .sidebar.menu-moderno .nav .nav-item > .nav-link:hover .menu-icone {
    background: #ffffff;
    color: #1656d4;
}

.template-moderno .sidebar.menu-moderno .nav .nav-item.active > .nav-link .menu-icone,
.template-moderno .sidebar.menu-moderno .nav .nav-item > .nav-link.active .menu-icone {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

/* Ajustes leves nos ícones — preserva font-family/weight definidos pelo FontAwesome */
.template-moderno .sidebar.menu-moderno .menu-icone i {
    font-size: 0.95rem;
    line-height: 1;
    color: inherit;
    margin: 0;
    padding: 0;
}


/* Label ---------------------------------------------------- */
.template-moderno .sidebar.menu-moderno .menu-label {
    flex: 1 1 auto;
    font-size: 0.86rem !important;
    line-height: 1.3;
    white-space: normal;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.template-moderno .sidebar.menu-moderno .menu-link-externo {
    font-size: 0.65rem;
    opacity: 0.55;
}

/* Caret de submenu ---------------------------------------- */
.template-moderno .sidebar.menu-moderno .menu-caret {
    flex: 0 0 auto;
    border: none;
    width: 14px;
    height: 14px;
    display: inline-block;
    position: relative;
    transition: transform 0.25s ease;
}

.template-moderno .sidebar.menu-moderno .menu-caret::before {
    content: "\f078"; /* fa-chevron-down */
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    font-size: 0.65rem;
    color: #8497c5;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.template-moderno .sidebar.menu-moderno .has-children > .nav-link[aria-expanded="true"] .menu-caret {
    transform: rotate(-180deg);
}

.template-moderno .sidebar.menu-moderno .has-children > .nav-link[aria-expanded="true"] {
    background: #f6f9ff !important;
    color: #1656d4 !important;
}

/* Badge "Novo" -------------------------------------------- */
.template-moderno .sidebar.menu-moderno .badge.badge-novo {
    background: #ef5350;
    color: #ffffff !important;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

/* Submenus (nível 2 e 3) ---------------------------------- */
.template-moderno .sidebar.menu-moderno .submenu-wrapper {
    margin: 4px 0 8px;
}

.template-moderno .sidebar.menu-moderno .submenu-nivel-2,
.template-moderno .sidebar.menu-moderno .submenu-nivel-3 {
    background: rgba(22, 86, 212, 0.03);
    border-left: 2px solid rgba(22, 86, 212, 0.16);
    border-radius: 8px;
    margin-left: 14px;
    padding: 4px 0;
}

.template-moderno .sidebar.menu-moderno .submenu-nivel-2 .nav-item,
.template-moderno .sidebar.menu-moderno .submenu-nivel-3 .nav-item {
    margin: 1px 6px;
}

.template-moderno .sidebar.menu-moderno .submenu-nivel-2 .nav-link,
.template-moderno .sidebar.menu-moderno .submenu-nivel-3 .nav-link {
    padding: 7px 10px !important;
    font-size: 0.82rem;
}

.template-moderno .sidebar.menu-moderno .submenu-nivel-2 .menu-icone,
.template-moderno .sidebar.menu-moderno .submenu-nivel-3 .menu-icone {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(22, 86, 212, 0.05);
}

.template-moderno .sidebar.menu-moderno .submenu-nivel-2 .menu-icone i,
.template-moderno .sidebar.menu-moderno .submenu-nivel-3 .menu-icone i {
    font-size: 0.78rem;
}

.template-moderno .sidebar.menu-moderno .submenu-nivel-3 {
    margin-left: 18px;
    background: rgba(22, 86, 212, 0.05);
}

/* Modo "mini" (sidebar recolhida) ------------------------- */
.sidebar-mini .template-moderno .sidebar.menu-moderno .menu-label,
.sidebar-mini .template-moderno .sidebar.menu-moderno .menu-caret,
.sidebar-mini .template-moderno .sidebar.menu-moderno .badge.badge-novo,
.sidebar-mini .template-moderno .sidebar.menu-moderno .logo-text-normal,
.sidebar-mini .template-moderno .sidebar.menu-moderno .logo-text-mini {
    opacity: 0;
    pointer-events: none;
}

.sidebar-mini .template-moderno .sidebar.menu-moderno .nav .nav-item > .nav-link {
    justify-content: center;
}

/* Responsividade ------------------------------------------ */
@media (max-width: 991px) {
    .template-moderno .sidebar.menu-moderno {
        box-shadow: 0 8px 24px rgba(15, 32, 80, 0.12);
    }
}

/* ============================================================
   Telas de detalhe (/ver/) - escopo: .detalhe-moderno
   Reutiliza .tela-moderna como base.
   ============================================================ */
.detalhe-moderno .card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(15, 32, 80, 0.06);
    border: 1px solid rgba(15, 32, 80, 0.05);
    overflow: hidden;
}

.detalhe-moderno .card-body {
    padding: 0 22px 22px;
}

/* Header próprio do detalhe (substitui o card-header-icon antigo) */
.detalhe-moderno .detalhe-header {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, #1f4cd6 0%, #2a73ff 60%, #3aa0ff 100%);
    color: #ffffff;
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
}

.detalhe-moderno .detalhe-header::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    top: -120px;
    right: -70px;
    pointer-events: none;
}

.detalhe-moderno .detalhe-header-icone {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #ffffff;
    position: relative;
    z-index: 2;
}

.detalhe-moderno .detalhe-header h1 {
    margin: 0 0 4px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.3px;
    position: relative;
    z-index: 2;
}

.detalhe-moderno .detalhe-header p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.88);
    position: relative;
    z-index: 2;
}

/* Ficha de dados (visualizador-generico) ------------------- */
.detalhe-moderno .detalhe-ficha {
    background: #f8faff;
    border-radius: 12px;
    padding: 18px 20px;
    margin: 22px 0;
    border: 1px solid rgba(15, 32, 80, 0.05);
}

/* Estilo do composite visualizador-ficha (escopo global, mas
   combinado com .detalhe-moderno fica mais polido) */
.visualizador-ficha {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}

.visualizador-ficha .visualizador-linha {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr;
    gap: 16px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background-color 0.18s ease;
}

.visualizador-ficha .visualizador-linha:nth-child(odd) {
    background: rgba(22, 86, 212, 0.03);
}

.visualizador-ficha .visualizador-linha:hover {
    background: rgba(22, 86, 212, 0.06);
}

.visualizador-ficha .visualizador-label {
    margin: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #5a6fa1;
    font-weight: 700;
    align-self: center;
    line-height: 1.4;
}

.visualizador-ficha .visualizador-valor {
    margin: 0;
    font-size: 0.92rem;
    color: #1a2238;
    line-height: 1.5;
    word-break: break-word;
    align-self: center;
}

.visualizador-ficha .visualizador-valor a {
    color: #1656d4;
    text-decoration: none;
}

.visualizador-ficha .visualizador-valor a:hover {
    text-decoration: underline;
}

/* PrimeFaces TabView modernizado --------------------------- */
.tabs-moderno.ui-tabs,
.tabs-moderno .ui-tabs {
    border: none;
    background: transparent;
    padding: 0;
}

.tabs-moderno .ui-tabs-nav {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid rgba(15, 32, 80, 0.08) !important;
    margin-bottom: 18px;
}

.tabs-moderno .ui-tabs-nav li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    top: 0 !important;
}

.tabs-moderno .ui-tabs-nav li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    padding: 10px 18px !important;
    color: #3a4a78 !important;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 8px 8px 0 0 !important;
    background: transparent !important;
    border: none !important;
    text-decoration: none !important;
    transition: background-color 0.18s ease, color 0.18s ease;
    position: relative;
    top: 2px;
}

.tabs-moderno .ui-tabs-nav li a:hover {
    background: #eef3ff !important;
    color: #1656d4 !important;
}

.tabs-moderno .ui-tabs-nav li.ui-state-active {
    background: transparent !important;
}

.tabs-moderno .ui-tabs-nav li.ui-state-active a {
    background: #ffffff !important;
    color: #1656d4 !important;
    border-bottom: 2px solid #1656d4 !important;
    box-shadow: inset 0 -2px 0 #1656d4;
}

.tabs-moderno .ui-tabs-panels {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.tabs-moderno .ui-tabs-panel {
    padding: 0 !important;
    background: transparent !important;
}

/* KPIs de totais (ex: empenho/liquidado/pago) ------------- */
.detalhe-moderno .detalhe-totais {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.detalhe-moderno .total-card {
    background: #ffffff;
    border: 1px solid rgba(15, 32, 80, 0.06);
    border-left: 4px solid #8497c5;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(15, 32, 80, 0.04);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.detalhe-moderno .total-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(15, 32, 80, 0.08);
}

.detalhe-moderno .total-card .total-label {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #5a6fa1;
    font-weight: 700;
}

.detalhe-moderno .total-card .total-valor {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a2238;
    letter-spacing: -0.2px;
    line-height: 1.2;
}

.detalhe-moderno .total-card.total-empenhado { border-left-color: #1656d4; }
.detalhe-moderno .total-card.total-empenhado .total-valor { color: #1656d4; }

.detalhe-moderno .total-card.total-liquidado { border-left-color: #fb8c00; }
.detalhe-moderno .total-card.total-liquidado .total-valor { color: #fb8c00; }

.detalhe-moderno .total-card.total-pago { border-left-color: #2e7d32; }
.detalhe-moderno .total-card.total-pago .total-valor { color: #2e7d32; }

/* Fórmula visual (Valor Original − Anulações + Aditivos = Atualizado) */
.detalhe-moderno .detalhe-totais-formula {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 8px;
}

.detalhe-moderno .formula-operador {
    align-self: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #5a6fa1;
    min-width: 18px;
    text-align: center;
}

@media (max-width: 992px) {
    .detalhe-moderno .detalhe-totais-formula {
        grid-template-columns: 1fr;
    }
    .detalhe-moderno .formula-operador {
        text-align: left;
        padding-left: 8px;
    }
}

/* Timeline de marcos (licitação) --------------------------- */
.detalhe-moderno .marcos-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    counter-reset: marco;
}

.detalhe-moderno .marco-item {
    background: #ffffff;
    border: 1px solid rgba(15, 32, 80, 0.06);
    border-radius: 10px;
    padding: 14px 14px 14px 38px;
    box-shadow: 0 2px 8px rgba(15, 32, 80, 0.04);
    position: relative;
    counter-increment: marco;
}

.detalhe-moderno .marco-item::before {
    content: counter(marco);
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1f4cd6, #2a73ff);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(31, 76, 214, 0.22);
}

.detalhe-moderno .marco-item .marco-label {
    display: block;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #5a6fa1;
    font-weight: 700;
    margin-bottom: 2px;
}

.detalhe-moderno .marco-item .marco-data {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a2238;
}

/* Execução: bloco com Empenhado/Liquidado/Pago (anual + período) */
.detalhe-moderno .execucao-totais {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
    background: #f8faff;
    border: 1px solid rgba(15, 32, 80, 0.06);
    border-radius: 10px;
}

.detalhe-moderno .execucao-coluna {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
}

.detalhe-moderno .execucao-coluna .execucao-titulo {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #5a6fa1;
    font-weight: 700;
}

.detalhe-moderno .execucao-coluna .execucao-anual {
    font-weight: 700;
    color: #2e7d32;
    font-size: 0.9rem;
}

.detalhe-moderno .execucao-coluna .execucao-periodo {
    font-weight: 600;
    color: #1656d4;
    font-size: 0.85rem;
}

/* Bloco com título (Detalhamentos, Itens, etc.) ----------- */
.detalhe-moderno .detalhe-bloco {
    margin: 18px 0;
}

.detalhe-moderno .detalhe-bloco-titulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a2238;
    letter-spacing: -0.2px;
}

.detalhe-moderno .detalhe-bloco-titulo i {
    color: #1656d4;
    font-size: 0.85rem;
}

/* Wrapper de gráfico sem borda extra (usado dentro de tabs) */
.detalhe-moderno .grafico-card-borderless {
    border: none;
    box-shadow: none;
    background: transparent;
}

.detalhe-moderno .detalhe-grafico-wrapper {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    margin-top: 14px;
    border: 1px solid rgba(15, 32, 80, 0.06);
}

/* Legenda do gráfico (reutiliza estilo do resumo-moderno) */
.detalhe-moderno .grafico-card .grafico-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(15, 32, 80, 0.06);
    flex-wrap: wrap;
}

.detalhe-moderno .grafico-card .grafico-header-icone {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.95rem;
    box-shadow: 0 4px 10px rgba(15, 32, 80, 0.14);
}

.detalhe-moderno .grafico-card .grafico-header h2 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: #1a2238;
}

.detalhe-moderno .grafico-card .grafico-header p {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: #5a6fa1;
}

.detalhe-moderno .grafico-card .grafico-legenda {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.detalhe-moderno .grafico-card .grafico-legenda .legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f6f9ff;
    border: 1px solid rgba(15, 32, 80, 0.06);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.78rem;
    color: #3a4a78;
}

.detalhe-moderno .legenda-bola {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.detalhe-moderno .legenda-verde    { background: #2e7d32; }
.detalhe-moderno .legenda-vermelho { background: #c62828; }
.detalhe-moderno .legenda-azul     { background: #1656d4; }
.detalhe-moderno .legenda-laranja  { background: #fb8c00; }
.detalhe-moderno .legenda-cinza    { background: #8497c5; }

/* Responsividade */
@media (max-width: 768px) {
    .detalhe-moderno .detalhe-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 18px;
    }
    .detalhe-moderno .card-body {
        padding: 0 14px 16px;
    }
    .detalhe-moderno .detalhe-ficha {
        padding: 14px;
    }
    .visualizador-ficha .visualizador-linha {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 10px;
    }
    .visualizador-ficha .visualizador-label {
        font-size: 0.72rem;
    }
    .detalhe-moderno .grafico-card .grafico-legenda {
        margin-left: 0;
        width: 100%;
    }
}

/* ============================================================
   Página Resumo Geral (escopo: .resumo-moderno)
   Dashboard com KPIs, estatísticas e gráficos.
   ============================================================ */
.resumo-moderno .resumo-header {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, #1f4cd6 0%, #2a73ff 60%, #3aa0ff 100%);
    color: #ffffff;
    border-radius: 14px;
    padding: 20px 26px;
    margin-bottom: 22px;
    box-shadow: 0 8px 22px rgba(31, 76, 214, 0.18);
    position: relative;
    overflow: hidden;
}

.resumo-moderno .resumo-header::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    top: -120px;
    right: -70px;
    pointer-events: none;
}

.resumo-moderno .resumo-header-icone {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #ffffff;
    position: relative;
    z-index: 2;
}

.resumo-moderno .resumo-header h1 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.3px;
    position: relative;
    z-index: 2;
}

.resumo-moderno .resumo-header p {
    margin: 0;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.88);
    position: relative;
    z-index: 2;
}

/* KPIs ----------------------------------------------------- */
.resumo-moderno .resumo-kpis {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.resumo-moderno .kpi-card {
    background: #ffffff;
    border: 1px solid rgba(15, 32, 80, 0.06);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 4px 14px rgba(15, 32, 80, 0.06);
    display: flex;
    align-items: center;
    gap: 18px;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.resumo-moderno .kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 32, 80, 0.10);
}

.resumo-moderno .kpi-card .kpi-icone {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.4rem;
    box-shadow: 0 6px 14px rgba(15, 32, 80, 0.14);
}

.resumo-moderno .kpi-card .kpi-conteudo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.resumo-moderno .kpi-card .kpi-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #5a6fa1;
    font-weight: 600;
}

.resumo-moderno .kpi-card .kpi-valor {
    font-size: 1.45rem;
    font-weight: 700;
    color: #1a2238;
    letter-spacing: -0.4px;
    line-height: 1.2;
}

.resumo-moderno .kpi-card .kpi-sublabel {
    font-size: 0.78rem;
    color: #8497c5;
    margin-top: 2px;
}

/* KPI grande (orçamento) */
.resumo-moderno .kpi-grande {
    background: linear-gradient(135deg, #1a2238, #2a3a6a);
    color: #ffffff;
    border-color: transparent;
}

.resumo-moderno .kpi-grande .kpi-icone {
    background: rgba(255, 255, 255, 0.18);
    width: 72px;
    height: 72px;
    font-size: 1.7rem;
}

.resumo-moderno .kpi-grande .kpi-label {
    color: rgba(255, 255, 255, 0.7);
}

.resumo-moderno .kpi-grande .kpi-valor {
    color: #ffffff;
    font-size: 1.75rem;
}

.resumo-moderno .kpi-grande .kpi-sublabel {
    color: rgba(255, 255, 255, 0.6);
}

/* KPI receita (verde) */
.resumo-moderno .kpi-receita .kpi-icone {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
}

/* KPI despesa (vermelho) */
.resumo-moderno .kpi-despesa .kpi-icone {
    background: linear-gradient(135deg, #ef5350, #c62828);
}

/* Stats (4 cards menores) ----------------------------------- */
.resumo-moderno .resumo-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.resumo-moderno .stat-card {
    background: #ffffff;
    border: 1px solid rgba(15, 32, 80, 0.06);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 4px 12px rgba(15, 32, 80, 0.05);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.resumo-moderno .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 32, 80, 0.09);
}

.resumo-moderno .stat-card .stat-icone {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.05rem;
    box-shadow: 0 4px 10px rgba(15, 32, 80, 0.16);
}

.resumo-moderno .stat-card.stat-warning .stat-icone   { background: linear-gradient(135deg, #ffa726, #fb8c00); }
.resumo-moderno .stat-card.stat-info .stat-icone      { background: linear-gradient(135deg, #00bcd4, #0097a7); }
.resumo-moderno .stat-card.stat-primary .stat-icone   { background: linear-gradient(135deg, #1f4cd6, #2a73ff); }
.resumo-moderno .stat-card.stat-secondary .stat-icone { background: linear-gradient(135deg, #6a78d1, #4051b5); }

.resumo-moderno .stat-card .stat-numero {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a2238;
    line-height: 1.1;
    letter-spacing: -0.3px;
}

.resumo-moderno .stat-card .stat-label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #5a6fa1;
    font-weight: 600;
    margin-top: 2px;
}

/* Gráficos -------------------------------------------------- */
.resumo-moderno .grafico-card {
    background: #ffffff;
    border: 1px solid rgba(15, 32, 80, 0.06);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(15, 32, 80, 0.06);
    margin-bottom: 18px;
    overflow: hidden;
}

.resumo-moderno .grafico-card .grafico-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(15, 32, 80, 0.06);
    flex-wrap: wrap;
}

.resumo-moderno .grafico-card .grafico-header-icone {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(15, 32, 80, 0.14);
}

.resumo-moderno .grafico-header-icone-success { background: linear-gradient(135deg, #4caf50, #2e7d32); }
.resumo-moderno .grafico-header-icone-warning { background: linear-gradient(135deg, #ffa726, #fb8c00); }
.resumo-moderno .grafico-header-icone-primary { background: linear-gradient(135deg, #1f4cd6, #2a73ff); }
.resumo-moderno .grafico-header-icone-info    { background: linear-gradient(135deg, #00bcd4, #0097a7); }

.resumo-moderno .grafico-card .grafico-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1a2238;
    letter-spacing: -0.2px;
}

.resumo-moderno .grafico-card .grafico-header p {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: #5a6fa1;
}

.resumo-moderno .grafico-card .grafico-header > div:not(.grafico-header-icone):not(.grafico-legenda) {
    flex: 1;
    min-width: 0;
}

/* Legendas (chips) */
.resumo-moderno .grafico-legenda {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.resumo-moderno .grafico-legenda .legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f6f9ff;
    border: 1px solid rgba(15, 32, 80, 0.06);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.78rem;
    color: #3a4a78;
}

.resumo-moderno .legenda-bola {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.resumo-moderno .legenda-verde    { background: #2e7d32; }
.resumo-moderno .legenda-vermelho { background: #c62828; }
.resumo-moderno .legenda-azul     { background: #1656d4; }
.resumo-moderno .legenda-laranja  { background: #fb8c00; }
.resumo-moderno .legenda-cinza    { background: #8497c5; }

.resumo-moderno .grafico-card .grafico-body {
    padding: 18px 20px;
}

.resumo-moderno .grafico-card .grafico-body canvas {
    max-width: 100%;
}

/* Responsividade */
@media (max-width: 992px) {
    .resumo-moderno .resumo-kpis {
        grid-template-columns: 1fr 1fr;
    }
    .resumo-moderno .kpi-grande {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .resumo-moderno .resumo-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 18px;
    }
    .resumo-moderno .resumo-kpis {
        grid-template-columns: 1fr;
    }
    .resumo-moderno .kpi-card .kpi-valor {
        font-size: 1.25rem;
    }
    .resumo-moderno .kpi-grande .kpi-valor {
        font-size: 1.4rem;
    }
    .resumo-moderno .resumo-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .resumo-moderno .grafico-legenda {
        margin-left: 0;
        width: 100%;
    }
}

/* ============================================================
   Mapa do Site (escopo: .mapa-site-moderno, dentro de .tela-moderna)
   ============================================================ */
.mapa-site-moderno .mapa-site-header {
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, #1f4cd6 0%, #2a73ff 60%, #3aa0ff 100%);
    color: #ffffff;
    border-radius: 14px;
    padding: 20px 26px;
    margin-bottom: 22px;
    box-shadow: 0 8px 22px rgba(31, 76, 214, 0.18);
    position: relative;
    overflow: hidden;
}

.mapa-site-moderno .mapa-site-header::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    top: -110px;
    right: -60px;
    pointer-events: none;
}

.mapa-site-moderno .mapa-site-header-icone {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #ffffff;
    position: relative;
    z-index: 2;
}

.mapa-site-moderno .mapa-site-header h1 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #ffffff;
    position: relative;
    z-index: 2;
}

.mapa-site-moderno .mapa-site-header p {
    margin: 0;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.88);
    position: relative;
    z-index: 2;
}

/* Grid responsivo de cards ---------------------------------- */
.mapa-site-moderno .mapa-site-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    align-items: start;
}

/* Card base */
.mapa-site-moderno .mapa-card {
    background: #ffffff;
    border: 1px solid rgba(15, 32, 80, 0.06);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(15, 32, 80, 0.06);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.mapa-site-moderno .mapa-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 32, 80, 0.10);
    border-color: rgba(22, 86, 212, 0.18);
}

.mapa-site-moderno .mapa-card .mapa-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(15, 32, 80, 0.06);
}

.mapa-site-moderno .mapa-card-icone {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1f4cd6, #2a73ff);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(31, 76, 214, 0.22);
}

.mapa-site-moderno .mapa-card h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1a2238;
    flex: 1;
    line-height: 1.25;
}

/* Card "grupo" (com submenus) */
.mapa-site-moderno .mapa-card-grupo .mapa-card-lista {
    list-style: none;
    padding: 8px 12px 14px;
    margin: 0;
}

.mapa-site-moderno .mapa-card-lista > li {
    margin: 0;
}

.mapa-site-moderno .mapa-card-lista a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: #3a4a78;
    font-size: 0.88rem;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background-color 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}

.mapa-site-moderno .mapa-card-lista a:hover {
    background: #eef3ff;
    color: #1656d4;
    padding-left: 14px;
}

.mapa-site-moderno .mapa-link-icone {
    color: #8497c5;
    font-size: 0.72rem;
    flex: 0 0 auto;
    transition: color 0.18s ease;
}

.mapa-site-moderno .mapa-card-lista a:hover .mapa-link-icone {
    color: #1656d4;
}

/* Subgrupo (filhos com netos) */
.mapa-site-moderno .mapa-subgrupo {
    margin-top: 4px;
}

.mapa-site-moderno .mapa-subgrupo-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #5a6fa1;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.mapa-site-moderno .mapa-subgrupo-titulo .mapa-link-icone {
    color: #1656d4;
}

.mapa-site-moderno .mapa-subgrupo-lista {
    list-style: none;
    padding: 0 0 0 12px;
    margin: 0 0 6px;
    border-left: 2px solid rgba(22, 86, 212, 0.14);
    margin-left: 14px;
}

.mapa-site-moderno .mapa-subgrupo-lista a {
    font-size: 0.84rem;
    padding: 6px 10px;
}

/* Card "atalho" (folha de primeiro nível, clicável inteiro) */
.mapa-site-moderno .mapa-card-atalho {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    color: #1a2238 !important;
    text-decoration: none !important;
    cursor: pointer;
}

.mapa-site-moderno .mapa-card-atalho h2 {
    flex: 1;
}

.mapa-site-moderno .mapa-card-atalho .mapa-atalho-seta {
    color: #8497c5;
    font-size: 0.85rem;
    transition: color 0.18s ease, transform 0.18s ease;
}

.mapa-site-moderno .mapa-card-atalho:hover .mapa-atalho-seta {
    color: #1656d4;
    transform: translateX(3px);
}

/* Responsividade */
@media (max-width: 768px) {
    .mapa-site-moderno .mapa-site-header {
        padding: 16px 18px;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .mapa-site-moderno .mapa-site-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Páginas de sistema (sessão expirada, sem-entidade, etc.)
   Layout: header fixo + cartão central + rodapé grudado embaixo.
   ============================================================ */
.pagina-sistema {
    background: #f5f7fb;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.pagina-sistema .pagina-sistema-conteudo {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 24px 40px;  /* 64px navbar + 56px folga superior */
    width: 100%;
}

/* Card de mensagem central */
.pagina-sistema .mensagem-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 40px 36px;
    box-shadow: 0 12px 40px rgba(15, 32, 80, 0.10);
    max-width: 560px;
    width: 100%;
    text-align: center;
    border: 1px solid rgba(15, 32, 80, 0.05);
}

.pagina-sistema .mensagem-card .mensagem-icone {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Variante aviso (laranja) */
.pagina-sistema .mensagem-card.mensagem-aviso .mensagem-icone {
    background: linear-gradient(135deg, #ffa726, #fb8c00);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(251, 140, 0, 0.32);
}

/* Variante informativa (azul) */
.pagina-sistema .mensagem-card.mensagem-info .mensagem-icone {
    background: linear-gradient(135deg, #1f4cd6, #2a73ff);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(31, 76, 214, 0.28);
}

/* Variante erro (vermelha) */
.pagina-sistema .mensagem-card.mensagem-erro .mensagem-icone {
    background: linear-gradient(135deg, #ef5350, #c62828);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(239, 83, 80, 0.32);
}

.pagina-sistema .mensagem-card h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a2238;
    margin: 0 0 12px;
    letter-spacing: -0.3px;
}

.pagina-sistema .mensagem-card .mensagem-descricao {
    color: #5a6fa1;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 28px;
}

.pagina-sistema .mensagem-card .mensagem-acoes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pagina-sistema .mensagem-card .btn-acao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.pagina-sistema .mensagem-card .btn-acao-primario {
    background: linear-gradient(135deg, #1f4cd6, #2a73ff);
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(31, 76, 214, 0.25);
}

.pagina-sistema .mensagem-card .btn-acao-primario:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(31, 76, 214, 0.32);
    filter: brightness(1.05);
}

.pagina-sistema .mensagem-card .btn-acao-secundario {
    background: #ffffff;
    color: #1656d4 !important;
    border-color: rgba(22, 86, 212, 0.18);
}

.pagina-sistema .mensagem-card .btn-acao-secundario:hover {
    background: #eef3ff;
    transform: translateY(-1px);
}

/* Navbar reutiliza estilo do .home-moderna que já está aplicado em
   .pagina-sistema (que também herda essa classe). Apenas garante
   que o navbar fica fixed-top. */
.pagina-sistema .navbar-moderno {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
}

/* Rodapé encosta na parte de baixo (já que pagina-sistema-conteudo é flex: 1) */
.pagina-sistema .rodape-moderno {
    margin-top: 0;
    border-radius: 16px 16px 0 0;
}

/* Variante de marca sem logo (quando não há prefeitura configurada) */
.pagina-sistema .marca-sem-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 12px;
}

.pagina-sistema .marca-sem-logo .marca-icone {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1f4cd6, #2a73ff);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 4px 12px rgba(31, 76, 214, 0.25);
}

.pagina-sistema .marca-sem-logo .titulo-prefeitura .nome {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a2238;
    margin: 0;
    letter-spacing: -0.2px;
}

.pagina-sistema .marca-sem-logo .titulo-prefeitura .subtitulo {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: #5a6fa1;
    margin: 0;
    font-weight: 600;
}

/* Rodapé mínimo (sem depender de dados de prefeitura) */
.pagina-sistema .rodape-minimo {
    flex: 0 0 auto;
    background: #1a2238;
    color: rgba(255, 255, 255, 0.7);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.78rem;
    border-radius: 16px 16px 0 0;
}

.pagina-sistema .rodape-minimo strong {
    color: #ffffff;
}

.pagina-sistema .rodape-minimo .rodape-versao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 12px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85);
}

.pagina-sistema .rodape-minimo .rodape-versao i {
    color: #6fff6f;
}

/* Responsividade */
@media (max-width: 768px) {
    .pagina-sistema .pagina-sistema-conteudo {
        padding: 100px 16px 32px;
    }
    .pagina-sistema .mensagem-card {
        padding: 32px 22px;
    }
    .pagina-sistema .mensagem-card h1 {
        font-size: 1.2rem;
    }
    .pagina-sistema .mensagem-card .mensagem-icone {
        width: 64px;
        height: 64px;
        font-size: 1.6rem;
    }
    .pagina-sistema .mensagem-card .mensagem-acoes {
        flex-direction: column;
    }
    .pagina-sistema .mensagem-card .btn-acao {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   Rodapé moderno (escopo global)
   ============================================================ */
.rodape-moderno {
    background: linear-gradient(135deg, #1a2238 0%, #2a3a6a 100%);
    color: #ffffff;
    border-radius: 16px 16px 0 0;
    margin-top: 32px;
    padding: 32px 32px 0;
    box-shadow: 0 -4px 18px rgba(15, 32, 80, 0.08);
    overflow: hidden;
    position: relative;
}

.rodape-moderno::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    top: -180px;
    right: -120px;
    pointer-events: none;
}

.rodape-moderno .rodape-conteudo {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2fr;
    gap: 32px;
    align-items: start;
    position: relative;
    z-index: 2;
    padding-bottom: 28px;
}

/* Bloco marca */
.rodape-moderno .rodape-marca {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rodape-moderno .rodape-marca .rodape-logo {
    height: 64px;
    width: auto;
    max-width: 120px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    padding: 6px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}

.rodape-moderno .rodape-marca .rodape-titulo h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: #ffffff;
    line-height: 1.2;
}

.rodape-moderno .rodape-marca .rodape-subtitulo {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-weight: 600;
}

/* Bloco info de contato */
.rodape-moderno .rodape-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.rodape-moderno .rodape-info .info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.rodape-moderno .rodape-info .info-icone {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.9rem;
}

.rodape-moderno .rodape-info .info-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    margin-bottom: 2px;
}

.rodape-moderno .rodape-info .info-valor {
    display: block;
    font-size: 0.88rem;
    color: #ffffff;
    line-height: 1.5;
}

.rodape-moderno .rodape-info .info-valor a {
    color: #8ec3ff;
    text-decoration: none;
    border-bottom: 1px solid rgba(142, 195, 255, 0.35);
    transition: color 0.18s ease, border-color 0.18s ease;
}

.rodape-moderno .rodape-info .info-valor a:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* Créditos */
.rodape-moderno .rodape-creditos {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    z-index: 2;
}

.rodape-moderno .rodape-creditos strong {
    color: #ffffff;
    font-weight: 700;
}

.rodape-moderno .rodape-creditos .rodape-versao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 12px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85);
}

.rodape-moderno .rodape-creditos .rodape-versao i {
    font-size: 0.7rem;
    color: #6fff6f;
}

/* Responsividade do rodapé ---------------------------------- */
@media (max-width: 768px) {
    .rodape-moderno {
        padding: 24px 18px 0;
        border-radius: 12px 12px 0 0;
    }
    .rodape-moderno .rodape-conteudo {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .rodape-moderno .rodape-creditos {
        justify-content: center;
        text-align: center;
    }
}

/* ============================================================
   Botões institucionais do rodapé (Acesso à Informação, Ouvidoria, Atendimento)
   Substitui o antigo `.row` + tooltips amarelos com cards modernos.
   ============================================================ */
.rodape-botoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.rodape-botoes .botao-rodape {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid rgba(15, 32, 80, 0.08);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(15, 32, 80, 0.05);
    text-decoration: none !important;
    color: #1a2238;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    cursor: pointer;
}

.rodape-botoes .botao-rodape:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 32, 80, 0.12);
    border-color: rgba(22, 86, 212, 0.25);
    color: #1a2238 !important;
}

.rodape-botoes .botao-rodape .botao-rodape-imagem {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f6f9ff;
    border-radius: 12px;
    padding: 6px;
}

.rodape-botoes .botao-rodape .botao-rodape-imagem img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.rodape-botoes .botao-rodape .botao-rodape-conteudo {
    flex: 1 1 auto;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #1a2238;
}

.rodape-botoes .botao-rodape .botao-rodape-conteudo strong,
.rodape-botoes .botao-rodape .botao-rodape-conteudo b {
    color: #1656d4;
}

@media (max-width: 768px) {
    .rodape-botoes {
        grid-template-columns: 1fr;
    }
}

/* ===== Calamidade Pública — grid de cards de navegação ===== */
.detalhe-moderno .calamidade-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px;
    margin-top: 6px;
}

.detalhe-moderno .calamidade-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 22px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
    border: 1px solid #e2eaf5;
    color: #1d3a6b;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.detalhe-moderno .calamidade-card:hover,
.detalhe-moderno .calamidade-card:focus {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(29, 87, 135, 0.14);
    border-color: #b9d0ee;
    text-decoration: none;
    color: #1d3a6b;
}

.detalhe-moderno .calamidade-card img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin-bottom: 14px;
}

.detalhe-moderno .calamidade-card h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}

/* ===== Ações de filtros (botão Pesquisar) ===== */
.tela-moderna .filtros-acoes {
    display: flex;
    justify-content: flex-end;
    padding: 12px 18px 18px;
    border-top: 1px solid #e6ecf5;
    margin-top: 8px;
}

.tela-moderna .btn-pesquisar,
.tela-moderna .btn-pesquisar.ui-button {
    background-color: #2196f3;
    color: #ffffff;
    border: none;
    padding: 9px 28px;
    border-radius: 4px;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.4px;
    box-shadow: none;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
}

.tela-moderna .btn-pesquisar:hover,
.tela-moderna .btn-pesquisar.ui-button:hover,
.tela-moderna .btn-pesquisar:focus,
.tela-moderna .btn-pesquisar.ui-button:focus {
    background-color: #1976d2;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(33, 150, 243, 0.28);
    outline: none;
}

.tela-moderna .btn-pesquisar .ui-button-icon-left,
.tela-moderna .btn-pesquisar .ui-icon {
    margin-right: 6px;
    color: #ffffff;
}

/* ===== Espaçamento utilitário ===== */
.tela-moderna .mtop25 {
    margin-top: 25px;
}

/* ===== Campo checkbox alinhado com inputs ===== */
.tela-moderna .campo-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding-top: 22px;
}

.tela-moderna .campo-checkbox label {
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.85rem;
    color: #44546a;
    font-weight: 500;
}

.tela-moderna .campo-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #2196f3;
}

/* ===== Tabela de fontes selecionadas ===== */
.tela-moderna .tabela-fontes-selecionadas {
    margin-top: 16px;
}

.tela-moderna .tabela-fontes-selecionadas .ui-datatable-header {
    display: none;
}

.tela-moderna .tabela-fontes-selecionadas table {
    width: 100%;
    border-collapse: collapse;
}

.tela-moderna .tabela-fontes-selecionadas th {
    background-color: #f4f7fc;
    color: #44546a;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 10px 12px;
    border-bottom: 2px solid #e6ecf5;
}

.tela-moderna .tabela-fontes-selecionadas td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef2f8;
    color: #333;
    font-size: 0.9rem;
}

.tela-moderna .tabela-fontes-selecionadas tr:hover td {
    background-color: #fafcff;
}

.tela-moderna .btn-remover-fonte {
    background: none;
    border: none;
    color: #d32f2f;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    font-size: 0.95rem;
    text-decoration: none;
}

.tela-moderna .btn-remover-fonte:hover {
    background-color: rgba(211, 47, 47, 0.1);
    color: #b71c1c;
    text-decoration: none;
}

/* ===== LOA / LDO / PPA ===== */
.tela-moderna .loa-conteudo {
    margin-top: 24px;
    display: block;
}

.tela-moderna .loa-info-lei {
    background-color: #f4f7fc;
    border-left: 4px solid #2196f3;
    padding: 16px 22px;
    border-radius: 4px;
    margin-bottom: 22px;
}

.tela-moderna .loa-info-lei h3 {
    margin: 0 0 6px;
    color: #1d3a6b;
    font-size: 1.05rem;
    font-weight: 600;
}

.tela-moderna .loa-info-lei h3 + h3 {
    margin-top: 14px;
}

.tela-moderna .loa-info-lei p {
    margin: 4px 0 0;
    color: #44546a;
    font-size: 0.92rem;
    line-height: 1.45;
}

.tela-moderna .loa-card-orcamento {
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: #ffffff;
    padding: 22px 28px;
    border-radius: 6px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 14px rgba(33, 150, 243, 0.22);
}

.tela-moderna .loa-card-orcamento .loa-card-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.92;
}

.tela-moderna .loa-card-orcamento .loa-card-valor {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.tela-moderna .loa-grid-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.tela-moderna .loa-link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 12px;
    background-color: #ffffff;
    border: 1px solid #e6ecf5;
    border-radius: 6px;
    color: #1d3a6b;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.4px;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tela-moderna .loa-link-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(29, 87, 135, 0.14);
    border-color: #b9d0ee;
    color: #1d3a6b;
    text-decoration: none;
}

.tela-moderna .loa-link-card img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.tela-moderna .loa-secao {
    margin-top: 28px;
}

.tela-moderna .loa-secao-titulo {
    color: #1d5987;
    font-weight: 500;
    text-align: center;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e6ecf5;
    font-size: 1.1rem;
}

/* ===== PPA pilares: Visão / Missão / Valores ===== */
.tela-moderna .ppa-pilares {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.tela-moderna .ppa-pilar {
    padding: 18px 20px;
    border-radius: 6px;
    border: 1px solid transparent;
    background-color: #f8fafd;
}

.tela-moderna .ppa-pilar h5 {
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 0.85rem;
    font-weight: 700;
}

.tela-moderna .ppa-pilar p {
    margin: 0;
    color: #44546a;
    font-size: 0.92rem;
    line-height: 1.5;
}

.tela-moderna .ppa-pilar-visao {
    background-color: #fff8e1;
    border-color: #ffe082;
}

.tela-moderna .ppa-pilar-visao h5 {
    color: #b07300;
}

.tela-moderna .ppa-pilar-missao {
    background-color: #fdecea;
    border-color: #f5b7b1;
}

.tela-moderna .ppa-pilar-missao h5 {
    color: #b71c1c;
}

.tela-moderna .ppa-pilar-valores {
    background-color: #e3f2fd;
    border-color: #90caf9;
}

.tela-moderna .ppa-pilar-valores h5 {
    color: #1565c0;
}