:root {
    --verde-institucional: #17633a;
    --verde-escuro: #0f4a2b;
    --verde-claro: #e9f3ed;
    --azul-territorial: #0b5f91;
    --dourado-suave: #c69a2d;
    --texto-principal: #243039;
    --texto-secundario: #5d6b75;
    --borda: #d8e1e7;
    --fundo: #eef2f4;
    --branco: #ffffff;
    --sombra: 0 4px 14px rgba(23, 42, 54, 0.10);
    --altura-cabecalho: 118px;
    --altura-menu: 48px;
    --altura-rodape: 34px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: "Segoe UI", Arial, sans-serif; color: var(--texto-principal); background: var(--fundo); }
body { display: flex; flex-direction: column; overflow: hidden; }
.cabecalho-institucional { height: var(--altura-cabecalho); flex: 0 0 var(--altura-cabecalho); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 22px; background: var(--branco); border-bottom: 4px solid var(--verde-institucional); box-shadow: 0 2px 9px rgba(0,0,0,.12); z-index: 1200; }
.identidade-institucional { min-width: 0; display: flex; align-items: center; gap: 17px; }
.emblema { width: 92px; max-height: 100px; object-fit: contain; flex: 0 0 auto; }
.identidade-textos { min-width: 0; }
.direccao-nacional { font-size: 14px; font-weight: 700; color: var(--verde-escuro); letter-spacing: .15px; margin-bottom: 4px; }
.titulo-geoportal { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.08; font-weight: 800; color: #153344; letter-spacing: .2px; }
.subtitulo-geoportal { margin-top: 4px; font-size: 14px; color: var(--texto-secundario); }
.versao-sistema { flex: 0 0 auto; padding: 7px 11px; border-radius: 18px; background: var(--verde-claro); color: var(--verde-escuro); font-size: 12px; font-weight: 800; }
.menu-principal { height: var(--altura-menu); flex: 0 0 var(--altura-menu); display: flex; align-items: stretch; gap: 3px; padding: 5px 18px; overflow-x: auto; background: var(--verde-escuro); box-shadow: 0 2px 6px rgba(0,0,0,.16); z-index: 1100; }
.menu-principal button { width: auto; min-width: max-content; margin: 0; padding: 0 15px; border: 0; border-radius: 5px; background: transparent; color: var(--branco); cursor: pointer; font-size: 13px; font-weight: 700; transition: background .18s ease; }
.menu-principal button:hover, .menu-principal button.ativo { background: rgba(255,255,255,.18); }
.conteudo-principal { min-height: 0; flex: 1 1 auto; position: relative; overflow: hidden; }
.oculto { display: none !important; }
.dashboard-area { width: 100%; height: 100%; padding: 18px 22px 24px; overflow-y: auto; background: var(--fundo); }
.dashboard-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.dashboard-cabecalho h1 { margin: 0; color: #153344; font-size: 24px; }
.dashboard-cabecalho p { margin: 5px 0 0; color: var(--texto-secundario); font-size: 13px; }
.dashboard-indicadores { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.card-indicador { position: relative; overflow: hidden; min-height: 102px; padding: 16px; background: var(--branco); border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra); }
.card-indicador::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--azul-territorial); }
.card-indicador-sigit::before { background: var(--verde-institucional); }
.card-indicador-dportal::before { background: var(--dourado-suave); }
.card-indicador span { display: block; font-size: 12px; font-weight: 700; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: .35px; }
.card-indicador strong { display: block; margin-top: 8px; color: #153344; font-size: clamp(20px, 2vw, 28px); line-height: 1.1; white-space: nowrap; }
.dashboard-grelha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-bottom: 8px; }
.dashboard-grafico-card { min-width: 0; padding: 16px; background: var(--branco); border: 1px solid var(--borda); border-radius: 10px; box-shadow: var(--sombra); }
.dashboard-grafico-largo { grid-column: 1 / -1; }
.dashboard-grafico-titulo { margin-bottom: 12px; font-size: 15px; font-weight: 800; color: #153344; }
.dashboard-grafico-container { position: relative; width: 100%; min-height: 300px; }
.dashboard-grafico-provincias-container { height: 360px; }
.dashboard-grafico-fontes-container { height: 310px; }
.dashboard-grafico-erro { margin-top: 12px; padding: 10px; color: #8b1e1e; background: #fdecec; border: 1px solid #efb5b5; border-radius: 5px; font-size: 13px; }
.dashboard-grafico-reserva { min-height: 365px; }
.dashboard-placeholder { height: 310px; display: grid; place-items: center; padding: 25px; border: 2px dashed #cfd9df; border-radius: 8px; color: #71808a; text-align: center; background: #f8fafb; }
.app-layout { display: grid; grid-template-columns: 350px minmax(0, 1fr); width: 100%; height: 100%; }
.sidebar { min-width: 0; display: flex; flex-direction: column; background: var(--branco); border-right: 1px solid var(--borda); box-shadow: 2px 0 8px rgba(0,0,0,.10); z-index: 900; }
.sidebar-header { flex: 0 0 auto; padding: 14px 16px; background: var(--verde-claro); border-bottom: 1px solid var(--borda); color: var(--verde-escuro); font-weight: 800; }
.sidebar-body { min-height: 0; padding: 14px; overflow-y: auto; }
.map-area { position: relative; min-width: 0; min-height: 0; }
#map { width: 100%; height: 100%; }
button { width: 100%; padding: 9px; border: none; border-radius: 6px; cursor: pointer; font-weight: 700; margin-bottom: 8px; }
.btn-primary { background: var(--azul-territorial); color: var(--branco); }
.btn-secondary { background: #e0e6eb; color: #263238; }
.map-buttons { display: flex; gap: 6px; margin-bottom: 12px; }
.map-buttons button { margin-bottom: 0; }
.camadas { padding: 10px 0; margin: 10px 0; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.camadas-titulo, .resultados-titulo { margin-bottom: 8px; color: var(--verde-escuro); font-size: 13px; font-weight: 800; }
.camada-item { display: flex; align-items: center; margin-bottom: 6px; color: #263238; font-size: 13px; }
.camada-item input { width: auto; margin: 0 7px 0 0; }
.resultado-info { color: #455a64; font-size: 12px; }
.coords { position: absolute; left: 15px; bottom: 12px; z-index: 1000; padding: 6px 10px; border-radius: 6px; background: rgba(255,255,255,.95); font-size: 12px; }
.popup { position: absolute; left: -50px; bottom: 12px; min-width: 280px; padding: 13px; background: var(--branco); border: 1px solid #cfd8dc; border-radius: 8px; box-shadow: 0 3px 12px rgba(0,0,0,.35); }
.popup-closer { float: right; color: #b00020; font-weight: bold; text-decoration: none; }
.rodape-institucional { height: var(--altura-rodape); flex: 0 0 var(--altura-rodape); display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 15px; background: #17382a; color: rgba(255,255,255,.88); font-size: 11px; white-space: nowrap; overflow: hidden; }
@media (max-width: 1200px) { .dashboard-indicadores { grid-template-columns: repeat(3, minmax(160px, 1fr)); } }
@media (max-width: 900px) { .dashboard-indicadores { grid-template-columns: repeat(2, minmax(150px, 1fr)); } .dashboard-grelha { grid-template-columns: 1fr; } .dashboard-grafico-largo { grid-column: auto; } .app-layout { grid-template-columns: 300px minmax(0,1fr); } .rodape-institucional span:nth-child(2) { display:none; } }

/* ==================================================
   AJUSTES VISUAIS — GEOPORTAL VERSÃO 4.4
================================================== */

.cabecalho-institucional {
    padding: 8px 24px;
}

.titulo-geoportal {
    color: #063f28;
    font-size: clamp(25px, 2.55vw, 38px);
    letter-spacing: .35px;
}

.subtitulo-geoportal {
    font-size: 15px;
}

.versao-sistema {
    padding: 12px 18px;
    border-radius: 8px;
    color: #fff;
    background: var(--verde-escuro);
    box-shadow: 0 4px 12px rgba(15, 74, 43, .20);
    font-size: 14px;
}

.menu-principal {
    justify-content: space-between;
    padding: 6px 24px;
}

.menu-principal button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 18px;
    font-size: 14px;
}

.menu-icone {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    font-size: 17px;
    line-height: 1;
}

.dashboard-area {
    padding: 18px 24px 24px;
}

.dashboard-cabecalho {
    align-items: center;
}

.dashboard-atualizacao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--texto-secundario);
    font-size: 12px;
    white-space: nowrap;
}

.dashboard-atualizacao-icone {
    color: var(--verde-institucional);
    font-size: 16px;
}

.dashboard-indicadores {
    grid-template-columns: repeat(5, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.card-indicador {
    min-height: 100px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 17px 18px;
    border-radius: 9px;
}

.card-indicador::before {
    display: none;
}

.card-indicador > div {
    min-width: 0;
}

.card-indicador-icone {
    width: 50px;
    flex: 0 0 50px;
    display: grid !important;
    place-items: center;
    margin: 0 !important;
    color: var(--verde-institucional) !important;
    font-size: 35px !important;
    line-height: 1;
}

.card-indicador-dportal .card-indicador-icone,
.card-indicador-dportal strong {
    color: #c79100 !important;
}

.card-indicador-sigit strong {
    color: var(--verde-institucional);
}

.dashboard-grelha {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 13px;
}

.dashboard-grafico-card,
.dashboard-grafico-largo {
    grid-column: span 2;
    min-height: 330px;
}

.dashboard-grafico-card:nth-child(4),
.dashboard-grafico-card:nth-child(5) {
    grid-column: span 3;
}

.dashboard-grafico-container,
.dashboard-grafico-provincias-container,
.dashboard-grafico-fontes-container,
.dashboard-grafico-genero-container {
    min-height: 0;
    height: 275px;
}

.dashboard-grafico-finalidades-container {
    height: 275px;
}

/* ==================================================
   SISTEMAS INSTITUCIONAIS
================================================== */

.sistemas-institucionais {
    margin-top: 14px;
    margin-bottom: 8px;
    padding: 18px 20px 16px;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: 10px;
    box-shadow: var(--sombra);
}

.sistemas-institucionais-cabecalho {
    margin-bottom: 14px;
}

.sistemas-institucionais-cabecalho h2 {
    margin: 0;
    color: #102c3e;
    font-size: 20px;
}

.sistemas-institucionais-cabecalho p {
    margin: 5px 0 0;
    color: var(--texto-secundario);
    font-size: 12px;
}

.sistemas-institucionais-grelha {
    display: grid;
    grid-template-columns: repeat(6, minmax(145px, 1fr));
    gap: 10px 12px;
}

.sistema-link {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    color: var(--verde-escuro);
    background: linear-gradient(180deg, #f8fcfa 0%, #edf6f1 100%);
    border: 1px solid #c7ddcf;
    border-radius: 7px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.sistema-link:hover {
    transform: translateY(-2px);
    background: #e2f0e7;
    box-shadow: 0 5px 12px rgba(23, 99, 58, .15);
}

.sistema-nome {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.sistema-icone-principal {
    width: 24px;
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    color: var(--verde-escuro);
    font-size: 20px;
    line-height: 1;
}

.sistema-icone {
    flex: 0 0 auto;
    font-size: 16px;
}

.sistema-link-dportal {
    color: #fff;
    background: linear-gradient(135deg, #0b5f91 0%, #07446c 100%);
    border-color: #07446c;
}

.sistema-link-dportal:hover {
    background: linear-gradient(135deg, #084f7a 0%, #063858 100%);
    box-shadow: 0 5px 14px rgba(11, 95, 145, .25);
}

.sistema-link-dportal .sistema-icone-principal {
    color: #fff;
}

.sistema-link-conflitos {
    color: #fff;
    background: linear-gradient(135deg, #e0a800 0%, #b98100 100%);
    border-color: #b98100;
}

.sistema-link-conflitos:hover {
    background: linear-gradient(135deg, #ca9700 0%, #9e6f00 100%);
    box-shadow: 0 5px 14px rgba(198, 154, 45, .28);
}

.sistema-link-conflitos .sistema-icone-principal {
    color: #fff;
}

.sistemas-institucionais-nota {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--borda);
    color: var(--texto-secundario);
    font-size: 11px;
}

.rodape-institucional {
    justify-content: space-between;
    padding: 0 40px;
    background: linear-gradient(90deg, #064728 0%, #0b5e37 55%, #064728 100%);
    font-weight: 600;
}

@media (max-width: 1350px) {
    .menu-principal {
        justify-content: flex-start;
    }

    .dashboard-indicadores {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }

    .sistemas-institucionais-grelha {
        grid-template-columns: repeat(4, minmax(145px, 1fr));
    }
}

@media (max-width: 1050px) {
    .dashboard-grelha {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grafico-card,
    .dashboard-grafico-largo,
    .dashboard-grafico-card:nth-child(4),
    .dashboard-grafico-card:nth-child(5) {
        grid-column: span 1;
    }

    .sistemas-institucionais-grelha {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }
}

@media (max-width: 760px) {
    .dashboard-cabecalho {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .dashboard-indicadores,
    .dashboard-grelha {
        grid-template-columns: 1fr;
    }

    .sistemas-institucionais-grelha {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }

    .rodape-institucional {
        justify-content: center;
        padding: 0 12px;
    }
}

@media (max-width: 460px) {
    .sistemas-institucionais-grelha {
        grid-template-columns: 1fr;
    }
}


/* ==================================================
   ESTADO DA PLATAFORMA — VERSÃO 4.4.0
================================================== */

.cabecalho-institucional {
    position: relative;
}

.aviso-desenvolvimento {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1300;
    min-width: 310px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    overflow: hidden;
    color: #fff;
    background: #101010;
    border: 2px solid #f3c400;
    border-radius: 7px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .28);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 1.2px;
    white-space: nowrap;
}

.aviso-faixa {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 58px;
    background: repeating-linear-gradient(
        -45deg,
        #f4c400 0,
        #f4c400 10px,
        #111 10px,
        #111 20px
    );
}

.aviso-faixa-esquerda { left: 0; }
.aviso-faixa-direita { right: 0; }

.aviso-icone,
.aviso-texto {
    position: relative;
    z-index: 1;
}

.aviso-icone {
    margin-left: 38px;
    font-size: 18px;
}

.aviso-texto {
    margin-right: 38px;
}

.faixa-beta {
    position: fixed;
    top: 22px;
    right: -47px;
    z-index: 2500;
    width: 180px;
    padding: 8px 0;
    transform: rotate(45deg);
    color: #fff;
    background: #cf2e2e;
    border-top: 1px solid rgba(255,255,255,.45);
    border-bottom: 1px solid rgba(0,0,0,.18);
    box-shadow: 0 4px 10px rgba(0,0,0,.25);
    text-align: center;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.1px;
    pointer-events: none;
}

.marca-agua-desenvolvimento {
    position: absolute;
    left: 50%;
    top: 53%;
    z-index: 850;
    transform: translate(-50%, -50%) rotate(-28deg);
    color: rgba(41, 55, 64, .10);
    font-size: clamp(48px, 7vw, 108px);
    font-weight: 900;
    letter-spacing: 5px;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 1px 1px 0 rgba(255,255,255,.28);
    pointer-events: none;
    user-select: none;
}

@media (max-width: 1180px) {
    .aviso-desenvolvimento {
        left: auto;
        right: 118px;
        transform: translateY(-50%);
        min-width: 270px;
        font-size: 13px;
    }
}

@media (max-width: 880px) {
    .aviso-desenvolvimento {
        top: auto;
        bottom: 5px;
        left: 50%;
        right: auto;
        height: 32px;
        min-width: 245px;
        transform: translateX(-50%);
        font-size: 11px;
    }

    .aviso-icone { font-size: 14px; }
    .versao-sistema { align-self: flex-start; }
    .marca-agua-desenvolvimento { font-size: clamp(32px, 8vw, 60px); }
}

@media (max-width: 600px) {
    .faixa-beta { display: none; }
    .aviso-desenvolvimento { min-width: 220px; }
    .aviso-faixa { width: 44px; }
    .aviso-icone { margin-left: 30px; }
    .aviso-texto { margin-right: 30px; }
}