/* css/base.css */
:root {
    --gold-tuxtla: #C68A2C;
    --dark-tuxtla: #333;
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: var(--font-main);
    overflow: hidden;
}

.geoportal-container {
    display: grid;
    height: 100vh;
    width: 100vw;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 280px 1fr;
    transition: grid-template-columns 0.3s ease-in-out;
}

.geoportal-container.sidebar-collapsed {
    grid-template-columns: 0px 1fr;
}

.geoportal-header { grid-area: header; padding-top: var(--safe-area-top); }
.geoportal-footer { 
    grid-area: footer; 
    background-color: #333; 
    color: white; 
    padding: 5px 20px;
    font-size: 12px;
    padding-bottom: var(--safe-area-bottom); 
}

.btn-custom-tuxtla {
    background-color: var(--gold-tuxtla) !important;
    color: white !important;
    border: none;
}
.btn-custom-tuxtla:hover { background-color: #a97425 !important; }