:root,
[data-bs-theme="light"] {
    --dap-page-bg: #eef2f6;
    --dap-surface: #ffffff;
    --dap-surface-alt: #f7f9fb;
    --dap-border: #d8e0e8;
    --dap-text: #1f2933;
    --dap-muted: #5f6b7a;
    --dap-link: #1f6fb2;
    --dap-nav-bg: #ffffff;
    --dap-nav-active: #e7f1fb;
    --dap-shadow: rgba(15, 23, 42, .08);
}

[data-bs-theme="dark"] {
    --dap-page-bg: #111827;
    --dap-surface: #1f2937;
    --dap-surface-alt: #273447;
    --dap-border: #3d4b5f;
    --dap-text: #e5e7eb;
    --dap-muted: #b6c2d1;
    --dap-link: #8cc8ff;
    --dap-nav-bg: #182232;
    --dap-nav-active: #253752;
    --dap-shadow: rgba(0, 0, 0, .32);
}

body {
    background: var(--dap-page-bg);
    color: var(--dap-text);
}

a {
    color: var(--dap-link);
}

/* Header titles: Alegreya (loaded in layout/base.html), a free lookalike of gob.mx "Patria" */
:root {
    --dap-heading-font: "Alegreya", Georgia, "Times New Roman", serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.app-brand,
.panel-heading,
.api-card-header {
    font-family: var(--dap-heading-font);
    font-weight: 600;
}

.app-shell {
    min-height: 100vh;
}

.app-navbar {
    min-height: 110px;
    background: var(--dap-surface);
    border-bottom: 1px solid var(--dap-border);
    box-shadow: 0 1px 8px var(--dap-shadow);
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--dap-text);
    font-size: 35px;
    font-weight: 650;
    letter-spacing: 0;
}

.app-brand:hover,
.app-brand:focus {
    color: var(--dap-link);
}

.app-brand img {
    height: 94px;
    width: auto;
}

.app-menu-button {
    border-color: var(--dap-border);
    color: var(--dap-text);
}

.theme-toggle {
    min-width: 86px;
    border-color: var(--dap-border);
    color: var(--dap-text);
}

.theme-toggle:hover,
.theme-toggle:focus,
.app-menu-button:hover,
.app-menu-button:focus {
    color: var(--dap-link);
    border-color: var(--dap-link);
}

.app-sidebar {
    position: fixed;
    top: 110px;
    bottom: 0;
    left: 0;
    width: 240px;
    flex-direction: column;
    background: var(--dap-nav-bg);
    border-right: 1px solid var(--dap-border);
    box-shadow: 1px 0 8px var(--dap-shadow);
    z-index: 1010;
}

.app-offcanvas {
    background: var(--dap-nav-bg);
    color: var(--dap-text);
}

.app-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 18px 14px;
}

.app-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--dap-text);
    text-decoration: none;
    border-radius: 6px;
}

.app-nav-link:hover,
.app-nav-link:focus,
.app-nav-link.active {
    color: var(--dap-link);
    background: var(--dap-nav-active);
}

.app-nav-link.active {
    font-weight: 600;
}

/* vertical pill marking the current page */
.app-nav-link.active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 4px;
    background: var(--dap-link);
}

.app-main {
    padding: 132px 18px 32px;
}

@media (min-width: 992px) {
    .app-main {
        margin-left: 240px;
        padding: 132px 32px 40px;
    }

    /* Pages whose main row stretches to the bottom of the window */
    .app-main-fill {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        padding-bottom: 24px;
    }

    .app-main-fill > .fill-row {
        flex: 1 1 auto;
    }

    /* Data Request: the map fits the window exactly; the longer form column
       overflows the row and scrolls with the page */
    .datarequest-page {
        height: 100vh;
    }

    /* nowrap: in a wrapping row the line (and the stretched map column) would
       take the form's height instead of the row's */
    .datarequest-page > .fill-row {
        min-height: 0;
        flex-wrap: nowrap;
    }

    .datarequest-form-col {
        align-self: flex-start;
        padding-bottom: 40px;
    }

    .datarequest-map-col {
        display: flex;
        flex-direction: column;
    }

    .datarequest-map-col #mapDiv {
        flex: 1 1 auto;
        height: auto;
        min-height: 480px;
    }
}

.datarequest-map-col #mapDiv {
    height: 480px;
}

.jumbotron,
.panel,
.card,
.modal-content,
.dropdown-menu,
.tab-content,
.well,
.bs-example,
.bs-example2,
.bs-example3 {
    background: var(--dap-surface) !important;
    border-color: var(--dap-border) !important;
    color: var(--dap-text);
}

.jumbotron,
.panel,
.well,
.bs-example,
.bs-example2,
.bs-example3 {
    border: 1px solid var(--dap-border);
    border-radius: 8px;
    box-shadow: 0 1px 4px var(--dap-shadow);
}

.jumbotron {
    padding: 22px;
    margin-bottom: 24px;
}

.jumbotron p {
    font-size: 1.15rem;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 20px;
    list-style: none;
    background: var(--dap-surface-alt);
    border: 1px solid var(--dap-border);
    border-radius: 6px;
}

.breadcrumb > li + li::before {
    content: "/";
    padding-right: 8px;
    color: var(--dap-muted);
}

.breadcrumb .active,
small,
.text-muted {
    color: var(--dap-muted) !important;
}

.panel {
    margin-bottom: 20px;
}

.panel-heading {
    padding: 12px 16px;
    border-bottom: 1px solid var(--dap-border);
    border-radius: 8px 8px 0 0;
    font-weight: 650;
}

.panel-body {
    padding: 16px;
}

.panel-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--dap-border);
    background: var(--dap-surface-alt);
    border-radius: 0 0 8px 8px;
}

.panel-primary > .panel-heading,
.panel-green > .panel-heading,
.panel-red > .panel-heading,
.panel-yellow > .panel-heading {
    color: #ffffff;
}

.panel-primary > .panel-heading {
    background: #2f6fa8;
}

.panel-green > .panel-heading {
    background: #32865a;
}

.panel-red > .panel-heading {
    background: #b94a48;
}

.panel-yellow > .panel-heading {
    background: #b67b26;
}

.panel-green a {
    color: #32865a;
}

.panel-red a {
    color: #b94a48;
}

.panel-yellow a {
    color: #b67b26;
}

.huge {
    font-size: 40px;
    line-height: 1;
}

.form-control,
.form-select,
select,
textarea,
input[type="text"] {
    background-color: var(--bs-body-bg);
    border-color: var(--dap-border);
    color: var(--dap-text);
}

.input-sm {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 13px;
}

.input-group-addon {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    color: var(--dap-muted);
    border: 1px solid var(--dap-border);
    background: var(--dap-surface-alt);
}

.radio-inline,
.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 16px;
}

.nav-tabs {
    border-color: var(--dap-border);
}

.nav-tabs > li {
    display: inline-block;
    /* overlap the tab strip's bottom border so the active tab joins its content */
    margin-bottom: -1px;
}

.nav-tabs > li > a {
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 6px 6px 0 0;
}

.nav-tabs > li.active > a,
.nav-tabs > li > a.active {
    color: var(--dap-text);
    background: var(--dap-surface);
    border-color: var(--dap-border) var(--dap-border) var(--dap-surface);
}

.tab-pane {
    display: none;
}

.tab-pane.active,
.tab-pane.show {
    display: block;
}

[data-bs-theme="dark"] [style*="background-color:#ffffff"],
[data-bs-theme="dark"] [style*="background-color:#F9F9F9"],
[data-bs-theme="dark"] [style*="background-color:#eee"] {
    background-color: var(--dap-surface) !important;
}

.btn-group-justified {
    display: flex;
    width: 100%;
}

.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
    flex: 1 1 0;
}

.table,
.table > :not(caption) > * > * {
    color: var(--dap-text);
    border-color: var(--dap-border);
    text-align: center;
}

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

.modal-dialog {
    max-width: min(900px, calc(100vw - 32px));
}

.modal-content {
    width: auto;
}

/* Data Request results dialog: ~75% of the window, centered, so the page stays visible behind it */
#myModal .modal-dialog {
    width: 75vw;
    max-width: 75vw;
    height: 75vh;
    margin: 12.5vh auto;
}

@media (max-width: 768px) {
    #myModal .modal-dialog {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        height: calc(100vh - 24px);
        margin: 12px auto;
    }
}

#myModal .modal-content {
    height: 100%;
}

#myModal .modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#resultsTabContent {
    flex: 1 1 auto;
    min-height: 0;
}

#resultsTabContent > .tab-pane,
#result_chart_container,
#result_chart_container > div:not(.alert) {
    height: 100%;
}

#result_table_container {
    height: 100%;
    overflow: auto;
}

/* charts taller than the dialog (e.g. Met: one panel per variable) scroll
   inside it, like the table, instead of covering the Close button */
#result_chart_container {
    overflow-x: hidden;
    overflow-y: auto;
}

#mapDiv {
    border: 1px solid var(--dap-border);
    border-radius: 8px;
    overflow: hidden;
}

.gis-publications {
    margin: 16px 0 32px;
    padding: 12px 16px;
    background: var(--dap-surface-alt);
    border: 1px solid var(--dap-border);
    border-radius: 6px;
}

.gis-publications h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 650;
}

.gis-publications ul {
    margin: 0;
    padding-left: 20px;
}

#dashboardMapDiv {
    width: 100%;
    height: 480px;
    border-top: 1px solid var(--dap-border);
}

/* Wide screens: metrics column on the left, map fills the height beside it */
@media (min-width: 1200px) {
    .dashboard-map-panel {
        display: flex;
        flex-direction: column;
        height: calc(100% - 20px);
    }

    .dashboard-map-panel #dashboardMapDiv {
        flex: 1 1 auto;
        height: auto;
        min-height: 480px;
    }

    /* the two metric cards share the column height equally, footers pinned to the bottom */
    .dashboard-metrics {
        display: flex;
        flex-direction: column;
    }

    .dashboard-metrics > .row {
        flex: 1 1 auto;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .dashboard-metrics > .row > .col-xl-12 {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
    }

    .dashboard-metrics .stat-card {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

    .dashboard-metrics .stat-card .panel-body {
        flex: 1 1 auto;
    }
}

.dashboard-map-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
}

.dashboard-map-hint {
    flex-basis: 100%;
    color: var(--dap-muted);
    font-size: 12px;
}

@media (min-width: 992px) {
    .dashboard-map-hint {
        flex-basis: auto;
        margin-left: auto;
        max-width: 340px;
        text-align: right;
    }
}

.dashboard-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin-bottom: 6px;
}

.dashboard-header h3 {
    margin: 0;
}

.dashboard-updated {
    color: var(--dap-muted);
    font-size: 13px;
}

.dashboard-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    margin-bottom: 16px;
    color: var(--dap-muted);
    font-size: 14px;
}

.dashboard-intro a {
    text-decoration: none;
}

.dashboard-about summary {
    color: var(--dap-link);
    cursor: pointer;
}

.dashboard-about[open] {
    flex-basis: 100%;
    padding: 12px 16px;
    background: var(--dap-surface);
    border: 1px solid var(--dap-border);
    border-radius: 6px;
    color: var(--dap-text);
}

.dashboard-about[open] summary {
    margin-bottom: 8px;
}

.dashboard-about p:last-child {
    margin-bottom: 0;
}

.stat-card .panel-heading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-card .panel-body {
    padding: 18px 16px 6px;
}

.stat-primary {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--dap-border);
}

.stat-number {
    font-size: 40px;
    font-weight: 650;
    line-height: 1;
}

.stat-primary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

/* narrower metrics column beside the map: keep count + average side by side */
.dashboard-metrics .stat-number {
    font-size: 34px;
}

.dashboard-metrics .stat-label {
    font-size: 14px;
}

.dashboard-metrics .stat-note {
    display: block;
}

.stat-unit {
    margin-left: 4px;
    font-size: 18px;
    font-weight: 400;
    color: var(--dap-muted);
}

.stat-note {
    font-size: 12px;
}

.stat-label {
    margin-top: 4px;
    color: var(--dap-muted);
}

.stat-detail {
    margin-top: 8px;
    font-size: 12px;
    color: var(--dap-muted);
}

.stat-detail summary {
    color: var(--dap-link);
    cursor: pointer;
}

.stat-detail-group {
    margin-top: 4px;
}

.stat-detail-group strong {
    color: var(--dap-text);
    font-weight: 600;
}

.stat-secondary-row {
    display: flex;
    gap: 24px;
    padding: 14px 0;
}

.stat-secondary-number {
    font-size: 22px;
    font-weight: 650;
    line-height: 1;
}

.stat-secondary-label {
    margin-top: 4px;
    color: var(--dap-muted);
    font-size: 13px;
}

.data-request-dataset-panel {
    padding: 18px;
}

.data-request-dataset-tabs {
    padding: 0 0 0 0;
}

.data-request-dataset-content {
    padding: 18px;
}

.data-request-dataset-content > .tab-pane > h4:first-child {
    margin-top: 0;
}

.data-request-dataset-content .bs-example2,
.data-request-dataset-content .bs-example3 {
    padding: 16px;
}

.data-request-dataset-content .form-group {
    margin-bottom: 16px;
}

.api-panel {
    max-width: 1400px;
}

.api-panel .app-breadcrumb {
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.api-description p:last-child {
    margin-bottom: 0;
}

.api-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
}

@media (min-width: 1200px) {
    .api-actions {
        justify-content: flex-end;
    }
}

.api-actions fieldset {
    margin: 0;
}

.api-actions .button-form,
.api-actions form {
    display: inline-flex;
    margin: 0;
}

.api-card,
.api-editor {
    margin-bottom: 18px;
    overflow: hidden;
    background: var(--dap-surface);
    border: 1px solid var(--dap-border);
    border-radius: 8px;
    box-shadow: 0 1px 4px var(--dap-shadow);
}

.api-card-header {
    padding: 12px 16px;
    color: var(--dap-text);
    font-weight: 650;
    background: var(--dap-surface-alt);
    border-bottom: 1px solid var(--dap-border);
}

.api-panel pre.prettyprint {
    width: 100%;
    margin: 0;
    padding: 16px;
    overflow: auto;
    color: var(--dap-text);
    background: var(--dap-surface);
    border: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.api-panel .meta,
.api-panel .nocode {
    color: var(--dap-muted);
}

.api-panel .lit {
    color: var(--dap-link);
}

.api-panel .dropdown-menu {
    min-width: 9rem;
}

.api-editor {
    padding: 16px;
}

.api-editor .well {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.api-editor .form-actions {
    margin-top: 16px;
}

.api-editor textarea,
.api-editor select,
.api-editor input {
    max-width: 100%;
}

[data-bs-theme="dark"] .api-panel pre.prettyprint .pln,
[data-bs-theme="dark"] .api-panel pre.prettyprint .pun,
[data-bs-theme="dark"] .api-panel pre.prettyprint .opn,
[data-bs-theme="dark"] .api-panel pre.prettyprint .clo {
    color: var(--dap-text);
}

/* Data Request map: legend panel and select-by-box button (map.js) */
.dap-map-legend {
    min-width: 190px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px 12px;
    color: #323232;
    background: #fff;
    font-size: 13px;
}

.dap-map-legend-title {
    margin-bottom: 4px;
    font-weight: 600;
}

.dap-map-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
    padding: 2px 0;
}

.dap-map-legend-row svg {
    flex: 0 0 auto;
}

.dap-map-legend-row.is-hidden {
    opacity: 0.4;
}

.dap-box-select.active {
    color: #fff;
    background-color: #1565c0;
}