/**
 * QDS v2 — apps.css: padrões específicos dos apps (árvore de contas, arquivos, metadados do SIDRA, extração, cartograma, demografia)
 * Só lê tokens (`var(--q-...)`); sem hex, sem !important, sem sombra, sem gradiente.
 * Ordem de carga: Bootstrap 5.3.3 -> tokens.css -> bootstrap-theme.css -> base.css -> components.css -> apps.css (só nos apps).
 */

/* Tabela com árvore de contas (Flamingo): o recuo mostra o nível */
.q-tree-row {
    --q-nivel: 1;
}

.q-tree-table .q-tree-row td:first-child {
    padding-left: calc((var(--q-nivel, 1) - 1) * var(--q-space-5));
}

.q-tree-row__name {
    display: flex;
    align-items: baseline;
    gap: var(--q-space-3);
}

.q-tree-row__code {
    flex: none;
    min-width: 3.25rem;
    color: var(--q-color-code-inline);
    font-family: var(--q-font-data);
    font-size: var(--q-text-xs);
}

.q-tree-row[data-nivel="1"] {
    --q-nivel: 1;
}

.q-tree-row[data-nivel="2"] {
    --q-nivel: 2;
}

.q-tree-row[data-nivel="3"] {
    --q-nivel: 3;
}

.q-tree-row[data-nivel="1"] td {
    border-top: var(--q-border-width) solid var(--q-color-border-strong);
    font-weight: var(--q-weight-bold);
}

.q-tree-row[data-nivel="1"] .q-tree-row__link {
    font-weight: var(--q-weight-bold);
}

.q-tree-row[data-nivel="3"] .q-tree-row__link {
    color: var(--q-color-text-muted);
    font-size: var(--q-text-sm);
}

.q-tree-row__link {
    color: var(--q-color-text);
    text-decoration: none;
}

.q-tree-row__link:hover {
    color: var(--q-color-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.q-tree-table .q-cell-num {
    white-space: nowrap;
}

/* Lista de arquivos de um dataset (FTP) */
.q-files .q-files__name {
    color: var(--q-color-text);
    font-family: var(--q-font-data);
    font-size: var(--q-text-sm);
    font-weight: var(--q-weight-bold);
    overflow-wrap: anywhere;
    text-decoration: none;
}

.q-files .q-files__name:hover {
    color: var(--q-color-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.q-files__dir {
    display: block;
    margin-top: var(--q-space-1);
    color: var(--q-color-text-muted);
    font-family: var(--q-font-data);
    font-size: var(--q-text-xs);
    overflow-wrap: anywhere;
}

.q-files__uf {
    font-family: var(--q-font-data);
    font-size: var(--q-text-xs);
    font-weight: var(--q-weight-bold);
    letter-spacing: var(--q-tracking-wide);
}

/* Área de soltar arquivo (conversor .dbc) */
.q-drop {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--q-space-3);
    padding: var(--q-space-12) var(--q-space-6);
    border: 2px dashed var(--q-color-border-strong);
    border-radius: var(--q-radius-md);
    text-align: center;
}

.q-drop:hover,
.q-drop.is-over {
    border-color: var(--q-color-accent);
    background-color: var(--q-color-accent-subtle);
}

.q-drop:focus-within {
    border-color: var(--q-color-accent);
    outline: 2px solid var(--q-color-focus);
    outline-offset: 2px;
}

.q-drop__title {
    margin: 0;
    font-family: var(--q-font-title);
    font-size: var(--q-text-2xl);
    font-weight: var(--q-weight-display);
    letter-spacing: var(--q-tracking-tight);
}

.q-drop__hint {
    margin: 0;
    color: var(--q-color-text-muted);
    font-size: var(--q-text-sm);
}

.q-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.q-drop .btn {
    position: relative;
    pointer-events: none;
}

.q-drop-state {
    padding-top: var(--q-space-5);
    border-top: 2px solid var(--q-color-border-strong);
}

.q-drop-state__label {
    margin: 0 0 var(--q-space-3);
    color: var(--q-color-text-muted);
    font-size: var(--q-text-xs);
    font-weight: var(--q-weight-bold);
    letter-spacing: var(--q-tracking-wide);
    text-transform: uppercase;
}

.q-drop-state progress {
    display: block;
    width: 100%;
    height: 0.5rem;
    margin-bottom: var(--q-space-2);
}

.q-drop-state__text {
    margin: 0;
    color: var(--q-color-text-muted);
    font-size: var(--q-text-sm);
}

.q-drop-state__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q-space-3);
    margin-top: var(--q-space-5);
}

.q-drop-error {
    padding: var(--q-space-4) var(--q-space-5);
    border-left: 3px solid var(--q-color-danger-text);
    border-radius: 0 var(--q-radius-sm) var(--q-radius-sm) 0;
    background-color: var(--q-color-danger-bg);
    color: var(--q-color-danger-text);
    font-size: var(--q-text-md);
}

.q-drop-error b {
    display: block;
    margin-bottom: var(--q-space-1);
}

.q-drop-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--q-space-10);
}

@media (min-width: 992px) {
    .q-drop-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--q-space-8);
    }
}

.q-filterbar .form-select {
    width: auto;
    min-width: 6rem;
}

/* ---------- Lote 4 · Apps: Fish, Sloth e Flamingo — páginas internas ---------- */

/* Metadados de tabela SIDRA: recuo por nível da categoria */
.q-table td.q-meta__lvl-0 { font-weight: var(--q-weight-bold); }
.q-table td.q-meta__lvl-1 { padding-left: var(--q-space-4); font-weight: var(--q-weight-medium); }
.q-table td.q-meta__lvl-2 { padding-left: var(--q-space-8); }
.q-table td.q-meta__lvl-3 { padding-left: var(--q-space-12); }
.q-table td.q-meta__lvl-4 { padding-left: calc(var(--q-space-12) + var(--q-space-4)); color: var(--q-color-text-muted); }

@media (max-width: 575.98px) {
    .q-table td.q-meta__lvl-2 { padding-left: var(--q-space-6); }
    .q-table td.q-meta__lvl-3 { padding-left: var(--q-space-8); }
    .q-table td.q-meta__lvl-4 { padding-left: var(--q-space-10); }
}

/* Matriz ano x mês dos períodos: primeira coluna mais estreita que a do calendário do DATASUS */
.q-meta-cal {
    min-width: 46rem;
}

.q-meta-cal thead th:first-child,
.q-meta-cal tbody th {
    width: 7rem;
    min-width: 7rem;
    max-width: 7rem;
}

.q-meta-cal tbody th {
    font-family: var(--q-font-data);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
    .q-meta-cal thead th:first-child,
    .q-meta-cal tbody th {
        width: 5rem;
        min-width: 5rem;
        max-width: 5rem;
    }

    .q-meta-cal tbody th small {
        display: block;
    }
}

/* Calendário do IBGE (q-cal com dias úteis nas colunas): divulgação agendada */
.q-bx-cal {
    min-width: 62rem;
    table-layout: fixed;
}

.q-bx-cal thead th time {
    font-family: var(--q-font-data);
    font-size: var(--q-text-sm);
    font-variant-numeric: tabular-nums;
}

.q-bx-cal tbody th {
    font-size: var(--q-text-sm);
    line-height: var(--q-leading-snug);
}

.q-bx-cal td {
    padding: var(--q-space-1) 1px;
}

.q-bx-cal .q-cal__cell {
    height: 2.25rem;
}

@media (max-width: 767.98px) {
    .q-bx-cal thead th:first-child,
    .q-bx-cal tbody th {
        width: 9.5rem;
        min-width: 9.5rem;
        max-width: 9.5rem;
        font-size: var(--q-text-xs);
    }
}

.q-bx-cal__cell--next {
    background-color: transparent;
    border-color: var(--q-color-brand-text);
    color: var(--q-color-brand-text);
}

/* Extração: formulário em passos à esquerda, resultado à direita */
.q-extract {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--q-space-10);
}

@media (min-width: 992px) {
    .q-extract {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: var(--q-space-12);
        align-items: start;
    }

    .q-extract__result {
        position: sticky;
        top: var(--q-space-6);
    }
}

.q-extract__paste {
    max-width: 44rem;
    margin-bottom: var(--q-space-6);
    font-size: var(--q-text-sm);
}

.q-extract__paste summary {
    color: var(--q-color-link);
    cursor: pointer;
}

.q-extract__paste .q-search {
    margin-top: var(--q-space-3);
}

.q-extract__steps {
    display: grid;
    gap: var(--q-space-8);
    margin: 0 0 var(--q-space-8);
    padding: 0;
    list-style: none;
    counter-reset: passo;
}

.q-extract__steps > li {
    padding-top: var(--q-space-3);
    border-top: var(--q-border-width) solid var(--q-color-border-strong);
    counter-increment: passo;
}

.q-extract__step {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.q-extract__step legend {
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--q-space-3);
    width: auto;
    margin: 0 0 var(--q-space-3);
    padding: 0;
    font-size: var(--q-text-lg);
    font-weight: var(--q-weight-bold);
    letter-spacing: var(--q-tracking-tight);
}

.q-extract__step legend::before {
    content: counter(passo, decimal-leading-zero);
    color: var(--q-color-brand-display);
    font-family: var(--q-font-title);
    font-weight: var(--q-weight-display);
    font-variant-numeric: tabular-nums;
}

.q-extract__step legend small {
    flex-basis: 100%;
    margin-top: var(--q-space-1);
    color: var(--q-color-text-muted);
    font-size: var(--q-text-xs);
    font-weight: var(--q-weight-regular);
    letter-spacing: 0;
}

.q-extract__list {
    max-height: 13rem;
    margin-top: var(--q-space-2);
    padding: var(--q-space-2) var(--q-space-3);
    overflow-y: auto;
    border: var(--q-border-width) solid var(--q-color-border);
    border-radius: var(--q-radius-sm);
}

.q-extract__filter {
    margin-top: var(--q-space-3);
}

.q-extract__hint {
    margin: var(--q-space-2) 0 0;
    color: var(--q-color-text-muted);
    font-size: var(--q-text-xs);
}

.q-extract__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--q-space-1) var(--q-space-4);
    padding-block: var(--q-space-2);
    border-bottom: var(--q-border-width) solid var(--q-color-border);
    font-size: var(--q-text-sm);
}

.q-extract__row .q-extract__hint {
    margin: 0;
}

.q-extract__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--q-space-5);
}

.q-extract__num {
    width: 5rem;
}

.q-extract__result {
    min-width: 0;
    padding-top: var(--q-space-5);
    border-top: 2px solid var(--q-color-brand);
}

.q-extract__total {
    margin: var(--q-space-2) 0 var(--q-space-3);
    font-family: var(--q-font-data);
    font-size: var(--q-text-4xl);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--q-tracking-tight);
    line-height: 1;
}

.q-extract__total span {
    color: var(--q-color-text-muted);
    font-family: var(--q-font-ui);
    font-size: var(--q-text-md);
    letter-spacing: 0;
}

.q-extract__calc {
    max-width: 36rem;
    margin: 0 0 var(--q-space-6);
    color: var(--q-color-text-muted);
    font-size: var(--q-text-sm);
    line-height: var(--q-leading-normal);
}

.q-extract__note {
    margin: 0 0 var(--q-space-3);
    color: var(--q-color-text-muted);
    font-size: var(--q-text-sm);
}

.q-extract__result .q-code {
    padding: var(--q-space-4);
    background-color: var(--q-color-surface-sunken);
    border-radius: var(--q-radius-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.q-extract__result .q-code .q-c { color: var(--q-color-code-inline); }
.q-extract__result .q-code .q-k { color: var(--q-color-brand-text); font-weight: var(--q-weight-bold); }

.q-extract__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q-space-3);
    margin-top: var(--q-space-5);
}

.q-extract__save {
    margin: var(--q-space-4) 0 0;
    color: var(--q-color-text-muted);
    font-size: var(--q-text-sm);
}

/* Mapa de quadrados por UF (cartograma) */
.q-map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--q-space-8);
}

@media (min-width: 992px) {
    .q-map-layout {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--q-space-12);
        align-items: start;
    }

    .q-map {
        position: sticky;
        top: var(--q-space-6);
    }
}

.q-map {
    margin: 0;
}

.q-map__svg {
    display: block;
    width: 100%;
    max-width: 36rem;
    height: auto;
}

.q-map__tile rect {
    fill: var(--q-color-heat-0);
    stroke: var(--q-color-border-strong);
    stroke-width: 1;
}

.q-map__tile--0 rect { fill: var(--q-color-heat-0); }
.q-map__tile--1 rect { fill: var(--q-color-heat-1); }
.q-map__tile--2 rect { fill: var(--q-color-heat-2); }
.q-map__tile--3 rect { fill: var(--q-color-heat-3); }

.q-map__uf {
    fill: var(--q-color-text);
    font-family: var(--q-font-ui);
    font-size: var(--q-text-md);
    font-weight: 700;
}

.q-map__val {
    fill: var(--q-color-text);
    font-family: var(--q-font-data);
    font-size: var(--q-text-sm);
}

.q-map__tile--3 .q-map__uf,
.q-map__tile--3 .q-map__val {
    fill: var(--q-color-heat-3-fg);
}

.q-map__foot {
    margin-top: var(--q-space-4);
    color: var(--q-color-text-muted);
    font-size: var(--q-text-xs);
}

.q-map__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q-space-1) var(--q-space-5);
    margin: 0 0 var(--q-space-2);
    padding: 0;
    list-style: none;
    font-size: var(--q-text-sm);
}

.q-map__legend li {
    display: flex;
    align-items: center;
    gap: var(--q-space-2);
}

.q-map__key {
    display: inline-block;
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: var(--q-space-2);
    border: var(--q-border-width) solid var(--q-color-border-strong);
    border-radius: 2px;
}

.q-map__legend .q-map__key {
    margin-right: 0;
}

.q-map__key--0 { background-color: var(--q-color-heat-0); }
.q-map__key--1 { background-color: var(--q-color-heat-1); }
.q-map__key--2 { background-color: var(--q-color-heat-2); }
.q-map__key--3 { background-color: var(--q-color-heat-3); }

/* Demografia: linhas com rótulo, barra proporcional e percentual (sem cartões) */
.q-demo {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--q-color-border-strong);
}

.q-demo li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label value"
        "track track";
    gap: var(--q-space-2) var(--q-space-4);
    align-items: baseline;
    padding-block: var(--q-space-3);
    border-bottom: var(--q-border-width) solid var(--q-color-border);
}

@media (min-width: 576px) {
    .q-demo li {
        grid-template-columns: 8.5rem minmax(0, 1fr) 7.5rem;
        grid-template-areas: "label track value";
        align-items: center;
        column-gap: var(--q-space-4);
    }
}

.q-demo__label {
    grid-area: label;
    font-size: var(--q-text-sm);
}

.q-demo__track {
    grid-area: track;
    display: block;
    height: 0.5rem;
    background-color: var(--q-color-surface-sunken);
    border: var(--q-border-width) solid var(--q-color-border);
    border-radius: var(--q-radius-full);
    overflow: hidden;
}

.q-demo__bar {
    --q-demo-pct: 0%;
    display: block;
    width: var(--q-demo-pct);
    height: 100%;
    background-color: var(--q-color-data-1);
}

/* Preenchimento por decil (a classe arredonda o valor; o número exato vai no texto) */
.q-demo__bar--p10 { --q-demo-pct: 10%; }
.q-demo__bar--p20 { --q-demo-pct: 20%; }
.q-demo__bar--p30 { --q-demo-pct: 30%; }
.q-demo__bar--p40 { --q-demo-pct: 40%; }
.q-demo__bar--p50 { --q-demo-pct: 50%; }
.q-demo__bar--p60 { --q-demo-pct: 60%; }
.q-demo__bar--p70 { --q-demo-pct: 70%; }
.q-demo__bar--p80 { --q-demo-pct: 80%; }
.q-demo__bar--p90 { --q-demo-pct: 90%; }
.q-demo__bar--p100 { --q-demo-pct: 100%; }

.q-demo__value {
    grid-area: value;
    font-family: var(--q-font-data);
    font-size: var(--q-text-sm);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.q-demo__value small {
    display: block;
    color: var(--q-color-text-muted);
    font-size: var(--q-text-xs);
}

@media (max-width: 575.98px) {
    .q-demo__value small {
        display: inline;
        margin-left: var(--q-space-2);
    }
}

/* Campos de período e métrica sobre um gráfico (sem cartão) */
.q-bx-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--q-space-4) var(--q-space-5);
    align-items: end;
    margin: 0 0 var(--q-space-8);
    padding-block: var(--q-space-4);
    border-block: var(--q-border-width) solid var(--q-color-border-strong);
}

.q-bx-fields .form-label {
    margin-bottom: var(--q-space-1);
    font-size: var(--q-text-sm);
    font-weight: var(--q-weight-bold);
}

.q-bx-fields .form-control,
.q-bx-fields .form-select {
    height: 2.75rem;
}

.q-bx-fields > div:nth-child(3) {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .q-bx-fields {
        grid-template-columns: 11rem 11rem minmax(0, 18rem) auto;
    }

    .q-bx-fields > div:nth-child(3) {
        grid-column: auto;
    }
}