html,
body,
.container.fluid {
    width: 100vw;
    min-height: 100vh;
}

.page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    /* Height auto adapts to navbar */

    grid-template-areas:
        "header"
        "main ";

    height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}


.app-page-header {
    grid-area: header;
    /* Ensure no margins interfere */
    margin: 0 !important;
    padding: 0 !important;
}

.page-main {
    grid-area: main;

    transition: opacity .5s ease;
    visibility: none;
    z-index: -1;
    opacity: 0;
}

.main-layout {
    display: grid;

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);

    grid-template-areas:
        "sidebar"
        "main";

    height: 100%;
    width: 100%;

    padding: 20px;
    gap: 20px;
}

/* (Eliminado regla redundante anterior para unificar lógica al final del archivo) */

.card-style {
    border: 1px solid #eaeaea;
    padding: 20px;
    border-radius: 5px;
    box-shadow: rgb(0 0 0 / 10%) 3px 8px 12px;
    overflow: hidden;
}

.no-padding {
    padding: 0;
}

.main-main {
    grid-area: main;
}

.main-sidebar {
    grid-area: sidebar;
}


#map-map {
    width: 100% !important;
    height: 100% !important;
}

/* ---- NAVBAR (NUEVO DISEÑO FINAL: LOGOS IZQ - INFO DER) ---- */
.navbar-top {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    /* Logos a la izquierda, Info a la derecha */

    height: 70px;
    width: 100%;

    flex-wrap: nowrap;
    /* IMPERATIVO: No permitir que baje el botón en escritorio/tablet */

    /* Padding ajustado a 30px por preferencia del usuario */
    padding: 0 30px !important;
    gap: 20px;

    box-sizing: border-box;
}

/* 1. Logos: Flujo normal a la izquierda */
.navigation-logo {
    position: static;
    transform: none;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;

    z-index: 10;
}

/* Enlaces de los logos */
.navigation-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* 2. Botón de Info: Flujo normal a la derecha */
.navigation-info {
    display: flex;
    align-items: center;
    z-index: 20;
}

/* Ajustes Intermedios: Se activa desde 1200px para ASEGURAR que quepa todo en una línea antes de llegar a móvil */
@media only screen and (max-width: 1200px) {
    .navbar-top {
        padding: 0 30px !important;
        /* Un poco más de aire (30px) y FORZADO */
        gap: 10px;
    }

    .nav-logo-img {
        height: 42px;
        /* Logos un poco más chicos */
    }
}

/* Ocultar "i" en desktop */
.info-text-mobile {
    display: none;
}

/* Ajustes para moviles */
@media only screen and (max-width: 768px) {
    .navbar-top {
        flex-wrap: nowrap;
        justify-content: space-between;
        height: auto;
        padding: 8px 10px;
        gap: 8px;
    }

    .navigation-logo {
        gap: 8px;
        justify-content: center;
        flex-shrink: 1;
        min-width: 0;
    }

    .nav-logo-img {
        max-width: 25vw;
        height: auto;
        max-height: 35px;
        object-fit: contain;
    }

    .navigation-info {
        width: auto;
        margin-top: 0;
        flex-shrink: 0;
    }

    /* Boton info: circulo con "i" */
    .navbar-info {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        min-width: auto !important;
    }

    .info-text-full {
        display: none !important;
    }

    .info-text-mobile {
        display: inline !important;
        font-weight: 700;
        font-style: italic;
        font-family: Georgia, serif;
        font-size: 1.1rem;
    }
}

/* Landscape con poca altura: boton (i) tambien */
@media (max-height: 500px) and (orientation: landscape) {
    .info-text-full {
        display: none !important;
    }

    .info-text-mobile {
        display: inline !important;
        font-weight: 700;
        font-style: italic;
        font-family: Georgia, serif;
        font-size: 0.9rem;
    }

    .navbar-info {
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        min-width: auto !important;
    }
}

/* --- FIX SIDEBAR HEIGHT --- */
/* Forzar que el layout de bslib llene el espacio vertical disponible (1fr grid row) */
.bslib-sidebar-layout {
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
}

/* --- FIX PLOTLY WIDGET HEIGHT --- */
/* Que el widget de plotly llene la card completa y no colapse al re-renderizar */
.card .bslib-card-body {
    flex: 1 1 auto;
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.card .bslib-card-body .html-fill-container,
.card .bslib-card-body .shiny-html-output,
.card .bslib-card-body .jupyter-widgets {
    flex: 1 1 auto;
    min-height: 500px;
    height: 100% !important;
}

.card .bslib-card-body .plotly.plot-container {
    height: 100% !important;
    min-height: 500px;
}

.card .bslib-card-body .js-plotly-plot {
    height: 100% !important;
    min-height: 500px;
}

/* --- RESPONSIVE FIX --- */
/* Mobile: Sobrescribir el ancho fijo de Python (400px) para que sea fluido */
@media (max-width: 767px) {
    .bslib-sidebar-layout>.sidebar {
        width: 100% !important;
        flex-basis: auto !important;
        max-width: 100% !important;
    }
}