/* =======================================================
   GEO_PORTAL_OFICIAL.css
   Geoportal ECO Brasil Florestas
   Engª. Tatiane Menezes | @2026

   Documento oficial consolidado.
   Identidade visual:
   - Tema escuro corporativo
   - Sidebar recolhível
   - Dashboard inferior recolhível
   - Interface GIS profissional
======================================================= */


/* =======================================================
   1. VARIÁVEIS GLOBAIS
======================================================= */

:root {

    /* Fundo principal */
    --bg-dark: #0b1120;
    --bg-sidebar: #0f172a;
    --bg-card: #1e293b;
    --bg-card-hover: #334155;

    /* Glass */
    --glass-bg: rgba(15,23,42,0.88);
    --glass-border: rgba(255,255,255,0.10);

    /* Textos */
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --text-dim: #64748b;

    /* Identidade */
    --primary: #38bdf8;
    --primary-hover: #0284c7;
    --accent: #ffee01;

    --success:#22c55e;
    --danger:#ef4444;


    /* ===================================================
       SIMBOLOGIA OFICIAL USO DO SOLO
    =================================================== */

    --color-hid:#0000FE;
    --color-app:#0F8B8D;
    --color-arl:#94D180;
    --color-avr:#1E7600;
    --color-ard:#01DDFF;
    --color-talhao:#FFEE01;
    --color-aua:#FF7F00;
    --color-serv:#FF0191;


    /* Matrículas */

    --color-matricula:#e41a1c;


    /* Dimensões */

    --header-height:70px;

    --sidebar-width:360px;

    --dashboard-height:280px;


    /* Sombras */

    --shadow-soft:
    0 10px 25px rgba(0,0,0,0.35);

    --shadow-card:
    0 4px 15px rgba(0,0,0,0.25);


    /* Fonte */

    --font-main:
    'Inter',
    'Segoe UI',
    Arial,
    sans-serif;
}



/* =======================================================
   2. RESET
======================================================= */


*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}


html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    background:var(--bg-dark);

    color:var(--text-main);

    font-family:var(--font-main);

    -webkit-font-smoothing:antialiased;

}



/* =======================================================
   3. ESTRUTURA PRINCIPAL
======================================================= */


#app-container{

    width:100vw;

    height:100vh;

    display:flex;

    flex-direction:column;

    overflow:hidden;

}



/* Área abaixo do cabeçalho */


#app-body{

    flex:1;

    display:flex;

    position:relative;

    overflow:hidden;

}



/* =======================================================
   4. CABEÇALHO CORPORATIVO
======================================================= */


#app-header{

    height:var(--header-height);

    background:

    linear-gradient(
    135deg,
    #090d16,
    #102a43
    );


    border-bottom:

    1px solid var(--glass-border);


    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:0 22px;


    z-index:1000;


    box-shadow:

    0 5px 20px rgba(0,0,0,.35);

}



/* Marca */

.brand-section{

    display:flex;

    align-items:center;

    gap:14px;

}



.brand-logo{


    width:40px;

    height:40px;

    object-fit:contain;


    filter:

    drop-shadow(
    0 0 8px rgba(56,189,248,.35)
    );

}



.brand-info h1{


    font-size:17px;

    font-weight:700;

    color:#ffffff;

}



.brand-info p{


    margin-top:3px;

    font-size:12px;

    color:var(--text-muted);

}



/* Data / informações do sistema */


.header-status{


    display:flex;

    align-items:center;

    gap:12px;

}



.status-card{


    background:

    rgba(56,189,248,.12);


    border:

    1px solid rgba(56,189,248,.35);


    border-radius:20px;


    padding:

    6px 14px;


    font-size:12px;


    color:var(--primary);

}



/* =======================================================
   FIM PARTE 1/4
======================================================= */

/* =======================================================
   5. SIDEBAR PRINCIPAL (MENU LATERAL)
======================================================= */


#app-sidebar{

    width:var(--sidebar-width);

    height:100%;

    background:

    var(--glass-bg);


    backdrop-filter:blur(14px);


    border-right:

    1px solid var(--glass-border);


    display:flex;

    flex-direction:column;


    z-index:900;


    transition:

    margin-left .3s ease;


    box-shadow:

    5px 0 25px rgba(0,0,0,.25);

}



/* Sidebar recolhida */


#app-sidebar.collapsed{

    margin-left:

    calc(-1 * var(--sidebar-width));

}



/* Cabeçalho da sidebar */


.sidebar-header{


    padding:16px;


    border-bottom:

    1px solid var(--glass-border);

}



/* Busca */


.search-box{


    position:relative;

}


.search-box input{


    width:100%;


    background:#020617;


    border:

    1px solid var(--glass-border);


    color:white;


    padding:

    10px 12px 10px 36px;


    border-radius:8px;


    outline:none;


}



.search-box input:focus{


    border-color:

    var(--primary);

}



.search-box i{


    position:absolute;


    left:12px;


    top:50%;


    transform:

    translateY(-50%);


    color:

    var(--text-muted);

}




/* Conteúdo da sidebar */


.sidebar-content{


    flex:1;


    overflow-y:auto;


    padding:16px;

}



/* =======================================================
   6. CONTROLES GERAIS
======================================================= */


.master-controls{


    display:flex;


    justify-content:space-between;


    align-items:center;


    background:

    var(--bg-card);


    border:

    1px solid var(--glass-border);


    padding:12px;


    border-radius:10px;


    margin-bottom:16px;

}



.master-controls button{


    background:

    var(--primary);


    color:#06111f;


    border:none;


    padding:

    6px 12px;


    border-radius:6px;


    font-weight:600;


    cursor:pointer;

}



/* =======================================================
   7. TEMAS FIXOS
======================================================= */


/*
A ordem visual deverá respeitar o GEO_PORTAL_OFICIAL.md

Primeiro:

Camadas de Referência

Depois:

Abertura de Áreas
Confrontações
Embargos IBAMA
Hipsométrico e Relevo
Operações
Percentual de Argila
Processos Minerários
Queimadas
Terraceamento
Uso do Solo
Vegetação e Biomas

*/


.theme-group{


    margin-bottom:14px;


    background:

    rgba(30,41,59,.65);


    border:

    1px solid var(--glass-border);


    border-radius:10px;


    overflow:hidden;

}



.theme-header{


    padding:

    12px 14px;


    background:

    rgba(15,23,42,.95);


    display:flex;


    justify-content:space-between;


    align-items:center;


    cursor:pointer;


    font-size:13px;


    font-weight:600;


}



.theme-header:hover{


    background:

    var(--bg-card-hover);

}




.theme-status{


    font-size:11px;


    color:

    var(--text-muted);

}




/* Lista de arquivos */


.layer-list{


    padding:

    10px;


    display:flex;


    flex-direction:column;


    gap:8px;

}



.layer-item{


    background:

    rgba(2,6,23,.45);


    border:

    1px solid var(--glass-border);


    border-radius:7px;


    padding:9px;


    display:flex;


    justify-content:space-between;


    align-items:center;

}



.layer-item:hover{


    border-color:

    var(--primary);

}




.layer-name{


    font-size:13px;


    color:

    var(--text-main);

}




.layer-date{


    font-size:11px;


    color:

    var(--text-muted);


    margin-top:4px;

}




/* Sem dados */


.no-data{


    opacity:.45;


    font-style:italic;


    font-size:12px;

}



/* =======================================================
   8. BOTÃO RECOLHER SIDEBAR
======================================================= */


#btn-toggle-sidebar{


    position:absolute;


    top:16px;


    left:16px;


    z-index:999;



    width:42px;


    height:42px;



    background:

    var(--glass-bg);



    border:

    1px solid var(--glass-border);



    color:white;



    border-radius:8px;



    cursor:pointer;



    box-shadow:

    var(--shadow-soft);

}



#btn-toggle-sidebar:hover{


    color:

    var(--primary);


    border-color:

    var(--primary);

}



/* =======================================================
   FIM PARTE 2/4
======================================================= */

/* =======================================================
   9. ÁREA PRINCIPAL DO MAPA
======================================================= */


#map-container{

    flex:1;

    position:relative;

    width:100%;

    height:100%;

    overflow:hidden;

}



#map{

    width:100%;

    height:100%;

    background:#020617;

}



/* =======================================================
   10. SELETOR DE MAPAS BASE
======================================================= */


.basemap-widget{


    position:absolute;


    top:16px;


    right:16px;


    z-index:999;



    background:

    var(--glass-bg);



    backdrop-filter:

    blur(12px);



    border:

    1px solid var(--glass-border);



    border-radius:10px;



    padding:6px;



    display:flex;


    gap:6px;



    box-shadow:

    var(--shadow-soft);

}



.basemap-opt{


    background:

    transparent;


    color:

    var(--text-muted);


    border:

    1px solid transparent;


    padding:

    7px 12px;


    border-radius:6px;


    font-size:12px;


    font-weight:600;


    cursor:pointer;


    transition:.2s;

}



.basemap-opt:hover{


    color:white;


    background:

    rgba(255,255,255,.08);

}



.basemap-opt.active{


    background:

    var(--primary);


    color:#020617;


}



/* =======================================================
   11. LEGENDA DINÂMICA
======================================================= */


.legend-widget{


    position:absolute;


    bottom:30px;


    right:20px;


    width:250px;


    max-height:380px;


    overflow-y:auto;



    background:

    rgba(15,23,42,.92);



    backdrop-filter:

    blur(12px);



    border:

    1px solid var(--glass-border);



    border-radius:10px;


    z-index:800;



    box-shadow:

    var(--shadow-soft);

}



.legend-header{


    padding:

    12px;


    font-size:13px;


    font-weight:700;


    border-bottom:

    1px solid var(--glass-border);

}



.legend-item{


    display:flex;


    align-items:center;


    gap:10px;


    padding:

    8px 12px;


    font-size:12px;

}




.legend-color{


    width:16px;


    height:16px;


    border-radius:3px;


    border:

    1px solid rgba(255,255,255,.25);

}



/* =======================================================
   12. COORDENADAS DO CURSOR
======================================================= */


#coordinates-bar{


    position:absolute;


    bottom:10px;


    left:50%;


    transform:

    translateX(-50%);



    background:

    rgba(15,23,42,.85);



    border:

    1px solid var(--glass-border);



    padding:

    5px 14px;



    border-radius:20px;



    color:

    var(--text-muted);



    font-family:monospace;



    font-size:11px;



    z-index:900;

}



/* =======================================================
   13. PAINEL DE IDENTIFICAÇÃO DE FEIÇÕES
======================================================= */


.attribute-drawer{


    position:absolute;


    top:0;


    right:-420px;



    width:400px;


    height:100%;



    background:

    var(--bg-sidebar);



    border-left:

    1px solid var(--glass-border);



    z-index:950;



    transition:

    right .3s ease;



    box-shadow:

    -10px 0 30px rgba(0,0,0,.4);

}



.attribute-drawer.open{


    right:0;

}




.drawer-content{


    height:100%;


    overflow-y:auto;


    padding:20px;

}




.inspector-card{


    background:

    var(--bg-card);



    border:

    1px solid var(--glass-border);



    border-radius:10px;


    padding:15px;

}



.inspector-table{


    width:100%;


    border-collapse:collapse;


    font-size:12px;

}



.inspector-table td{


    padding:

    8px;


    border-bottom:

    1px solid rgba(255,255,255,.05);

}



.inspector-table td:first-child{


    color:

    var(--text-muted);

}




/* =======================================================
   14. MATRÍCULAS
======================================================= */


/*
Regra oficial:

- acima visualmente
- sem preenchimento
- contorno vermelho
- rótulo pelo campo MATRÍCULA
*/


.matricula-label-tooltip{


    background:

    rgba(9,13,22,.90)!important;



    border:

    1px solid var(--color-matricula)!important;



    color:white!important;



    font-size:11px!important;


    font-weight:700!important;



    padding:

    3px 7px!important;



    border-radius:5px!important;

}



.matricula-line{


    stroke:

    var(--color-matricula);



    stroke-width:2;



    fill:none;

}



/* =======================================================
   15. USO DO SOLO - LEGENDA OFICIAL
======================================================= */


.us-hid{

    background:var(--color-hid);

}


.us-app{

    background:var(--color-app);

}


.us-arl{

    background:var(--color-arl);

}


.us-avr{

    background:var(--color-avr);

}


.us-ard{

    background:var(--color-ard);

}


.us-talhao{

    background:var(--color-talhao);

}


.us-aua{

    background:var(--color-aua);

}


.us-serv{

    background:var(--color-serv);

}



/* =======================================================
   FIM PARTE 3/4
======================================================= */

/* =======================================================
   16. DASHBOARD INFERIOR RECOLHÍVEL
======================================================= */


#app-dashboard{


    height:

    var(--dashboard-height);


    background:

    var(--glass-bg);



    backdrop-filter:

    blur(14px);



    border-top:

    1px solid var(--glass-border);



    z-index:950;



    box-shadow:

    0 -10px 30px rgba(0,0,0,.35);



    transition:

    height .3s ease;



    display:flex;


    flex-direction:column;

}



#app-dashboard.collapsed{


    height:40px;

}



/* Cabeçalho dashboard */


.dashboard-header{


    height:40px;


    padding:

    0 16px;



    display:flex;



    align-items:center;



    justify-content:space-between;



    background:

    rgba(15,23,42,.95);



    border-bottom:

    1px solid var(--glass-border);



    cursor:pointer;

}



.dashboard-title{


    font-size:13px;


    font-weight:700;


    text-transform:uppercase;


    letter-spacing:.5px;


}



.dashboard-content{


    flex:1;


    display:grid;



    grid-template-columns:

    320px 280px 1fr;



    gap:15px;



    padding:

    14px;



    overflow:hidden;

}



#app-dashboard.collapsed .dashboard-content{


    display:none;

}



/* =======================================================
   17. CARDS DE MÉTRICAS
======================================================= */


.metric-card{


    background:

    var(--bg-card);



    border:

    1px solid var(--glass-border);



    border-radius:10px;



    padding:12px;



    box-shadow:

    var(--shadow-card);



}



.metric-label{


    color:

    var(--text-muted);



    font-size:11px;


    text-transform:uppercase;

}



.metric-value{


    margin-top:5px;



    font-size:22px;



    font-weight:700;



    color:white;

}



.metric-unit{


    font-size:11px;


    color:

    var(--text-dim);

}



/* =======================================================
   18. GRÁFICO PIZZA
======================================================= */


.chart-container{


    background:

    var(--bg-card);



    border:

    1px solid var(--glass-border);



    border-radius:10px;



    padding:12px;



}



.chart-title{


    font-size:12px;


    font-weight:700;


    color:

    var(--text-muted);

}



/* =======================================================
   19. TABELAS DO DASHBOARD
======================================================= */


.dashboard-table{


    width:100%;



    border-collapse:collapse;



    font-size:12px;

}



.dashboard-table th{


    text-align:left;



    color:

    var(--text-muted);



    padding:

    8px;



    border-bottom:

    1px solid var(--glass-border);

}



.dashboard-table td{


    padding:

    8px;



    border-bottom:

    1px solid rgba(255,255,255,.05);

}



/* =======================================================
   20. ÚLTIMA ATUALIZAÇÃO POR TEMA
======================================================= */


.theme-update{


    display:flex;



    align-items:center;



    gap:6px;



    font-size:11px;



    color:

    var(--text-muted);



    margin-top:5px;

}



.theme-update strong{


    color:

    var(--primary);


}



/* =======================================================
   21. CRÉDITOS NO CABEÇALHO
======================================================= */


.header-credit{


    font-size:11px;



    color:

    var(--text-muted);



    text-align:right;

}




/* =======================================================
   22. POPUPS LEAFLET
======================================================= */


.leaflet-popup-content-wrapper{


    background:

    #0f172a!important;



    color:white!important;



    border:

    1px solid var(--glass-border)!important;



    border-radius:10px!important;



    box-shadow:

    var(--shadow-soft)!important;

}



.leaflet-popup-tip{


    background:

    #0f172a!important;

}



.popup-title{


    color:

    var(--primary);



    font-weight:700;



    border-bottom:

    1px solid var(--glass-border);



    padding-bottom:5px;



    margin-bottom:8px;

}



.popup-row{


    display:flex;



    justify-content:space-between;



    font-size:12px;



    margin-bottom:5px;

}



/* =======================================================
   23. SCROLLBARS
======================================================= */


::-webkit-scrollbar{


    width:7px;

}



::-webkit-scrollbar-track{


    background:#020617;

}



::-webkit-scrollbar-thumb{


    background:#334155;



    border-radius:10px;

}



::-webkit-scrollbar-thumb:hover{


    background:#475569;

}



/* =======================================================
   24. RESPONSIVIDADE
======================================================= */


@media(max-width:1100px){


    :root{

        --sidebar-width:320px;

    }


    .dashboard-content{

        grid-template-columns:

        250px 220px 1fr;

    }


}



@media(max-width:768px){


    :root{

        --sidebar-width:100vw;

        --header-height:60px;

    }



    #app-sidebar{


        position:absolute;


        left:0;


        top:0;


        height:100%;


    }



    .dashboard-content{


        grid-template-columns:1fr;


        overflow-y:auto;

    }



    .basemap-widget{


        flex-direction:column;

    }


}



/* =======================================================
   25. REDESIGN DE EXPLORAÇÃO CARTOGRÁFICA
======================================================= */

:root{
    --dashboard-height:180px;
    --dashboard-open-height:var(--dashboard-height);
    --dashboard-collapsed-height:44px;
    --surface-raised:#162239;
    --surface-deep:#0b1323;
    --reference:#60d394;
    --focus-ring:0 0 0 3px rgba(56,189,248,.3);
}

.visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.brand-logo{
    height:42px;
    width:auto;
}

.header-tools{
    display:flex;
    align-items:center;
    gap:8px;
}

.btn-tool,
.icon-button{
    min-height:36px;
    border:1px solid rgba(56,189,248,.28);
    border-radius:8px;
    background:rgba(15,23,42,.72);
    color:var(--primary);
    cursor:pointer;
    transition:background .18s ease, border-color .18s ease, transform .18s ease;
}

.btn-tool{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:0 11px;
    font:600 12px var(--font-main);
}

.icon-button{
    display:inline-grid;
    place-items:center;
    width:36px;
    padding:0;
}

.btn-tool:hover,
.icon-button:hover{
    background:rgba(56,189,248,.14);
    border-color:var(--primary);
    transform:translateY(-1px);
}

.btn-tool:focus-visible,
.icon-button:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}

.sidebar-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 16px 14px;
    border-bottom:1px solid var(--glass-border);
}

.sidebar-eyebrow{
    margin:0 0 3px;
    color:var(--text-dim);
    font-size:10px;
    font-weight:700;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.sidebar-heading h2{
    margin:0;
    color:var(--text-main);
    font-size:18px;
}

.sidebar-heading-actions{
    display:flex;
    gap:6px;
}

.sidebar-content{
    padding:12px;
}

#layerTreeContainer{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding-top:12px;
}

.layer-accordion{
    overflow:hidden;
    border:1px solid rgba(148,163,184,.17);
    border-radius:10px;
    background:rgba(15,23,42,.7);
}

.reference-accordion{
    border-color:rgba(96,211,148,.36);
    background:linear-gradient(135deg,rgba(20,58,57,.43),rgba(15,23,42,.9));
}

.layer-accordion-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:52px;
    padding:0 12px;
    border:0;
    background:transparent;
    color:var(--text-main);
    cursor:pointer;
    text-align:left;
}

.layer-accordion-header:hover{
    background:rgba(148,163,184,.08);
}

.layer-accordion-title,
.layer-accordion-actions,
.layer-group-header,
.layer-toggle-row,
.feature-inspector-header,
.dashboard-title,
.dashboard-header-meta{
    display:flex;
    align-items:center;
}

.layer-accordion-title{
    min-width:0;
    gap:9px;
    font-size:14px;
    font-weight:700;
}

.layer-accordion-title i{
    color:var(--primary);
    font-size:16px;
}

.reference-accordion .layer-accordion-title i{
    color:var(--reference);
}

.layer-accordion-actions{
    gap:10px;
}

.layer-count{
    min-width:22px;
    padding:3px 7px;
    border-radius:99px;
    background:rgba(56,189,248,.18);
    color:#b9e9ff;
    font-size:11px;
    font-weight:800;
    text-align:center;
}

.reference-accordion .layer-count{
    background:rgba(96,211,148,.16);
    color:#b8f4d2;
}

.accordion-chevron{
    color:var(--text-dim);
    transition:transform .2s ease;
}

.layer-accordion.is-open .accordion-chevron{
    transform:rotate(180deg);
}

.layer-accordion-body{
    padding:0 10px 10px;
    border-top:1px solid rgba(148,163,184,.12);
}

.reference-layer-control,
.layer-group{
    margin-top:8px;
    border:1px solid rgba(148,163,184,.13);
    border-radius:8px;
    background:rgba(2,6,23,.36);
}

.layer-toggle-row,
.layer-group-header{
    min-height:42px;
    gap:9px;
    padding:7px 9px;
    cursor:pointer;
}

.layer-toggle-row input,
.layer-group-header input,
.layer-class-row input{
    width:16px;
    height:16px;
    margin:0;
    accent-color:var(--primary);
    cursor:pointer;
}

.is-matriculas .layer-toggle-row input{
    accent-color:var(--color-matricula);
}

.layer-toggle-copy{
    display:flex;
    min-width:0;
    flex:1;
    flex-direction:column;
    gap:1px;
    color:var(--text-main);
    font-size:13px;
    font-weight:600;
}

.layer-toggle-copy small,
.layer-group-header small,
.layer-class-row time{
    color:var(--text-dim);
    font-size:10px;
    font-weight:500;
}

.layer-group-header{
    justify-content:flex-start;
    color:var(--text-main);
    font-size:12px;
    font-weight:700;
}

.layer-group-header span{
    flex:1;
}

.layer-group-header i{
    margin-right:5px;
    color:var(--primary);
}

.layer-group-header small{
    min-width:18px;
    padding:2px 6px;
    border-radius:99px;
    background:rgba(148,163,184,.13);
    text-align:center;
}

.layer-class-list{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:3px 7px 7px 30px;
}

.layer-class-row{
    display:grid;
    grid-template-columns:16px minmax(0,1fr) auto;
    align-items:center;
    min-height:34px;
    gap:8px;
    color:var(--text-muted);
    cursor:pointer;
}

.layer-class-row:hover{
    color:var(--text-main);
}

.class-label{
    overflow:hidden;
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.feature-inspector{
    position:absolute;
    top:72px;
    right:16px;
    z-index:790;
    width:min(340px,calc(100% - 32px));
    max-height:calc(100% - 96px);
    overflow:auto;
    border:1px solid rgba(148,163,184,.23);
    border-radius:11px;
    background:rgba(11,19,35,.94);
    box-shadow:var(--shadow-soft);
}

.feature-inspector-header{
    justify-content:space-between;
    min-height:42px;
    padding:0 10px 0 13px;
    border-bottom:1px solid var(--glass-border);
    color:var(--text-main);
    font-size:12px;
    font-weight:700;
}

#inspectorContent{
    padding:12px;
}

.inspector-class{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:12px;
}

.inspector-class > span{
    width:11px;
    height:34px;
    border-radius:99px;
}

.inspector-class div{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.inspector-class small{
    color:var(--text-dim);
    font-size:10px;
    text-transform:uppercase;
}

.inspector-class strong{
    color:var(--text-main);
    font-size:14px;
}

#inspectorContent dl{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
    gap:8px 12px;
    margin:0;
    font-size:12px;
}

#inspectorContent dt{ color:var(--text-dim); }
#inspectorContent dd{ margin:0; color:var(--text-main); overflow-wrap:anywhere; }

.map-credit{
    position:absolute;
    right:10px;
    bottom:7px;
    z-index:799;
    padding:3px 8px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:5px;
    background:rgba(15,23,42,.85);
    color:rgba(248,250,252,.72);
    font-size:10px;
    pointer-events:none;
}

#app-dashboard{
    position:relative;
    height:var(--dashboard-open-height);
    min-height:var(--dashboard-open-height);
    flex:0 0 var(--dashboard-open-height);
    transition:height .22s ease, min-height .22s ease, flex-basis .22s ease;
}

#app-dashboard.is-resizing{ transition:none; }

#app-dashboard.collapsed{
    height:var(--dashboard-collapsed-height);
    min-height:var(--dashboard-collapsed-height);
    flex-basis:var(--dashboard-collapsed-height);
}

.dashboard-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    height:44px;
    padding:0 16px;
    border:0;
    border-bottom:1px solid var(--glass-border);
    background:rgba(11,19,35,.94);
    color:var(--text-main);
    cursor:pointer;
}

.dashboard-resize-handle{
    position:absolute;
    top:-7px;
    left:0;
    z-index:2;
    display:grid;
    width:100%;
    height:14px;
    place-items:center;
    cursor:row-resize;
    touch-action:none;
}

.dashboard-resize-handle span{
    width:34px;
    height:3px;
    border-radius:99px;
    background:rgba(148,163,184,.65);
    box-shadow:0 1px 8px rgba(2,6,23,.7);
    transition:background .18s ease, width .18s ease;
}

.dashboard-resize-handle:hover span,
.dashboard-resize-handle:focus-visible span{
    width:46px;
    background:var(--primary);
}

#app-dashboard.collapsed .dashboard-resize-handle{ display:none; }

.dashboard-title{ gap:8px; font:700 13px var(--font-main); }
.dashboard-title i{ color:var(--primary); }
.dashboard-header-meta{ gap:10px; color:var(--text-dim); font-size:11px; }
#dashboardScopeBadge{ padding:3px 7px; border-radius:99px; background:rgba(56,189,248,.11); color:#b9e9ff; }

.dashboard-content{
    display:grid;
    flex:1 1 auto;
    min-height:0;
    grid-template-columns:190px minmax(290px,.9fr) minmax(360px,1.4fr);
    gap:12px;
    padding:10px 14px;
    overflow:hidden;
}

#app-dashboard.collapsed .dashboard-content{ display:none; }

.dashboard-summary,
.dashboard-groups,
.dashboard-classes{
    min-width:0;
    padding:9px 10px;
    border:1px solid rgba(148,163,184,.15);
    border-radius:9px;
    background:rgba(2,6,23,.3);
}

.dashboard-classes{
    display:flex;
    min-height:0;
    flex-direction:column;
}

.dashboard-summary{
    display:flex;
    justify-content:center;
    flex-direction:column;
}

.dashboard-kicker,
#metricSecondary{
    color:var(--text-dim);
    font-size:10px;
}

#metricTotalArea{
    margin:3px 0;
    color:var(--text-main);
    font-size:20px;
    font-variant-numeric:tabular-nums;
}

.dashboard-section-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:20px;
    color:var(--text-muted);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
}

.dashboard-section-heading button{
    border:0;
    background:transparent;
    color:var(--primary);
    cursor:pointer;
    font:600 11px var(--font-main);
}

.group-bars{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:8px;
}

.group-bar{
    position:relative;
    display:grid;
    grid-template-columns:1fr auto;
    gap:3px 8px;
    overflow:hidden;
    min-height:63px;
    padding:8px;
    border:1px solid rgba(148,163,184,.17);
    border-radius:7px;
    background:rgba(15,23,42,.72);
    color:var(--text-main);
    cursor:pointer;
    text-align:left;
}

.group-bar::before{
    position:absolute;
    bottom:0;
    left:0;
    width:var(--group-share);
    height:3px;
    background:var(--primary);
    content:'';
}

.group-bar.is-focused{
    border-color:var(--primary);
    background:rgba(56,189,248,.13);
}

.group-bar span,
.group-bar small{ font-size:11px; }
.group-bar strong{ font-size:12px; font-variant-numeric:tabular-nums; }
.group-bar small{ color:var(--text-dim); text-align:right; }

.class-bars{
    display:grid;
    flex:1 1 auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px 10px;
    min-height:0;
    margin-top:8px;
    overflow:auto;
    align-content:start;
    color:var(--text-dim);
    font-size:11px;
}

.class-bar-row{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:5px;
    overflow:hidden;
    min-height:29px;
    padding:6px 7px;
    border-radius:5px;
    background:rgba(15,23,42,.65);
    color:var(--text-muted);
    font-size:10px;
}

.class-bar-row::before{
    position:absolute;
    bottom:0;
    left:0;
    width:var(--class-share);
    height:2px;
    background:var(--class-color);
    content:'';
}

.class-bar-row span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.class-bar-row strong{ color:var(--text-main); font-variant-numeric:tabular-nums; }
.class-bar-row small{ color:var(--text-dim); }

.metadata-modal[hidden]{ display:none; }
.metadata-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:grid;
    place-items:center;
    padding:18px;
    background:rgba(2,6,23,.78);
    backdrop-filter:blur(6px);
}

.metadata-dialog{
    width:min(540px,100%);
    max-height:80vh;
    overflow:auto;
    border:1px solid rgba(148,163,184,.25);
    border-radius:12px;
    background:#0f172a;
}

.metadata-dialog-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:52px;
    padding:0 12px 0 16px;
    border-bottom:1px solid var(--glass-border);
}

.metadata-dialog-header h3{ margin:0; color:var(--text-main); font-size:15px; }
#metaModalBody{ padding:16px; color:var(--text-muted); font-size:13px; }

@media(max-width:1100px){
    .status-card{ display:none; }
    .dashboard-content{ grid-template-columns:170px minmax(250px,.9fr) minmax(280px,1.3fr); }
}

@media(max-width:800px){
    #app-header{ padding:0 12px; }
    .brand-info p{ display:none; }
    .brand-info h1{ max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .btn-tool span{ display:none; }
    .btn-tool{ width:44px; min-width:44px; min-height:44px; justify-content:center; padding:0; touch-action:manipulation; }
    .header-center{ margin-left:auto; }
    .theme-select-container select{ max-width:145px; }
    .dashboard-content{ grid-template-columns:1fr; overflow:auto; }
    #app-dashboard:not(.collapsed){ height:min(var(--dashboard-open-height),46vh,320px); min-height:min(var(--dashboard-open-height),46vh,320px); flex-basis:min(var(--dashboard-open-height),46vh,320px); }
    .class-bars{ max-height:none; }
}

@media(max-width:640px){
    :root{ --header-height:112px; }
    #app-header{
        height:var(--header-height);
        align-content:center;
        flex-wrap:wrap;
        gap:4px 8px;
        padding:6px 10px;
    }
    .brand-section{ min-width:0; flex:1 1 0; gap:8px; }
    .brand-logo{ width:32px; height:32px; }
    .brand-info h1{ max-width:150px; font-size:14px; }
    .header-tools{ flex:0 0 auto; gap:8px; }
    .header-center{ order:3; flex-basis:100%; min-width:0; margin:0; }
    .theme-select-container{ display:block; width:100%; }
    .theme-select-container select{ width:100%; max-width:none; min-height:40px; }
}

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{ scroll-behavior:auto!important; transition:none!important; }
}

.auth-shell{
    display:grid;
    min-height:100dvh;
    place-items:center;
    padding:24px;
    background:
        radial-gradient(circle at 20% 15%,rgba(96,211,148,.15),transparent 28rem),
        linear-gradient(145deg,#07111f,#101b31 58%,#07111f);
}

.login-card{
    display:grid;
    width:min(100%,390px);
    gap:13px;
    padding:30px;
    border:1px solid rgba(148,163,184,.22);
    border-radius:18px;
    background:rgba(11,19,35,.92);
    box-shadow:0 24px 70px rgba(0,0,0,.38);
    color:var(--text-main);
}

.login-logo{ width:168px; height:auto; margin-bottom:5px; }
.login-kicker{ color:var(--reference); font-size:10px; font-weight:800; letter-spacing:.12em; }
.login-card h1{ margin:0; font-size:28px; }
.login-card p{ margin:0; color:var(--text-muted); font-size:13px; line-height:1.5; }
.login-card label{ display:grid; gap:6px; color:var(--text-muted); font-size:12px; font-weight:700; }
.login-card input{ min-height:44px; border:1px solid rgba(148,163,184,.25); border-radius:8px; padding:0 12px; background:#07111f; color:var(--text-main); font:inherit; }
.login-card input:focus-visible{ outline:0; border-color:var(--primary); box-shadow:var(--focus-ring); }
.login-message{ min-height:20px; color:#fca5a5!important; }
.login-submit{ min-height:46px; border:0; border-radius:8px; background:var(--primary); color:#04101b; cursor:pointer; font:800 14px var(--font-main); }
.login-submit:hover{ filter:brightness(1.08); }

@media(max-width:420px){
    .auth-shell{ padding:16px; }
    .login-card{ padding:24px 20px; }
}

/* =======================================================
   FIM DO ARQUIVO

   GEO_PORTAL_OFICIAL.css

   Documento consolidado:
   Geoportal ECO Brasil Florestas
   Engª. Tatiane Menezes | @2026

======================================================= */