/* =========================================================
   FINCONTROLE — IDENTIDADE VISUAL UNIFICADA V1
   Base visual inspirada no Blog aprovado.
   Index + Área logada + Blog + Admin + Caixa.
========================================================= */

:root {
    /* Fundos */
    --fc-bg: #070b19;
    --fc-bg-deep: #040a16;
    --fc-card: #0c1629;
    --fc-card-2: #101c33;
    --fc-hover: #122743;
    --fc-menu: #081225;

    /* Contornos e textos */
    --fc-border: #17385a;
    --fc-border-soft: rgba(23, 56, 90, .72);
    --fc-text: #ffffff;
    --fc-text-light: #b9c8df;
    --fc-text-muted: #8da5c4;

    /* Destaques */
    --fc-primary: #00e5ff;
    --fc-success: #00f0b5;
    --fc-danger: #ff5b68;
    --fc-warning: #ffc857;

    /* Compatibilidade com o CSS antigo */
    --bg: var(--fc-bg);
    --bg-main: var(--fc-bg);
    --card: var(--fc-card);
    --bg-card: var(--fc-card);
    --card2: var(--fc-card-2);
    --bg-hover: var(--fc-hover);
    --menu: var(--fc-menu);
    --border: var(--fc-border);
    --text: var(--fc-text);
    --light: var(--fc-text-light);
    --text-light: var(--fc-text-light);
    --muted: var(--fc-text-light);
    --primary: var(--fc-primary);
    --green: var(--fc-success);
    --success: var(--fc-success);
    --ok: var(--fc-success);
    --danger: var(--fc-danger);
    --warning: var(--fc-warning);
    --warn: var(--fc-warning);

    /* Geometria comum */
    --fc-radius-sm: 8px;
    --fc-radius: 12px;
    --fc-radius-lg: 16px;
    --fc-shadow: 0 16px 42px rgba(0, 0, 0, .22);
    --fc-shadow-cyan: 0 14px 36px rgba(0, 229, 255, .07);
}

/* =========================================================
   V147 — ATALHOS DOS INDICADORES DO DASHBOARD
========================================================= */
body.fin-app.pagina-dashboard .dashboard-atalho-card {
    cursor: pointer;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

body.fin-app.pagina-dashboard .dashboard-atalho-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 229, 255, .52);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, .18),
        inset 0 0 0 1px rgba(0, 229, 255, .08);
}

body.fin-app.pagina-dashboard .dashboard-atalho-card:focus-visible {
    outline: 2px solid var(--primary, #00e5ff);
    outline-offset: 3px;
    border-color: var(--primary, #00e5ff);
}

body.fin-app.pagina-dashboard .dashboard-atalho-card:active {
    transform: translateY(0);
}

body.fin-app.pagina-dashboard .dashboard-atalho-card .indicador-ajuda-botao {
    cursor: help;
}

body.fin-app.pagina-dashboard .dashboard-atalho-ancora {
    display: block;
    width: 100%;
    height: 0;
    overflow: hidden;
}

body.fin-app.pagina-dashboard #dashboardLancamentos,
body.fin-app.pagina-dashboard #dashboardPrimeiroLancamento,
body.fin-app.pagina-dashboard #dashboardLancamentosMesSelecionado,
body.fin-app.pagina-dashboard #dashboardFaturas,
body.fin-app.pagina-dashboard #dashboardFaturaMesSelecionado,
body.fin-app.pagina-dashboard #dashboardInvestimentos,
body.fin-app.pagina-dashboard #dashboardContas,
body.fin-app.pagina-dashboard #dashboardComparacaoReceitasDespesas {
    scroll-margin-top: 92px;
}

body.fin-app.pagina-dashboard .dashboard-atalho-destaque {
    animation: dashboardAtalhoDestaqueV147 1.25s ease-out;
}

@keyframes dashboardAtalhoDestaqueV147 {
    0%, 28% {
        box-shadow:
            0 0 0 3px rgba(0, 229, 255, .46),
            0 0 28px rgba(0, 229, 255, .18);
    }
    100% {
        box-shadow: none;
    }
}

@media (max-width: 620px) {
    body.fin-app.pagina-dashboard #dashboardLancamentos,
    body.fin-app.pagina-dashboard #dashboardPrimeiroLancamento,
    body.fin-app.pagina-dashboard #dashboardLancamentosMesSelecionado,
    body.fin-app.pagina-dashboard #dashboardFaturas,
    body.fin-app.pagina-dashboard #dashboardFaturaMesSelecionado,
    body.fin-app.pagina-dashboard #dashboardInvestimentos,
    body.fin-app.pagina-dashboard #dashboardContas,
    body.fin-app.pagina-dashboard #dashboardComparacaoReceitasDespesas {
        scroll-margin-top: 78px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.fin-app.pagina-dashboard .dashboard-atalho-card {
        transition: none;
    }

    body.fin-app.pagina-dashboard .dashboard-atalho-destaque {
        animation: none;
        outline: 2px solid rgba(0, 229, 255, .5);
        outline-offset: 2px;
    }
}

/* =========================================================
   RELATÓRIOS - SALDO PROJETADO DAS CONTAS V141
========================================================= */

.fin-app.pagina-relatorios .saldo-projetado-grafico-card {
    padding: 18px;
    border: 1px solid var(--fc-border-soft);
    border-radius: 13px;
    background: rgba(4, 10, 22, .48);
}

.fin-app.pagina-relatorios .saldo-projetado-grafico-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}

.fin-app.pagina-relatorios .saldo-projetado-grafico-topo h3 {
    margin: 0;
    color: var(--fc-text);
    font-size: 16px;
}

.fin-app.pagina-relatorios .saldo-projetado-grafico-topo p {
    margin: 6px 0 0;
    color: var(--fc-text-light);
    font-size: 12px;
}

.fin-app.pagina-relatorios .saldo-projetado-grafico-legenda {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--fc-text-light);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.fin-app.pagina-relatorios .saldo-projetado-grafico-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.fin-app.pagina-relatorios .saldo-projetado-grafico-legenda i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fc-success);
}

.fin-app.pagina-relatorios .saldo-projetado-grafico-legenda .negativo i {
    background: var(--fc-danger);
}

.fin-app.pagina-relatorios .saldo-projetado-grafico-scroll {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(23, 56, 90, .66);
    border-radius: 12px;
    background: rgba(4, 10, 22, .55);
}

.fin-app.pagina-relatorios .saldo-projetado-grafico-svg {
    display: block;
    width: 100%;
    min-width: 800px;
    height: auto;
}

.fin-app.pagina-relatorios .saldo-projetado-extremos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.fin-app.pagina-relatorios .saldo-projetado-extremo {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-width: 0;
    min-height: 82px;
    padding: 12px 14px;
    border: 1px solid rgba(141, 165, 196, .18);
    border-radius: 11px;
    background: rgba(7, 19, 38, .72);
}

.fin-app.pagina-relatorios .saldo-projetado-extremo.baixa {
    border-color: rgba(255, 91, 104, .32);
    background: rgba(255, 91, 104, .055);
}

.fin-app.pagina-relatorios .saldo-projetado-extremo.alta {
    border-color: rgba(0, 217, 163, .30);
    background: rgba(0, 217, 163, .05);
}

.fin-app.pagina-relatorios .saldo-projetado-extremo-icone {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 21px;
    font-weight: 900;
}

.fin-app.pagina-relatorios .saldo-projetado-extremo.baixa
.saldo-projetado-extremo-icone,
.fin-app.pagina-relatorios .saldo-projetado-extremo.baixa
.saldo-projetado-extremo-conteudo > strong {
    color: var(--fc-danger);
}

.fin-app.pagina-relatorios .saldo-projetado-extremo.alta
.saldo-projetado-extremo-icone,
.fin-app.pagina-relatorios .saldo-projetado-extremo.alta
.saldo-projetado-extremo-conteudo > strong {
    color: var(--fc-success);
}

.fin-app.pagina-relatorios .saldo-projetado-extremo-conteudo {
    display: grid;
    gap: 4px;
    min-width: 0;
    text-align: left;
}

.fin-app.pagina-relatorios .saldo-projetado-extremo-conteudo > small {
    color: var(--fc-text-light);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.fin-app.pagina-relatorios .saldo-projetado-extremo-conteudo > strong {
    font-size: 18px;
    font-weight: 950;
    line-height: 1.1;
}

.fin-app.pagina-relatorios .saldo-projetado-extremo-conteudo > span {
    color: var(--fc-text-light);
    font-size: 10px;
    line-height: 1.35;
}

.fin-app.pagina-relatorios .saldo-projetado-grade,
.fin-app.pagina-relatorios .saldo-projetado-divisor-mes,
.fin-app.pagina-relatorios .saldo-projetado-divisor-dia {
    stroke: rgba(141, 165, 196, .14);
    stroke-width: 1;
}

.fin-app.pagina-relatorios .saldo-projetado-divisor-mes,
.fin-app.pagina-relatorios .saldo-projetado-divisor-dia {
    stroke: rgba(141, 165, 196, .08);
}

.fin-app.pagina-relatorios .saldo-projetado-eixo-valor,
.fin-app.pagina-relatorios .saldo-projetado-eixo-mes,
.fin-app.pagina-relatorios .saldo-projetado-eixo-dia {
    fill: var(--fc-text-muted);
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 800;
}

.fin-app.pagina-relatorios .saldo-projetado-traco {
    fill: none;
    stroke: var(--fc-primary);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 5px 8px rgba(0, 229, 255, .18));
}

.fin-app.pagina-relatorios .saldo-projetado-ponto {
    fill: var(--fc-card);
    stroke: var(--fc-success);
    stroke-width: 4;
    cursor: help;
}

.fin-app.pagina-relatorios .saldo-projetado-ponto.negativo {
    stroke: var(--fc-danger);
}

.fin-app.pagina-relatorios .saldo-projetado-rotulo {
    fill: var(--fc-success);
    stroke: var(--fc-bg-deep);
    stroke-width: 5px;
    stroke-linejoin: round;
    paint-order: stroke fill;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 900;
    cursor: help;
    pointer-events: auto;
}

.fin-app.pagina-relatorios .saldo-projetado-rotulo.negativo {
    fill: var(--fc-danger);
}

.fin-app.pagina-relatorios .saldo-projetado-tooltip {
    position: fixed;
    z-index: 60020;
    width: min(390px, calc(100vw - 24px));
    padding: 14px;
    border: 1px solid rgba(0, 229, 255, .4);
    border-radius: 12px;
    background: #0b1323;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .48);
    color: var(--fc-text);
    pointer-events: none;
}

.fin-app.pagina-relatorios .saldo-projetado-tooltip[hidden] {
    display: none;
}

.fin-app.pagina-relatorios .saldo-projetado-tooltip-data {
    display: block;
    margin-bottom: 10px;
    color: var(--fc-primary);
    font-size: 12px;
    font-weight: 900;
}

.fin-app.pagina-relatorios .saldo-projetado-tooltip-lista {
    display: grid;
    gap: 7px;
    max-height: 280px;
    overflow-y: auto;
}

.fin-app.pagina-relatorios .saldo-projetado-tooltip-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    padding: 8px 9px;
    border-left: 3px solid currentColor;
    border-radius: 7px;
    background: rgba(255, 255, 255, .035);
    font-size: 11px;
    font-weight: 850;
}

.fin-app.pagina-relatorios .saldo-projetado-tooltip-item.positivo,
.fin-app.pagina-relatorios .saldo-projetado-tooltip-saldo.positivo strong {
    color: var(--fc-success);
}

.fin-app.pagina-relatorios .saldo-projetado-tooltip-item.negativo,
.fin-app.pagina-relatorios .saldo-projetado-tooltip-saldo.negativo strong {
    color: var(--fc-danger);
}

.fin-app.pagina-relatorios .saldo-projetado-tooltip-descricao {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fin-app.pagina-relatorios .saldo-projetado-tooltip-valor {
    white-space: nowrap;
}

.fin-app.pagina-relatorios .saldo-projetado-tooltip-vazio {
    margin: 0;
    padding: 10px;
    color: var(--fc-text-light);
    font-size: 11px;
}

.fin-app.pagina-relatorios .saldo-projetado-tooltip-saldo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--fc-border-soft);
    color: var(--fc-text-light);
    font-size: 10px;
    font-weight: 900;
}

.fin-app.pagina-relatorios .saldo-projetado-tooltip-saldo strong {
    font-size: 13px;
}

@media (max-width: 760px) {
    .fin-app.pagina-relatorios .saldo-projetado-grafico-card {
        padding: 13px;
    }

    .fin-app.pagina-relatorios .saldo-projetado-grafico-topo {
        flex-direction: column;
        gap: 11px;
    }

    .fin-app.pagina-relatorios .saldo-projetado-grafico-scroll {
        margin-right: -2px;
    }

    .fin-app.pagina-relatorios .saldo-projetado-extremos {
        grid-template-columns: 1fr;
    }

    .fin-app.pagina-relatorios .saldo-projetado-extremo {
        min-height: 76px;
        padding: 11px 12px;
    }

    .fin-app.pagina-relatorios .saldo-projetado-extremo-conteudo > strong {
        font-size: 17px;
    }
}


/* =========================================================
   V76.16 - RELATÓRIO DE CATEGORIAS EXPANSÍVEL
========================================================= */

.fin-app .seletor-tipo-relatorio{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 430px;
    margin: 0 0 18px;
    padding: 5px;
    box-sizing: border-box;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.fin-app .tipo-relatorio-opcao{
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--text-light);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.fin-app .tipo-relatorio-opcao:hover{
    background: var(--bg-hover);
    color: var(--primary);
}

.fin-app .tipo-relatorio-opcao.ativo.despesa{
    background: rgba(255, 107, 107, .08);
    border-color: rgba(255, 107, 107, .42);
    color: #ff6b6b;
}

.fin-app .tipo-relatorio-opcao.ativo.receita{
    background: rgba(0, 255, 179, .07);
    border-color: rgba(0, 255, 179, .38);
    color: var(--success);
}

.fin-app .tabela-relatorio-fixa .linha-categoria-relatorio td,
.fin-app .tabela-relatorio-meses .linha-categoria-relatorio td{
    background: rgba(0, 229, 255, .045) !important;
    border-top-color: rgba(0, 229, 255, .22) !important;
    color: var(--text) !important;
    font-weight: 800 !important;
    cursor: pointer;
}

.fin-app .tabela-relatorio-fixa .linha-categoria-relatorio.linha-relatorio-impar td,
.fin-app .tabela-relatorio-meses .linha-categoria-relatorio.linha-relatorio-impar td{
    background: rgba(24, 33, 57, .9) !important;
}

.fin-app .tabela-relatorio-fixa .linha-categoria-relatorio:hover td,
.fin-app .tabela-relatorio-meses .linha-categoria-relatorio:hover td,
.fin-app .tabela-relatorio-fixa .linha-categoria-relatorio.aberta td,
.fin-app .tabela-relatorio-meses .linha-categoria-relatorio.aberta td{
    background: rgba(0, 229, 255, .095) !important;
}

.fin-app .tabela-relatorio-meses .linha-categoria-relatorio:focus-visible{
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.fin-app .relatorio-categoria-expandir{
    width: 100%;
    min-height: 100%;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fin-app .relatorio-categoria-expandir:focus-visible{
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 4px;
}

.fin-app .relatorio-categoria-seta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 22px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform .18s ease;
}

.fin-app .relatorio-categoria-expandir[aria-expanded="true"] .relatorio-categoria-seta{
    transform: rotate(90deg);
}

.fin-app .relatorio-categoria-nome{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fin-app .relatorio-categoria-quantidade{
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-sizing: border-box;
    background: rgba(0, 229, 255, .08);
    border: 1px solid rgba(0, 229, 255, .28);
    border-radius: 999px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 900;
}

.fin-app .tabela-relatorio-fixa .linha-subcategoria-relatorio td,
.fin-app .tabela-relatorio-meses .linha-subcategoria-relatorio td{
    background: rgba(7, 12, 28, .58) !important;
    color: var(--text-light) !important;
    font-weight: 500 !important;
}

.fin-app .tabela-relatorio-fixa .linha-subcategoria-relatorio.linha-relatorio-impar td,
.fin-app .tabela-relatorio-meses .linha-subcategoria-relatorio.linha-relatorio-impar td{
    background: rgba(13, 20, 38, .78) !important;
}

.fin-app .tabela-relatorio-fixa .linha-subcategoria-relatorio:hover td,
.fin-app .tabela-relatorio-meses .linha-subcategoria-relatorio:hover td{
    background: rgba(0, 229, 255, .045) !important;
}

.fin-app .relatorio-subcategoria-nome{
    position: relative;
    display: block;
    padding-left: 25px;
    overflow: hidden;
    color: var(--text-light);
    font-size: 10px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fin-app .relatorio-subcategoria-nome::before{
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 9px;
    height: 6px;
    border-left: 1px solid rgba(0, 229, 255, .5);
    border-bottom: 1px solid rgba(0, 229, 255, .5);
    transform: translateY(-70%);
}

.fin-app .tabela-relatorio-meses .linha-categoria-relatorio .coluna-total-meses{
    color: var(--primary) !important;
}

.fin-app .tabela-relatorio-meses .linha-subcategoria-relatorio .coluna-total-meses{
    color: var(--text) !important;
    font-weight: 700 !important;
}

@media (max-width: 620px){
    .fin-app .seletor-tipo-relatorio{
        max-width: none;
    }

    .fin-app .tipo-relatorio-opcao{
        min-height: 40px;
        font-size: 11px;
    }

    .fin-app .relatorio-categoria-expandir{
        grid-template-columns: 15px minmax(0, 1fr) auto;
        gap: 5px;
    }

    .fin-app .relatorio-categoria-quantidade{
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
    }

    .fin-app .relatorio-subcategoria-nome{
        padding-left: 20px;
        font-size: 9px;
    }
}


/* =========================================================
   V76.18 - LARGURA SEGURA DA PÁGINA DE RELATÓRIOS
========================================================= */

html:has(body.fin-app.pagina-relatorios),
body.fin-app.pagina-relatorios{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

@media (min-width: 901px){
    body.fin-app.pagina-relatorios .conteudo.relatorios-fincontrole{
        width: calc(100vw - var(--menu-largura, 350px) - 40px) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: calc(var(--menu-largura, 350px) + 20px) !important;
        box-sizing: border-box !important;
    }
}

body.fin-app.pagina-relatorios .painel-relatorio,
body.fin-app.pagina-relatorios .relatorio-tabela-dupla,
body.fin-app.pagina-relatorios .relatorio-meses-wrapper{
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body.fin-app.pagina-relatorios .tabela-relatorio-meses{
    width: 100% !important;
    min-width: 1040px !important;
}

@media (max-width: 1100px){
    body.fin-app.pagina-relatorios .tabela-relatorio-meses{
        min-width: 980px !important;
    }
}

@media (max-width: 620px){
    body.fin-app.pagina-relatorios .tabela-relatorio-meses{
        min-width: 910px !important;
    }
}

html {
    color-scheme: dark;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--fc-text);
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(0, 229, 255, .24);
    color: #fff;
}

/* Fundo visual único em todas as áreas */
body.fin-app,
body.pagina-blog,
body.pagina-admin,
body.pagina-caixa-app {
    background:
        radial-gradient(circle at 50% 0, #09234b 0, #070b19 34%, #070b19 100%);
    background-attachment: fixed;
}

/* Foco padrão acessível */
body.fin-app :focus-visible,
body.pagina-blog :focus-visible,
body.pagina-admin :focus-visible,
body.pagina-caixa-app :focus-visible {
    outline: 2px solid rgba(0, 229, 255, .78);
    outline-offset: 2px;
}

/* Scrollbar visual unificada */
body.fin-app,
body.pagina-blog,
body.pagina-admin,
body.pagina-caixa-app {
    scrollbar-width: thin;
    scrollbar-color: var(--fc-border) var(--fc-menu);
}

body.fin-app *::-webkit-scrollbar,
body.pagina-blog *::-webkit-scrollbar,
body.pagina-admin *::-webkit-scrollbar,
body.pagina-caixa-app *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.fin-app *::-webkit-scrollbar-track,
body.pagina-blog *::-webkit-scrollbar-track,
body.pagina-admin *::-webkit-scrollbar-track,
body.pagina-caixa-app *::-webkit-scrollbar-track {
    background: var(--fc-menu);
}

body.fin-app *::-webkit-scrollbar-thumb,
body.pagina-blog *::-webkit-scrollbar-thumb,
body.pagina-admin *::-webkit-scrollbar-thumb,
body.pagina-caixa-app *::-webkit-scrollbar-thumb {
    background: var(--fc-border);
    border: 2px solid var(--fc-menu);
    border-radius: 999px;
}

body.fin-app *::-webkit-scrollbar-thumb:hover,
body.pagina-blog *::-webkit-scrollbar-thumb:hover,
body.pagina-admin *::-webkit-scrollbar-thumb:hover,
body.pagina-caixa-app *::-webkit-scrollbar-thumb:hover {
    background: var(--fc-primary);
}


/* ===== ÁREA PRINCIPAL / DASHBOARD ===== */
/* =========================================================
RESET
========================================================= */

.fin-app *{
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* =========================================================
CORES GLOBAIS
========================================================= */



/* =========================================================
BODY
========================================================= */

body.fin-app{
font-family: Arial, sans-serif;

background: var(--bg-main);

color: var(--text);

margin: 0;


}

/* =========================================================
MENU LATERAL
========================================================= */

.fin-app .sidebar{
width: 350px;

height: 100vh;

position: fixed;

left: 0;
top: 0;

z-index: 1000;

background: var(--menu);

border-right: 1px solid var(--border);

padding: 20px 5px;

overflow: hidden;


}

/* =========================================================
LOGO
========================================================= */

.fin-app .logo{
padding-left: 5px;

font-size: 28px;

font-weight: bold;

color: var(--primary);

margin-bottom: 30px;


}

/* =========================================================
BOTÕES DO MENU
========================================================= */

.fin-app .sidebar button{
width: 320px;

height: 40px;

display: flex;

align-items: center;

justify-content: center;

padding: 0 10px;

margin-top: 2px;
margin-bottom: 4px;

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

border-radius: 8px;

background: var(--bg-card);

color: var(--primary);

font-size: 18px;

font-weight: bold;

cursor: pointer;


}

.fin-app .sidebar button:hover{
background: var(--primary);

color: #000000;


}

/* =========================================================
CONTEÚDO PRINCIPAL
========================================================= */

.fin-app .conteudo{
margin-left: 370px;

padding: 30px;

max-width: 1100px;


}

/* =========================================================
CONTEÚDO ALTERNATIVO
========================================================= */

.fin-app .content{
flex: 1;

padding: 30px;


}

/* =========================================================
TÍTULOS
========================================================= */

.fin-app h1,.fin-app h2,.fin-app h3{
margin-bottom: 10px;
}

/* =========================================================
LINKS
========================================================= */

.fin-app a{
text-decoration: none;

color: var(--primary);

text-align: center;


}

/* =========================================================
CARDS GERAIS
========================================================= */

.fin-app .card{
background: var(--bg-card);

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

border-radius: 8px;

padding: 20px;

margin-bottom: 10px;


}

.fin-app .card-title{
color: var(--text-light);

margin-bottom: 10px;


}

.fin-app .card-value{
font-size: 35px;

color: var(--primary);

font-weight: bold;


}

/* =========================================================
TABELAS GERAIS
========================================================= */

.fin-app table{
width: 100%;

border-collapse: collapse;

background: var(--bg-card);

border-radius: 8px;

overflow: hidden;


}

.fin-app table th{
background: #15182b;

color: var(--primary);

padding: 15px;

text-align: left;


}

.fin-app table td{
padding: 15px;

border-top: 1px solid var(--border);

color: var(--text);


}

.fin-app table tr:hover{
background: var(--bg-hover);
}

.fin-app table td a{
text-decoration: none;

margin-left: 8px;

font-size: 14px;


}

.fin-app table td a:hover{
opacity: 0.8;
}

/* =========================================================
INPUTS E SELECTS GERAIS
========================================================= */

.fin-app input,.fin-app select{
height: 40px;

padding: 0 10px;

background: var(--bg-card);

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

border-radius: 8px;

color: var(--text-light);

font-size: 14px;

font-weight: bold;

outline: none;


}

.fin-app input::placeholder{
color: #7f86a8;
}

.fin-app input:focus,.fin-app select:focus{
border-color: var(--primary);

outline: none;


}

/* =========================================================
SELECT / OPTION
========================================================= */

.fin-app option{
background: var(--bg-card);

color: var(--text-light);


}

/* =========================================================
PÁGINA INICIAL
========================================================= */

.fin-app .ini{
width: 350px;

margin-left: auto;
margin-right: auto;

margin-top: 30px;

text-align: center;


}

/* =========================================================
CADASTRO DE CARTÃO

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

/* ---------------------------------------------------------
FORMULÁRIO
--------------------------------------------------------- */

.fin-app .cartao-formulario{
width: 100%;

background: #141729;

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

border-radius: 12px;

padding: 25px;

margin-top: 20px;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);


}

/* ---------------------------------------------------------
CAMPOS
--------------------------------------------------------- */

.fin-app .cartao-formulario .campo{
width: 100%;

margin-bottom: 20px;


}

/* ---------------------------------------------------------
LABEL
--------------------------------------------------------- */

.fin-app .cartao-formulario .campo label{
display: block;

color: var(--text);

font-size: 15px;

font-weight: bold;

margin-bottom: 8px;


}

/* ---------------------------------------------------------
INPUT E SELECT
--------------------------------------------------------- */

.fin-app .cartao-formulario input,.fin-app .cartao-formulario select{
width: 100%;

height: 45px;

padding: 0 12px;

background: #0f1120;

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

border-radius: 8px;

color: var(--text);

font-size: 14px;

font-weight: normal;

outline: none;


}

/* ---------------------------------------------------------
PLACEHOLDER
--------------------------------------------------------- */

.fin-app .cartao-formulario input::placeholder{
color: #7f86a8;

opacity: 1;


}

/* ---------------------------------------------------------
FOCO
--------------------------------------------------------- */

.fin-app .cartao-formulario input:focus,.fin-app .cartao-formulario select:focus{
border-color: var(--primary);

box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.10);


}

/* ---------------------------------------------------------
SELECT
--------------------------------------------------------- */

.fin-app .cartao-formulario select{
appearance: auto;

cursor: pointer;


}

.fin-app .cartao-formulario option{
background: var(--bg-card);

color: var(--text);


}

/* ---------------------------------------------------------
LINHA DOS DIAS
--------------------------------------------------------- */

.fin-app .cartao-formulario .linha{
display: flex;

gap: 16px;

width: 100%;


}

.fin-app .cartao-formulario .linha .campo{
flex: 1;
}

/* ---------------------------------------------------------
BOTÃO SALVAR
--------------------------------------------------------- */

.fin-app .cartao-formulario .botao-salvar{
width: 100%;

height: 45px;

display: flex;

align-items: center;

justify-content: center;

padding: 0 15px;

margin-top: 5px;

background: #0f1120;

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

border-radius: 8px;

color: var(--primary);

font-size: 16px;

font-weight: bold;

cursor: pointer;

transition: 0.2s;


}

.fin-app .cartao-formulario .botao-salvar:hover{
background: var(--primary);

color: #000000;

border-color: var(--primary);


}

/* ---------------------------------------------------------
LISTA DE CARTÕES
--------------------------------------------------------- */

.fin-app .lista-cartoes{
width: 100%;

margin-top: 30px;


}

.fin-app .lista-cartoes h2{
color: var(--text);

margin-bottom: 15px;


}

/* ---------------------------------------------------------
CARTÃO CADASTRADO
--------------------------------------------------------- */

.fin-app .cartao-item{
display: flex;

align-items: center;

justify-content: space-between;

width: 100%;

padding: 15px;

background: var(--bg-card);

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

border-radius: 10px;

margin-bottom: 10px;


}

/* ---------------------------------------------------------
INFORMAÇÕES DO CARTÃO
--------------------------------------------------------- */

.fin-app .cartao-info{
display: flex;

align-items: center;

gap: 15px;


}

/* ---------------------------------------------------------
ÍCONE DA BANDEIRA
--------------------------------------------------------- */

.fin-app .bandeira-icone{
width: 55px;

height: 35px;

object-fit: contain;


}

/* ---------------------------------------------------------
NOME DO CARTÃO
--------------------------------------------------------- */

.fin-app .cartao-nome{
color: var(--text);

font-weight: bold;

font-size: 16px;


}

/* ---------------------------------------------------------
DETALHES
--------------------------------------------------------- */

.fin-app .cartao-detalhes{
color: var(--text-light);

font-size: 13px;

margin-top: 5px;


}

/* ---------------------------------------------------------
BOTÃO EXCLUIR
--------------------------------------------------------- */

.fin-app .botao-excluir{
background: #8f1d2c;

color: #ffffff;

padding: 8px 12px;

border-radius: 6px;

border: 1px solid #b52a3a;

font-size: 13px;


}

.fin-app .botao-excluir:hover{
background: #c82333;

color: #ffffff;

opacity: 1;


}

/* ---------------------------------------------------------
BOTÃO OCULTAR / REATIVAR CONTA OU CARTÃO
--------------------------------------------------------- */

.fin-app .botao-visibilidade{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 8px 12px;
border: 1px solid #d8a62a;
border-radius: 7px;
background: rgba(216, 166, 42, .08);
color: #f2c75c;
font-size: 12px;
font-weight: 800;
cursor: pointer;
}

.fin-app .botao-visibilidade.reativar{
border-color: var(--success);
background: rgba(0, 255, 179, .07);
color: var(--success);
}

.fin-app .status-cadastro-oculto{
display: inline-flex;
align-items: center;
margin-left: 7px;
padding: 3px 7px;
border: 1px solid #d8a62a;
border-radius: 999px;
color: #f2c75c;
font-size: 9px;
font-weight: 900;
letter-spacing: .4px;
vertical-align: middle;
}

/* =========================================================
CADASTRO DE CATEGORIAS

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

/* ---------------------------------------------------------
DESCRIÇÃO
--------------------------------------------------------- */

.fin-app .descricao-pagina{
color: var(--text-light);

font-size: 16px;

margin-bottom: 5px;


}

/* ---------------------------------------------------------
FORMULÁRIO DE CATEGORIA / SUBCATEGORIA
--------------------------------------------------------- */

.fin-app .cadastro-formulario{
width: 100%;

background: #141729;

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

border-radius: 12px;

padding: 25px;

margin-top: 20px;

margin-bottom: 25px;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);


}

/* ---------------------------------------------------------
TÍTULO
--------------------------------------------------------- */

.fin-app .cadastro-formulario h2{
color: var(--text);

font-size: 22px;

margin-bottom: 20px;


}

/* ---------------------------------------------------------
CAMPO
--------------------------------------------------------- */

.fin-app .campo-cadastro{
width: 100%;

margin-bottom: 20px;


}

/* ---------------------------------------------------------
LABEL
--------------------------------------------------------- */

.fin-app .campo-cadastro label{
display: block;

color: var(--text);

font-size: 15px;

font-weight: bold;

margin-bottom: 8px;


}

/* ---------------------------------------------------------
INPUT
--------------------------------------------------------- */

.fin-app .campo-cadastro input{
display: block;

width: 100%;

height: 45px;

padding: 0 12px;

background: #0f1120;

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

border-radius: 8px;

color: var(--text);

font-size: 14px;

font-weight: normal;

outline: none;


}

.fin-app .campo-cadastro input::placeholder{
color: #7f86a8;

opacity: 1;


}

/* ---------------------------------------------------------
SELECT
--------------------------------------------------------- */

.fin-app .campo-cadastro select{
display: block;

width: 100%;

height: 45px;

padding: 0 12px;

background: #0f1120;

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

border-radius: 8px;

color: var(--text);

font-size: 14px;

font-weight: normal;

outline: none;

cursor: pointer;


}

.fin-app .campo-cadastro select option{
background: #1a1d33;

color: #ffffff;


}

/* ---------------------------------------------------------
FOCO
--------------------------------------------------------- */

.fin-app .campo-cadastro input:focus,.fin-app .campo-cadastro select:focus{
border-color: var(--primary);

box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.10);


}

/* ---------------------------------------------------------
BOTÃO
--------------------------------------------------------- */

.fin-app .botao-cadastro{
display: flex;

width: 100%;

height: 45px;

align-items: center;

justify-content: center;

padding: 0 15px;

margin: 0;

background: #0f1120;

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

border-radius: 8px;

color: var(--primary);

font-size: 16px;

font-weight: bold;

cursor: pointer;

transition: 0.2s;


}

.fin-app .botao-cadastro:hover{
background: var(--primary);

color: #000000;

border-color: var(--primary);


}

/* ---------------------------------------------------------
LISTA DE CATEGORIAS
--------------------------------------------------------- */

.fin-app .lista-categorias{
width: 100%;

margin-top: 30px;

background: #141729;

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

border-radius: 12px;

padding: 25px;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);


}

/* ---------------------------------------------------------
TÍTULO DA LISTA
--------------------------------------------------------- */

.fin-app .lista-categorias h2{
color: var(--text);

font-size: 22px;

margin-bottom: 20px;


}

/* ---------------------------------------------------------
TABELA DE CATEGORIAS
--------------------------------------------------------- */

.fin-app .lista-categorias table{
width: 100%;

border-collapse: separate;

border-spacing: 0;

background: #1a1d33;

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

border-radius: 8px;

overflow: hidden;


}

/* ---------------------------------------------------------
CABEÇALHO
--------------------------------------------------------- */

.fin-app .lista-categorias table th{
background: #15182b;

color: var(--primary);

padding: 15px;

text-align: left;

font-size: 15px;

border-bottom: 1px solid var(--border);


}

/* ---------------------------------------------------------
CÉLULAS
--------------------------------------------------------- */

.fin-app .lista-categorias table td{
padding: 15px;

color: var(--text);

border-bottom: 1px solid var(--border);

font-size: 14px;


}

/* ---------------------------------------------------------
ÚLTIMA LINHA
--------------------------------------------------------- */

.fin-app .lista-categorias table tr:last-child td{
border-bottom: none;
}

/* ---------------------------------------------------------
HOVER
--------------------------------------------------------- */

.fin-app .lista-categorias table tr:hover td{
background: var(--bg-hover);
}

/* ---------------------------------------------------------
LINKS EDITAR / EXCLUIR
--------------------------------------------------------- */

.fin-app .lista-categorias table td a{
text-decoration: none;

margin-left: 10px;

font-size: 15px;


}

.fin-app .lista-categorias table td a:hover{
opacity: 0.7;
}

/* =========================================================
MENSAGENS
========================================================= */

.fin-app .mensagem-sucesso{
width: 100%;

background: rgba(0, 255, 179, 0.08);

border: 1px solid var(--success);

color: var(--success);

padding: 12px 15px;

border-radius: 8px;

margin-top: 15px;

margin-bottom: 15px;


}

.fin-app .mensagem-erro{
width: 100%;

background: rgba(255, 60, 60, 0.10);

border: 1px solid #ff4d4d;

color: #ff6b6b;

padding: 12px 15px;

border-radius: 8px;

margin-top: 15px;

margin-bottom: 15px;


}

/* =========================================================
RESPONSIVO
========================================================= */

@media (max-width: 768px) {

.fin-app .sidebar{
    width: 100%;

    position: relative;

    height: auto;
}


.fin-app .conteudo{
    margin-left: 0;

    padding: 20px;
}


.fin-app .cartao-formulario .linha{
    flex-direction: column;

    gap: 0;
}


.fin-app .cartao-item{
    flex-direction: column;

    align-items: flex-start;

    gap: 15px;
}


.fin-app .cadastro-formulario{
    padding: 20px;
}


.fin-app .lista-categorias{
    padding: 20px;

    overflow-x: auto;
}


.fin-app .lista-categorias table{
    min-width: 500px;
}


}

/* =========================================================
FORMULÁRIOS DE CATEGORIA LADO A LADO
========================================================= */

.fin-app .formularios-categorias{
display: grid;

grid-template-columns: repeat(2, minmax(0, 1fr));

gap: 20px;

align-items: stretch;

width: 100%;

margin-bottom: 25px;
}

.fin-app .formularios-categorias .cadastro-formulario{
width: 100%;

min-width: 0;

height: 100%;

margin: 0;

display: flex;

flex-direction: column;
}

.fin-app .formularios-categorias .cadastro-formulario form{
display: flex;

flex-direction: column;

flex: 1;

min-width: 0;
}

.fin-app .formularios-categorias .campo-cadastro,.fin-app .formularios-categorias input,.fin-app .formularios-categorias select,.fin-app .formularios-categorias .botao-cadastro{
width: 100%;

max-width: 100%;

min-width: 0;
}

.fin-app .formularios-categorias .botao-cadastro{
margin-top: auto;
}

@media (max-width: 800px) {

.fin-app .formularios-categorias{
    grid-template-columns: 1fr;
}

}


/* =========================================================
LANÇAMENTOS
========================================================= */

.fin-app .lancamento-formulario{
    width: 100%;
    margin-top: 20px;
    padding: 28px;
    background: #141729;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

.fin-app .campo-lancamento{
    width: 100%;
    min-width: 0;
}

.fin-app .campo-lancamento > label{
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 15px;
    font-weight: bold;
}

.fin-app .campo-lancamento input,.fin-app .campo-lancamento select{
    display: block;
    width: 100%;
    height: 45px;
    padding: 0 12px;
    background: #0f1120;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: normal;
    outline: none;
}

.fin-app .campo-lancamento input::placeholder{
    color: #7f86a8;
    opacity: 1;
}

.fin-app .campo-lancamento input:focus,.fin-app .campo-lancamento select:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.10);
}

.fin-app .grade-lancamento{
    display: grid;
    width: 100%;
    gap: 20px;
    margin-bottom: 24px;
}

.fin-app .grade-2{
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
}

.fin-app .grade-3{
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.05fr) minmax(0, 1fr);
}

.fin-app .grade-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fin-app .tipo-lancamento{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.fin-app .tipo-opcao{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 220px;
    height: 70px;
    padding: 0 25px;
    background: #0f1120;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.fin-app .tipo-opcao:hover,.fin-app .tipo-opcao.ativo{
    border-color: var(--primary);
    color: var(--primary);
}

.fin-app .tipo-opcao input{
    display: none;
}

.fin-app .tipo-icone{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
}

.fin-app .tipo-opcao.ativo .tipo-icone{
    background: var(--primary);
    color: #061018;
    border-color: var(--primary);
}

.fin-app .divisor-lancamento{
    width: 100%;
    height: 1px;
    margin: 28px 0;
    background: var(--border);
    opacity: 0.65;
}

.fin-app .campo-moeda{
    display: flex;
    width: 100%;
    height: 45px;
    background: #0f1120;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.fin-app .campo-moeda:focus-within{
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.10);
}

.fin-app .campo-moeda span{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    border-right: 1px solid var(--border);
    color: var(--text);
    font-weight: bold;
}

.fin-app .campo-moeda input{
    height: 43px;
    border: none;
    border-radius: 0;
    box-shadow: none !important;
}

.fin-app .acoes-lancamento{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.fin-app .botao-limpar,.fin-app .botao-salvar-lancamento{
    height: 45px;
    padding: 0 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.fin-app .botao-limpar{
    background: #0f1120;
    border: 1px solid var(--border);
    color: var(--text);
}

.fin-app .botao-limpar:hover{
    border-color: var(--primary);
    color: var(--primary);
}

.fin-app .botao-salvar-lancamento{
    min-width: 190px;
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #000000;
}

.fin-app .botao-salvar-lancamento:hover{
    filter: brightness(1.08);
}

@media (max-width: 1000px) {
    .fin-app .grade-4{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fin-app .grade-3{
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .fin-app .lancamento-formulario{
        padding: 20px;
    }

    .fin-app .grade-2,.fin-app .grade-3,.fin-app .grade-4{
        grid-template-columns: 1fr;
    }

    .fin-app .tipo-opcao{
        width: 100%;
        min-width: 0;
    }

    .fin-app .acoes-lancamento{
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .fin-app .botao-limpar,.fin-app .botao-salvar-lancamento{
        width: 100%;
    }
}



/* =========================================================
DASHBOARD FINANCEIRO
========================================================= */

.fin-app .dashboard-financeiro{
    padding-bottom: 60px;
}

.fin-app .dashboard-cabecalho{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.fin-app .seletor-periodo-dashboard{
    display: flex;
    align-items: center;
    gap: 8px;
}

.fin-app .botao-periodo{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--primary);
    font-size: 27px;
    font-weight: bold;
    cursor: pointer;
}

.fin-app .botao-periodo:hover{
    background: var(--bg-hover);
}

.fin-app .periodo-atual{
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 190px;
    height: 44px;
    padding: 0 15px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
}

.fin-app .periodo-atual span:first-child{
    color: var(--primary);
    font-weight: bold;
}

.fin-app .periodo-atual strong{
    color: var(--text);
}

.fin-app .seta-periodo{
    margin-left: auto;
    color: var(--text-light);
}

.fin-app .alerta-dashboard{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    background: rgba(255, 183, 77, 0.08);
    border: 1px solid rgba(255, 183, 77, 0.45);
    border-radius: 10px;
}

.fin-app a.alerta-dashboard{
    color: inherit;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}

.fin-app .alerta-dashboard + .alerta-dashboard{
    margin-top: -8px;
}

.fin-app .alerta-dashboard.alerta-dashboard-vencido{
    background: rgba(255, 91, 104, 0.08);
    border-color: rgba(255, 91, 104, 0.48);
}

.fin-app .alerta-dashboard.alerta-dashboard-vencido:hover,
.fin-app .alerta-dashboard.alerta-dashboard-vencido:focus-visible{
    background: rgba(255, 91, 104, 0.12);
    border-color: rgba(255, 91, 104, 0.72);
    outline: none;
}

.fin-app .alerta-dashboard.alerta-dashboard-vencido .alerta-dashboard-icone{
    background: rgba(255, 91, 104, 0.18);
    color: #ff6f7b;
}

.fin-app .alerta-dashboard-icone{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 183, 77, 0.18);
    color: #ffbd59;
    font-weight: bold;
}

.fin-app .alerta-dashboard div{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 3px;
    text-align: left;
}

.fin-app .alerta-dashboard div > strong{
    align-self: flex-start;
    text-align: left;
}

.fin-app .alerta-dashboard span:last-child{
    color: var(--text-light);
    font-size: 13px;
}

.fin-app .cards-dashboard{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 14px;
    margin-bottom: 24px;
}

.fin-app .card-dashboard{
    min-width: 0;
    min-height: 136px;

    display: flex;
    flex-direction: column;

    padding: 18px;

    background: #141729;
    border: 1px solid var(--border);
    border-radius: 12px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.20);

    box-sizing: border-box;
}

.fin-app .card-dashboard-titulo{
    display: flex;
    align-items: flex-start;

    min-height: 27px;
    margin-bottom: 5px;

    color: var(--text-light);

    font-size: 13px;
    font-weight: bold;
    line-height: 1.15;

    text-transform: uppercase;
}

.fin-app .card-dashboard-valor{
    display: block;

    margin-bottom: 6px;

    color: var(--primary);

    font-size: clamp(20px, 1.65vw, 24px);
    font-weight: 700;
    line-height: 1.15;

    white-space: nowrap;
}

.fin-app .card-dashboard-periodo{
    display: block;

    margin-top: auto;

    color: #7f86a8;

    font-size: 12px;
    line-height: 1.25;
}

@media (max-width: 1350px) {
    .fin-app .cards-dashboard{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1050px) {
    .fin-app .cards-dashboard{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.fin-app .valor-receita{
    color: var(--success);
}

.fin-app .valor-despesa{
    color: #ff6b6b;
}

.fin-app .painel-dashboard{
    width: 100%;
    margin-bottom: 24px;
    padding: 22px;
    background: #141729;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.22);
}

.fin-app .painel-dashboard-cabecalho{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.fin-app .painel-dashboard-cabecalho h2{
    margin-bottom: 4px;
    font-size: 20px;
}

.fin-app .painel-dashboard-cabecalho p{
    color: var(--text-light);
    font-size: 13px;
}

.fin-app .link-dashboard{
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--primary);
    font-size: 13px;
    font-weight: bold;
}

.fin-app .link-dashboard:hover{
    border-color: var(--primary);
}

.fin-app .dashboard-vazio{
    padding: 20px;
    background: var(--bg-main);
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-light);
    text-align: center;
}

.fin-app .lista-vencimentos-dashboard{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fin-app .linha-vencimento-dashboard{
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 125px 140px 105px;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.fin-app .linha-vencimento-dashboard:hover{
    background: var(--bg-hover);
}

.fin-app .data-vencimento-dashboard{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 9px;
    background: var(--bg-main);
    border: 1px solid var(--border);
}

.fin-app .data-vencimento-dashboard strong{
    color: var(--primary);
    font-size: 20px;
    line-height: 1;
}

.fin-app .data-vencimento-dashboard span{
    margin-top: 4px;
    color: var(--text-light);
    font-size: 10px;
}

.fin-app .descricao-vencimento-dashboard{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.fin-app .descricao-vencimento-dashboard strong{
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fin-app .descricao-vencimento-dashboard span{
    color: var(--text-light);
    font-size: 12px;
}

.fin-app .valor-vencimento-dashboard{
    text-align: right;
}

.fin-app .valor-vencimento-dashboard strong{
    color: var(--text);
    font-size: 15px;
}

.fin-app .acao-vencimento-dashboard{
    text-align: right;
}

.fin-app .badge-status{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: bold;
}

.fin-app .status-pago{
    background: rgba(0, 255, 179, 0.10);
    border: 1px solid rgba(0, 255, 179, 0.35);
    color: var(--success);
}

.fin-app .status-vencido{
    background: rgba(255, 80, 80, 0.10);
    border: 1px solid rgba(255, 80, 80, 0.35);
    color: #ff6b6b;
}

.fin-app .status-hoje{
    background: rgba(255, 183, 77, 0.10);
    border: 1px solid rgba(255, 183, 77, 0.35);
    color: #ffbd59;
}

.fin-app .status-pendente{
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.25);
    color: var(--primary);
}

.fin-app .botao-pagar-dashboard,.fin-app .botao-secundario-dashboard,.fin-app .botao-confirmar-dashboard,.fin-app .botao-cancelar-dashboard{
    height: 38px;
    padding: 0 15px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.fin-app .botao-pagar-dashboard,.fin-app .botao-confirmar-dashboard{
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #000;
}

.fin-app .botao-pagar-dashboard:hover,.fin-app .botao-confirmar-dashboard:hover{
    filter: brightness(1.08);
}

.fin-app .botao-secundario-dashboard,.fin-app .botao-cancelar-dashboard{
    background: var(--bg-main);
    border: 1px solid var(--border);
    color: var(--text);
}

.fin-app .botao-secundario-dashboard:hover,.fin-app .botao-cancelar-dashboard:hover{
    border-color: var(--primary);
    color: var(--primary);
}

.fin-app .texto-pago-dashboard{
    color: var(--success);
    font-size: 12px;
    font-weight: bold;
}

.fin-app .grade-faturas-dashboard{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.fin-app .fatura-dashboard{
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.fin-app .fatura-dashboard-topo{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.fin-app .fatura-dashboard-label{
    display: block;
    margin-bottom: 5px;
    color: var(--text-light);
    font-size: 10px;
    font-weight: bold;
}

.fin-app .fatura-dashboard h3{
    margin: 0;
    color: var(--text);
    font-size: 17px;
}

.fin-app .fatura-dashboard-valor{
    margin: 18px 0 16px;
    color: var(--primary);
    font-size: 27px;
    font-weight: bold;
}

.fin-app .fatura-dashboard-info{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
    color: var(--text-light);
    font-size: 12px;
}

.fin-app .fatura-dashboard-info strong{
    color: var(--text);
}

.fin-app .fatura-dashboard-acoes{
    display: flex;
    gap: 8px;
}

.fin-app .grade-contas-dashboard{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.fin-app .conta-dashboard{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9px;
}

.fin-app .conta-dashboard-icone{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 20px;
}

.fin-app .conta-dashboard div:last-child{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fin-app .conta-dashboard strong{
    font-size: 13px;
}

.fin-app .conta-dashboard span{
    color: var(--primary);
    font-size: 14px;
    font-weight: bold;
}


/* =========================================================
MODAIS DASHBOARD
========================================================= */

.fin-app .modal-dashboard{
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 7, 16, 0.78);
    backdrop-filter: blur(4px);
}

.fin-app .modal-dashboard.aberto{
    display: flex;
}

.fin-app .modal-dashboard-conteudo{
    position: relative;
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 26px;
    background: #141729;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

.fin-app .modal-periodo-conteudo{
    width: min(430px, 100%);
}

.fin-app .modal-fatura-conteudo{
    width: min(850px, 100%);
}

.fin-app .fechar-modal-dashboard{
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 21px;
    cursor: pointer;
}

.fin-app .modal-dashboard-conteudo h2{
    padding-right: 45px;
    margin-bottom: 8px;
}

.fin-app .descricao-modal-dashboard{
    margin-bottom: 20px;
    color: var(--text-light);
}

.fin-app .campo-dashboard{
    width: 100%;
    margin-bottom: 18px;
}

.fin-app .campo-dashboard label{
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: bold;
}

.fin-app .campo-dashboard input,.fin-app .campo-dashboard select{
    width: 100%;
    height: 43px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
}

.fin-app .grade-modal-dashboard{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.fin-app .acoes-modal-dashboard{
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.fin-app .tabela-fatura-dashboard{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 20px;
}

.fin-app .linha-fatura-dashboard{
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr) 85px 120px;
    gap: 12px;
    padding: 11px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
}

.fin-app .cabecalho-fatura-dashboard{
    background: var(--bg-main);
    color: var(--primary);
    font-weight: bold;
}

.fin-app .alinha-direita{
    text-align: right;
}

.fin-app .rodape-fatura-dashboard{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding: 15px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.fin-app .rodape-fatura-dashboard strong{
    color: var(--primary);
    font-size: 18px;
}


/* =========================================================
RESPONSIVO DASHBOARD
========================================================= */

@media (max-width: 1200px) {

    .fin-app .cards-dashboard{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fin-app .grade-faturas-dashboard,.fin-app .grade-contas-dashboard{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {

    .fin-app .dashboard-cabecalho{
        flex-direction: column;
    }

    .fin-app .linha-vencimento-dashboard{
        grid-template-columns: 60px minmax(0, 1fr) 120px;
    }

    .fin-app .status-vencimento-dashboard{
        display: none;
    }

    .fin-app .valor-vencimento-dashboard{
        text-align: left;
    }

    .fin-app .acao-vencimento-dashboard{
        grid-column: 2 / -1;
        text-align: left;
    }
}

@media (max-width: 768px) {

    .fin-app .cards-dashboard,.fin-app .grade-faturas-dashboard,.fin-app .grade-contas-dashboard,.fin-app .grade-modal-dashboard{
        grid-template-columns: 1fr;
    }

    .fin-app .seletor-periodo-dashboard{
        width: 100%;
    }

    .fin-app .periodo-atual{
        flex: 1;
    }

    .fin-app .painel-dashboard{
        padding: 16px;
    }

    .fin-app .linha-vencimento-dashboard{
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .fin-app .valor-vencimento-dashboard,.fin-app .acao-vencimento-dashboard{
        grid-column: 2;
    }

    .fin-app .fatura-dashboard-acoes,.fin-app .acoes-modal-dashboard{
        flex-direction: column;
    }

    .fin-app .botao-pagar-dashboard,.fin-app .botao-secundario-dashboard,.fin-app .botao-confirmar-dashboard,.fin-app .botao-cancelar-dashboard{
        width: 100%;
    }

    .fin-app .linha-fatura-dashboard{
        grid-template-columns: 80px minmax(0, 1fr) 70px;
    }

    .fin-app .linha-fatura-dashboard span:last-child{
        grid-column: 2 / -1;
        text-align: left;
        font-weight: bold;
    }
}


.fin-app .acoes-contas-dashboard{
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.fin-app .botao-transferencia-dashboard{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

@media (max-width: 768px) {
    .fin-app .botao-transferencia-dashboard{
        width: 100%;
    }
}


/* =========================================================
AJUSTES LANÇAMENTOS / FATURA
========================================================= */

.fin-app .linha-vencimento-dashboard{
    grid-template-columns:
        70px
        minmax(180px, 1.2fr)
        minmax(180px, 1fr)
        120px
        125px
        210px
        95px;
}

.fin-app .descricao-vencimento-dashboard,.fin-app .categoria-vencimento-dashboard{
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.fin-app .categoria-vencimento-dashboard span,.fin-app .descricao-vencimento-dashboard span{
    color: var(--text-light);
    font-size: 12px;
}

.fin-app .categoria-vencimento-dashboard b,.fin-app .descricao-vencimento-dashboard b{
    color: var(--primary);
    font-weight: normal;
}

.fin-app .badge-status{
    min-width: 95px;
    padding: 7px 12px;
    font-size: 12px;
}

.fin-app .acao-vencimento-dashboard{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.fin-app .acao-vencimento-dashboard .botao-secundario-dashboard,.fin-app .acao-vencimento-dashboard .botao-pagar-dashboard,.fin-app .acao-fatura-dashboard .botao-secundario-dashboard{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 38px;
    padding: 0 14px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--primary);
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.fin-app .acao-vencimento-dashboard .botao-pagar-dashboard{
    background: var(--primary);
    color: #000000;
    border-color: var(--primary);
}

.fin-app .dias-vencimento-dashboard,.fin-app .dias-fatura-dashboard{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
}

.fin-app .texto-dias-falta,.fin-app .numero-dias-falta{
    color: #ff9f1a;
}

.fin-app .texto-dias-vencido,.fin-app .numero-dias-vencido{
    color: #ff4d4d;
}

.fin-app .texto-dias-hoje{
    color: #ffbd59;
    font-weight: bold;
}

.fin-app .numero-dias-falta,.fin-app .numero-dias-vencido{
    margin: 3px 0;
    font-size: 23px;
}

.fin-app .texto-dias-falta,.fin-app .texto-dias-vencido{
    font-size: 11px;
}


/* FATURA DETALHES */

.fin-app .linha-fatura-dashboard{
    display: grid;
    grid-template-columns:
        65px
        minmax(180px, 1.15fr)
        minmax(180px, 1fr)
        70px
        120px
        100px
        90px;
    align-items: center;
    gap: 12px;
}

.fin-app .data-fatura-dashboard{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fin-app .data-fatura-dashboard strong{
    color: var(--primary);
    font-size: 20px;
}

.fin-app .data-fatura-dashboard span{
    color: var(--text-light);
    font-size: 10px;
}

.fin-app .descricao-fatura-dashboard,.fin-app .categoria-fatura-dashboard{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fin-app .descricao-fatura-dashboard span,.fin-app .categoria-fatura-dashboard span{
    color: var(--text-light);
    font-size: 12px;
}

.fin-app .categoria-fatura-dashboard b{
    color: var(--primary);
    font-weight: normal;
}

.fin-app .parcela-fatura-dashboard,.fin-app .valor-fatura-item-dashboard{
    color: var(--text);
    font-weight: bold;
}

.fin-app .valor-fatura-item-dashboard{
    text-align: right;
}

.fin-app .acao-fatura-dashboard{
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 1100px) {

    .fin-app .linha-vencimento-dashboard{
        grid-template-columns:
            60px
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

    .fin-app .status-vencimento-dashboard,.fin-app .valor-vencimento-dashboard,.fin-app .acao-vencimento-dashboard,.fin-app .dias-vencimento-dashboard{
        grid-column: 2 / -1;
        justify-content: flex-start;
        text-align: left;
    }

    .fin-app .linha-fatura-dashboard{
        grid-template-columns:
            60px
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

    .fin-app .parcela-fatura-dashboard,.fin-app .valor-fatura-item-dashboard,.fin-app .acao-fatura-dashboard,.fin-app .dias-fatura-dashboard{
        grid-column: 2 / -1;
        justify-content: flex-start;
        text-align: left;
    }
}


/* =========================================================
CORREÇÃO FINAL DE LAYOUT DO DASHBOARD
========================================================= */

.fin-app .conteudo.dashboard-financeiro{
    width: calc(100% - 370px);
    max-width: none;
    min-width: 0;
}

/* evita qualquer bloco estourar a largura */
.fin-app .dashboard-financeiro,.fin-app .dashboard-financeiro .painel-dashboard,.fin-app .dashboard-financeiro .lista-vencimentos-dashboard,.fin-app .dashboard-financeiro .linha-vencimento-dashboard,.fin-app .dashboard-financeiro .grade-contas-dashboard,.fin-app .dashboard-financeiro .grade-faturas-dashboard{
    min-width: 0;
    max-width: 100%;
}

/* =========================
   LANÇAMENTOS
========================= */

.fin-app .linha-vencimento-dashboard{
    display: grid;
    grid-template-columns:
        62px
        minmax(150px, 1.05fr)
        minmax(150px, 1fr)
        100px
        105px
        minmax(150px, auto)
        82px;
    gap: 10px;
    align-items: center;
    padding: 12px;
}

.fin-app .data-vencimento-dashboard{
    width: 48px;
    height: 48px;
}

.fin-app .data-vencimento-dashboard span{
    font-size: 8px;
    text-align: center;
}

.fin-app .descricao-vencimento-dashboard strong{
    font-size: 14px;
}

.fin-app .descricao-vencimento-dashboard span,.fin-app .categoria-vencimento-dashboard span{
    font-size: 11px;
    line-height: 1.3;
}

.fin-app .status-vencimento-dashboard{
    display: flex;
    justify-content: center;
}

.fin-app .badge-status{
    min-width: 78px;
    padding: 6px 8px;
    font-size: 11px;
}

.fin-app .valor-vencimento-dashboard{
    text-align: right;
    white-space: nowrap;
}

.fin-app .acao-vencimento-dashboard{
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.fin-app .acao-vencimento-dashboard .botao-secundario-dashboard,.fin-app .acao-vencimento-dashboard .botao-pagar-dashboard{
    width: auto !important;
    min-width: 72px;
    height: 34px;
    padding: 0 10px;
    font-size: 11px;
}

.fin-app .dias-vencimento-dashboard{
    min-width: 70px;
    text-align: center;
}

.fin-app .numero-dias-falta,.fin-app .numero-dias-vencido{
    font-size: 20px;
}

/* =========================
   RESPONSIVO DO DASHBOARD
   Em telas médias organiza
   cada lançamento em 2 linhas
========================= */

@media (max-width: 1450px) {

    .fin-app .conteudo.dashboard-financeiro{
        width: calc(100% - 370px);
        max-width: none;
    }

    .fin-app .linha-vencimento-dashboard{
        grid-template-columns:
            58px
            minmax(150px, 1fr)
            minmax(150px, 1fr)
            90px;
        grid-template-areas:
            "data descricao categoria status"
            "data valor acao dias";
        row-gap: 10px;
    }

    .fin-app .data-vencimento-dashboard{
        grid-area: data;
    }

    .fin-app .descricao-vencimento-dashboard{
        grid-area: descricao;
    }

    .fin-app .categoria-vencimento-dashboard{
        grid-area: categoria;
    }

    .fin-app .status-vencimento-dashboard{
        grid-area: status;
    }

    .fin-app .valor-vencimento-dashboard{
        grid-area: valor;
        text-align: left;
    }

    .fin-app .acao-vencimento-dashboard{
        grid-area: acao;
        justify-content: flex-start;
    }

    .fin-app .dias-vencimento-dashboard{
        grid-area: dias;
    }
}

/* =========================
   FATURA - modal
========================= */

.fin-app .modal-fatura-conteudo{
    width: min(1050px, 96vw);
}

.fin-app .linha-fatura-dashboard{
    display: grid;
    grid-template-columns:
        58px
        minmax(160px, 1fr)
        minmax(160px, 1fr)
        55px
        100px
        85px
        75px;
    gap: 10px;
    align-items: center;
    padding: 10px;
}

.fin-app .descricao-fatura-dashboard strong{
    font-size: 13px;
}

.fin-app .descricao-fatura-dashboard span,.fin-app .categoria-fatura-dashboard span{
    font-size: 11px;
}

.fin-app .acao-fatura-dashboard .botao-secundario-dashboard{
    width: auto !important;
    min-width: 70px;
    height: 34px;
    padding: 0 10px;
    font-size: 11px;
}

@media (max-width: 950px) {

    .fin-app .linha-fatura-dashboard{
        grid-template-columns:
            55px
            minmax(140px, 1fr)
            minmax(140px, 1fr);
        grid-template-areas:
            "data descricao categoria"
            "data parcela valor"
            "data acao dias";
        row-gap: 8px;
    }

    .fin-app .data-fatura-dashboard{
        grid-area: data;
    }

    .fin-app .descricao-fatura-dashboard{
        grid-area: descricao;
    }

    .fin-app .categoria-fatura-dashboard{
        grid-area: categoria;
    }

    .fin-app .parcela-fatura-dashboard{
        grid-area: parcela;
    }

    .fin-app .valor-fatura-item-dashboard{
        grid-area: valor;
        text-align: left;
    }

    .fin-app .acao-fatura-dashboard{
        grid-area: acao;
        justify-content: flex-start;
    }

    .fin-app .dias-fatura-dashboard{
        grid-area: dias;
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    .fin-app .conteudo.dashboard-financeiro{
        width: 100%;
        margin-left: 0;
    }

    .fin-app .linha-vencimento-dashboard{
        grid-template-columns: 50px minmax(0, 1fr);
        grid-template-areas:
            "data descricao"
            "data categoria"
            "data status"
            "data valor"
            "data acao"
            "data dias";
    }

    .fin-app .status-vencimento-dashboard{
        justify-content: flex-start;
    }

    .fin-app .dias-vencimento-dashboard{
        align-items: flex-start;
        text-align: left;
    }

    .fin-app .linha-fatura-dashboard{
        grid-template-columns: 50px minmax(0, 1fr);
        grid-template-areas:
            "data descricao"
            "data categoria"
            "data parcela"
            "data valor"
            "data acao"
            "data dias";
    }

    .fin-app .dias-fatura-dashboard{
        align-items: flex-start;
        text-align: left;
    }
}


/* =========================================================
LAYOUT FINAL - DASHBOARD
========================================================= */

.fin-app .cabecalho-lancamentos-dashboard,.fin-app .linha-lancamento-final{
    display: grid;
    grid-template-columns:
        95px
        minmax(175px, 1.15fr)
        minmax(170px, 1fr)
        105px
        110px
        220px
        95px;
    gap: 12px;
    align-items: center;
}

.fin-app .cabecalho-lancamentos-dashboard{
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    color: var(--text);
    font-size: 11px;
}

.fin-app .cabecalho-lancamentos-dashboard small{
    display: block;
    margin-top: 4px;
    color: var(--text);
    font-size: 10px;
}

.fin-app .linha-lancamento-final{
    min-height: 96px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-bottom: 0;
}

.fin-app .linha-lancamento-final:last-child{
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 10px 10px;
}

.fin-app .data-lancamento-final,.fin-app .data-fatura-final{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fin-app .data-lancamento-final{
    width: 58px;
    min-height: 68px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.fin-app .data-lancamento-final strong,.fin-app .data-fatura-final strong{
    color: var(--primary);
    font-size: 22px;
}

.fin-app .data-lancamento-final span,.fin-app .data-fatura-final span{
    margin-top: 3px;
    color: var(--text);
    font-size: 10px;
    text-transform: uppercase;
}

.fin-app .coluna-principal-final,.fin-app .descricao-fatura-final,.fin-app .categoria-fatura-final{
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.fin-app .coluna-principal-final strong,.fin-app .categoria-fatura-final strong{
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
}

.fin-app .coluna-principal-final span,.fin-app .descricao-fatura-final span,.fin-app .categoria-fatura-final span{
    color: var(--text);
    font-size: 11px;
}

.fin-app .status-final{
    display: flex;
    justify-content: center;
}

.fin-app .status-final .badge-status{
    min-width: 82px;
    padding: 6px 8px;
    font-size: 11px;
}

.fin-app .valor-final,.fin-app .valor-fatura-final{
    color: var(--text);
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
}

.fin-app .acoes-final{
    display: grid;
    grid-template-columns: 100px 100px;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.fin-app .botao-pagar-final,.fin-app .botao-editar-final,.fin-app .botao-cancelar-final{
    width: 100px;
    min-height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.fin-app .botao-pagar-final{
    border: 1px solid #00c853;
    background: transparent;
    color: #00e65c;
}

.fin-app .botao-editar-final{
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
}

.fin-app .botao-cancelar-final{
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 72px;
    border: 1px solid var(--border);
    background: var(--bg-main);
    color: var(--text);
    line-height: 1.15;
    text-align: center;
}

.fin-app .dias-final{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
    text-align: center;
}

.fin-app .dias-vencido-texto,.fin-app .dias-vencido-numero{
    color: #ff4d4d;
}

.fin-app .dias-falta-texto,.fin-app .dias-falta-numero{
    color: #ff9f1a;
}

.fin-app .dias-vencido-numero,.fin-app .dias-falta-numero{
    margin: 3px 0;
    font-size: 23px;
}

.fin-app .dias-vencido-texto,.fin-app .dias-falta-texto,.fin-app .dias-hoje-final{
    font-size: 10px;
}

.fin-app .dias-hoje-final{
    color: #ff9f1a;
}


/* =========================================================
FATURA FINAL
========================================================= */

.fin-app .cabecalho-fatura-final,.fin-app .linha-fatura-final{
    display: grid;
    grid-template-columns:
        70px
        minmax(170px, 1.1fr)
        minmax(160px, 1fr)
        65px
        100px
        90px
        85px;
    gap: 10px;
    align-items: center;
}

.fin-app .cabecalho-fatura-final{
    padding: 10px;
    color: var(--text-light);
    font-size: 10px;
    border-bottom: 1px solid var(--border);
}

.fin-app .cabecalho-fatura-final small{
    display: block;
    margin-top: 3px;
    color: var(--text-light);
    font-size: 9px;
}

.fin-app .linha-fatura-final{
    padding: 10px;
    border-bottom: 1px solid var(--border);
}

.fin-app .descricao-fatura-final strong{
    color: var(--primary);
    font-size: 13px;
}

.fin-app .parcela-fatura-final{
    color: var(--text);
    font-size: 11px;
    text-align: center;
}

.fin-app .acao-fatura-final{
    display: flex;
    justify-content: center;
}


/* =========================================================
RESPONSIVO FINAL
========================================================= */

@media (max-width: 1250px) {

    .fin-app .cabecalho-lancamentos-dashboard{
        display: none;
    }

    .fin-app .linha-lancamento-final{
        grid-template-columns:
            65px
            minmax(150px, 1fr)
            minmax(150px, 1fr)
            90px;
        grid-template-areas:
            "data lancamento categoria status"
            "data valor acoes dias";
        row-gap: 9px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--border);
        border-radius: 9px;
    }

    .fin-app .data-lancamento-final{ grid-area: data; }
    .fin-app .coluna-principal-final:not(.categoria-final){ grid-area: lancamento; }
    .fin-app .categoria-final{ grid-area: categoria; }
    .fin-app .status-final{ grid-area: status; }
    .fin-app .valor-final{
        grid-area: valor;
        text-align: left;
    }
    .fin-app .acoes-final{
        grid-area: acoes;
        justify-content: start;
    }
    .fin-app .dias-final{ grid-area: dias; }
}

@media (max-width: 800px) {

    .fin-app .linha-lancamento-final{
        grid-template-columns: 58px minmax(0, 1fr);
        grid-template-areas:
            "data lancamento"
            "data categoria"
            "data status"
            "data valor"
            "data acoes"
            "data dias";
    }

    .fin-app .status-final,.fin-app .dias-final{
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
    }

    .fin-app .cabecalho-fatura-final{
        display: none;
    }

    .fin-app .linha-fatura-final{
        grid-template-columns: 55px minmax(0, 1fr);
        grid-template-areas:
            "data descricao"
            "data categoria"
            "data parcela"
            "data valor"
            "data acao"
            "data dias";
    }

    .fin-app .data-fatura-final{ grid-area: data; }
    .fin-app .descricao-fatura-final{ grid-area: descricao; }
    .fin-app .categoria-fatura-final{ grid-area: categoria; }
    .fin-app .parcela-fatura-final{ grid-area: parcela; text-align:left; }
    .fin-app .valor-fatura-final{ grid-area: valor; text-align:left; }
    .fin-app .acao-fatura-final{ grid-area: acao; justify-content:flex-start; }
    .fin-app .linha-fatura-final .dias-final{ grid-area: dias; align-items:flex-start; }
}

/* =========================================================
INVESTIMENTOS - MÓDULO UNIFICADO
========================================================= */

/* =========================================================
   INVESTIMENTOS
========================================================= */

.fin-app .investimentos-resumo{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.fin-app .investimento-card-resumo,.fin-app .investimento-formulario,.fin-app .investimento-item,.fin-app .movimento-investimento-item{
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-sizing: border-box;
}

.fin-app .investimento-card-resumo{
    padding: 18px;
}

.fin-app .investimento-card-resumo span{
    display: block;
    color: var(--text-light);
    font-size: 12px;
}

.fin-app .investimento-card-resumo strong{
    display: block;
    margin-top: 8px;
    color: var(--primary);
    font-size: 24px;
}

.fin-app .grade-investimento-formularios{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.fin-app .investimento-formulario{
    padding: 18px;
}

.fin-app .investimento-formulario h2{
    margin: 0 0 18px;
}

.fin-app .investimento-campo{
    margin-bottom: 14px;
}

.fin-app .investimento-campo label{
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.fin-app .investimento-campo input,.fin-app .investimento-campo select{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 43px;
    padding: 0 12px;

    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 8px;

    color: var(--text);
    font-family: inherit;
    font-size: 13px;

    box-sizing: border-box;
}

.fin-app .investimento-campo input:focus,.fin-app .investimento-campo select:focus{
    border-color: var(--primary);
    outline: none;
}

.fin-app .investimento-ajuda{
    display: block;
    margin-top: 6px;
    color: var(--text-light);
    font-size: 10px;
}

.fin-app .investimento-botao{
    width: 100%;
    min-height: 43px;
    margin-top: 4px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;

    color: var(--primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.fin-app .investimento-botao:hover{
    background: var(--bg-hover);
    border-color: var(--primary);
}

.fin-app .lista-investimentos{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin: 14px 0 24px;
}

.fin-app .investimento-item{
    padding: 16px;
}

.fin-app .investimento-item-topo{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.fin-app .investimento-item h3{
    margin: 0;
    color: var(--primary);
    font-size: 15px;
}

.fin-app .investimento-tipo{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;

    border: 1px solid var(--border);
    border-radius: 999px;

    color: var(--text-light);
    font-size: 10px;
}

.fin-app .investimento-saldo{
    margin-top: 14px;
    color: var(--primary);
    font-size: 22px;
    font-weight: 800;
}

.fin-app .investimento-detalhe{
    margin-top: 5px;
    color: var(--text-light);
    font-size: 11px;
}

.fin-app .lista-movimentos-investimentos{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.fin-app .movimento-investimento-item{
    display: grid;
    grid-template-columns:
        110px
        minmax(180px, 1fr)
        minmax(120px, .8fr)
        120px;

    gap: 12px;
    align-items: center;
    padding: 12px 14px;
}

.fin-app .movimento-tipo{
    font-size: 11px;
    font-weight: 800;
}

.fin-app .movimento-APLICACAO{
    color: #ff9f1a;
}

.fin-app .movimento-RESGATE{
    color: var(--primary);
}

.fin-app .movimento-RENDIMENTO{
    color: var(--success);
}

.fin-app .movimento-valor{
    text-align: right;
    font-weight: 800;
}


/* =========================================================
   INVESTIMENTOS - RESPONSIVO
========================================================= */

@media (max-width: 900px) {

    .fin-app .grade-investimento-formularios{
        grid-template-columns: 1fr;
    }

    .fin-app .investimentos-resumo{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fin-app .movimento-investimento-item{
        grid-template-columns:
            90px
            minmax(0, 1fr)
            100px;
    }

    .fin-app .movimento-investimento-item .movimento-valor{
        grid-column: 3;
    }
}


@media (max-width: 620px) {

    .fin-app .conteudo h1{
        font-size: 28px;
        line-height: 1.15;
    }

    .fin-app .descricao-pagina{
        font-size: 14px;
        line-height: 1.4;
    }

    .fin-app .investimentos-resumo{
        grid-template-columns: 1fr;
    }

    .fin-app .grade-investimento-formularios{
        grid-template-columns: 1fr;
    }

    .fin-app .investimento-formulario{
        padding: 14px;
    }

    .fin-app .investimento-campo{
        margin-bottom: 12px;
    }

    .fin-app .investimento-campo input,.fin-app .investimento-campo select{
        min-height: 45px;
        font-size: 14px;
    }

    .fin-app .investimento-botao{
        min-height: 45px;
    }

    .fin-app .lista-investimentos{
        grid-template-columns: 1fr;
    }

    .fin-app .movimento-investimento-item{
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .fin-app .movimento-investimento-item .movimento-valor{
        grid-column: auto;
        text-align: left;
    }
}

/* =========================================================
CONFIGURAÇÕES - MÓDULO UNIFICADO
========================================================= */

/* =========================================================
   CONFIGURAÇÕES
========================================================= */

.fin-app .configuracoes-lista{
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 22px;
}

.fin-app .configuracao-card{
    width: 100%;
    max-width: 900px;

    padding: 20px;

    background: var(--bg-card, #1a1d33);

    border:
        1px solid
        var(--border, #35395c);

    border-radius: 12px;

    box-sizing: border-box;
}

.fin-app .configuracao-card-topo{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 18px;
}

.fin-app .configuracao-card h2{
    margin:
        0
        0
        7px;

    color:
        var(--text, #ffffff);

    font-size: 20px;
}

.fin-app .configuracao-card p{
    margin: 0;

    color:
        var(--text-light, #bfc6ff);

    font-size: 13px;
    line-height: 1.45;
}

.fin-app .configuracao-icone{
    display: flex;
    align-items: center;
    justify-content: center;

    flex:
        0
        0
        48px;

    width: 48px;
    height: 48px;

    color: #ff4d4d;

    background:
        rgba(
            255,
            77,
            77,
            .06
        );

    border:
        1px solid
        rgba(
            255,
            77,
            77,
            .42
        );

    border-radius: 10px;
}

.fin-app .configuracao-icone svg{
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fin-app .reset-aviso{
    margin-bottom: 16px;
    padding: 13px 14px;

    background:
        rgba(
            255,
            77,
            77,
            .05
        );

    border:
        1px solid
        rgba(
            255,
            77,
            77,
            .28
        );

    border-radius: 9px;

    color:
        var(--text-light, #bfc6ff);

    font-size: 12px;
    line-height: 1.5;
}

.fin-app .reset-aviso strong{
    color: #ff6b6b;
}

.fin-app .reset-mantem{
    margin-top: 8px;
    color:
        var(--primary, #00e5ff);
}

.fin-app .reset-formulario{
    max-width: 500px;
}

.fin-app .reset-formulario label{
    display: block;

    margin-bottom: 7px;

    color:
        var(--text, #ffffff);

    font-size: 13px;
    font-weight: 700;
}

.fin-app .reset-formulario input{
    width: 100%;
    min-height: 42px;

    padding: 0 12px;

    background:
        var(--bg-main, #0f1120);

    border:
        1px solid
        var(--border, #35395c);

    border-radius: 8px;

    color:
        var(--text, #ffffff);

    box-sizing: border-box;
}

.fin-app .botao-resetar-lancamentos{
    width: 100%;
    min-height: 42px;

    margin-top: 12px;

    background:
        transparent;

    border:
        1px solid
        #ff4d4d;

    border-radius: 8px;

    color:
        #ff4d4d;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.fin-app .botao-resetar-lancamentos:hover{
    background:
        rgba(
            255,
            77,
            77,
            .08
        );
}


@media (max-width: 900px) {

    html,body.fin-app{
        overflow-x: hidden;
    }

    .fin-app .conteudo{
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;

        padding:
            72px
            14px
            32px !important;

        box-sizing: border-box !important;
    }

    .fin-app .configuracao-card{
        max-width: 100%;
    }
}


@media (max-width: 620px) {

    .fin-app .conteudo{
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .fin-app .configuracao-card{
        padding: 15px;
    }

    .fin-app .configuracao-card-topo{
        gap: 12px;
    }

    .fin-app .configuracao-card h2{
        font-size: 18px;
    }

    .fin-app .configuracao-icone{
        flex-basis: 42px;

        width: 42px;
        height: 42px;
    }
}


/* =========================================================
   DASHBOARD - TRANSFERÊNCIAS ENTRE CONTAS
========================================================= */

.fin-app .acoes-contas-dashboard{
    display: flex;
    justify-content: flex-end;

    margin-top: 18px;
    padding-top: 18px;

    border-top:
        1px solid
        var(--border);
}

.fin-app .botao-transferencia-dashboard{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 190px;
    min-height: 38px;

    background:
        var(--bg-main);

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

    border-radius: 8px;

    color:
        var(--primary);

    font-family: inherit;
    font-size: 13px;
    font-weight: bold;

    cursor: pointer;
}

.fin-app .botao-transferencia-dashboard:hover{
    border-color:
        var(--primary);

    background:
        var(--bg-hover);
}

.fin-app .transferencias-dashboard{
    margin-top: 22px;
    padding-top: 20px;

    border-top:
        1px solid
        var(--border);
}

.fin-app .transferencias-dashboard-topo{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 12px;
}

.fin-app .transferencias-dashboard-topo h3{
    margin: 0 0 4px;

    color:
        var(--text);

    font-size: 16px;
}

.fin-app .transferencias-dashboard-topo p,.fin-app .transferencias-dashboard-topo > strong{
    margin: 0;

    color:
        var(--text-light);

    font-size: 11px;
}

.fin-app .lista-transferencias-dashboard{
    display: flex;
    flex-direction: column;

    width: 100%;
}

.fin-app .cabecalho-transferencias-dashboard,.fin-app .linha-transferencia-dashboard{
    display: grid;

    grid-template-columns:
        82px
        minmax(150px, 1fr)
        minmax(150px, 1fr)
        120px
        190px;

    gap: 10px;
    align-items: center;

    width: 100%;
}

.fin-app .cabecalho-transferencias-dashboard{
    padding: 11px 12px;

    background:
        var(--bg-main);

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

    border-bottom: 0;

    border-radius:
        9px 9px 0 0;

    color:
        var(--primary);

    font-size: 10px;
    font-weight: bold;
}

.fin-app .linha-transferencia-dashboard{
    min-height: 76px;

    padding: 11px 12px;

    background:
        var(--bg-card);

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

    border-bottom: 0;
}

.fin-app .linha-transferencia-dashboard:last-child{
    border-bottom:
        1px solid
        var(--border);

    border-radius:
        0 0 9px 9px;
}

.fin-app .linha-transferencia-dashboard:hover{
    background:
        var(--bg-hover);
}

.fin-app .data-transferencia-dashboard{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    background:
        var(--bg-main);

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

    border-radius: 8px;
}

.fin-app .data-transferencia-dashboard strong{
    color:
        var(--primary);

    font-size: 20px;
    line-height: 1;
}

.fin-app .data-transferencia-dashboard span{
    margin-top: 4px;

    color:
        var(--text-light);

    font-size: 9px;

    text-transform:
        uppercase;
}

.fin-app .conta-transferencia-dashboard{
    display: flex;
    flex-direction: column;

    gap: 4px;

    min-width: 0;
}

.fin-app .transferencia-label{
    color:
        #ff9f1a;

    font-size: 10px;
    font-weight: bold;
}

.fin-app .conta-transferencia-dashboard.destino
.transferencia-label{
    color:
        var(--success);
}

.fin-app .conta-transferencia-dashboard strong{
    overflow: hidden;

    color:
        var(--text);

    font-size: 13px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.fin-app .valor-transferencia-dashboard{
    text-align: right;

    white-space: nowrap;
}

.fin-app .valor-transferencia-dashboard strong{
    color:
        var(--primary);

    font-size: 14px;
}

.fin-app .acoes-transferencia-dashboard{
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 6px;
}

.fin-app .acoes-transferencia-dashboard
.botao-editar-final,.fin-app .acoes-transferencia-dashboard
.botao-excluir-final{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 34px !important;
}


@media (max-width: 1050px) {

    .fin-app .cabecalho-transferencias-dashboard{
        display: none;
    }

    .fin-app .linha-transferencia-dashboard{
        grid-template-columns:
            62px
            minmax(0, 1fr)
            minmax(0, 1fr);

        grid-template-areas:
            "data origem destino"
            "data valor acoes";

        row-gap: 9px;
    }

    .fin-app .data-transferencia-dashboard{
        grid-area: data;
    }

    .fin-app .conta-transferencia-dashboard:not(.destino){
        grid-area: origem;
    }

    .fin-app .conta-transferencia-dashboard.destino{
        grid-area: destino;
    }

    .fin-app .valor-transferencia-dashboard{
        grid-area: valor;

        text-align: left;
    }

    .fin-app .acoes-transferencia-dashboard{
        grid-area: acoes;
    }
}


@media (max-width: 620px) {

    .fin-app .acoes-contas-dashboard{
        justify-content: stretch;
    }

    .fin-app .botao-transferencia-dashboard{
        width: 100%;
    }

    .fin-app .transferencias-dashboard-topo{
        align-items: flex-start;
    }

    .fin-app .linha-transferencia-dashboard{
        grid-template-columns:
            58px
            minmax(0, 1fr);

        grid-template-areas:
            "data origem"
            "data destino"
            "data valor"
            "data acoes";
    }

    .fin-app .acoes-transferencia-dashboard{
        grid-template-columns:
            1fr 1fr;
    }
}


/* =========================================================
   RELATÓRIOS - FINCONTROLE
========================================================= */

.fin-app .relatorios-fincontrole{
    min-width: 0;
}

.fin-app .relatorios-topo-pagina{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;
}


/* =========================================================
   MENU SUPERIOR DOS RELATÓRIOS
========================================================= */

.fin-app .menu-relatorios{
    display: flex;
    align-items: center;

    gap: 7px;

    margin:
        20px
        0
        16px;

    padding: 6px;

    overflow-x: auto;

    background:
        var(--bg-card);

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

    border-radius: 10px;
}

.fin-app .menu-relatorio-item{
    flex:
        0
        0
        auto;

    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        14px;

    border:
        1px solid
        transparent;

    border-radius: 7px;

    color:
        var(--text-light);

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}

.fin-app .menu-relatorio-item:hover{
    color:
        var(--primary);

    background:
        var(--bg-hover);
}

.fin-app .menu-relatorio-item.ativo{
    color:
        var(--primary);

    background:
        var(--bg-main);

    border-color:
        var(--primary);
}

.fin-app .menu-relatorio-item.desabilitado{
    opacity: .45;
    cursor: default;
}


/* =========================================================
   PAINEL
========================================================= */

.fin-app .painel-relatorio{
    width: 100%;

    padding: 18px;

    background:
        var(--bg-card);

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

    border-radius: 12px;

    box-sizing: border-box;
}

.fin-app .cabecalho-relatorio{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 18px;
}

.fin-app .cabecalho-relatorio h2{
    margin:
        0
        0
        5px;

    color:
        var(--text);

    font-size: 18px;
}

.fin-app .cabecalho-relatorio p{
    margin: 0;

    color:
        var(--text-light);

    font-size: 11px;
}


/* =========================================================
   FILTRO DO ANO
========================================================= */

.fin-app .filtro-ano-relatorio{
    display: flex;
    flex-direction: column;

    gap: 6px;

    flex:
        0
        0
        130px;
}

.fin-app .filtro-periodo-relatorio{
    display: grid;
    grid-template-columns: minmax(145px, 1fr) 110px;
    gap: 9px;
    flex: 0 0 278px;
}

.fin-app .filtro-periodo-relatorio-campo{
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.fin-app .filtro-ano-relatorio label{
    color:
        var(--text-light);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
}

.fin-app .filtro-ano-relatorio select{
    width: 100%;
    min-height: 39px;

    padding:
        0
        10px;

    background:
        var(--bg-main);

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

    border-radius: 8px;

    color:
        var(--text);

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.fin-app .filtro-ano-relatorio select:focus{
    border-color:
        var(--primary);

    outline: none;
}


/* =========================================================
   TABELA MÊS A MÊS
========================================================= */

.fin-app .tabela-relatorio-scroll{
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

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

    border-radius: 9px;
}

.fin-app .tabela-relatorio-categorias{
    width: 100%;
    min-width: 1850px;

    border-collapse: separate;
    border-spacing: 0;

    background:
        var(--bg-card);

    table-layout: fixed;
}

.fin-app .tabela-relatorio-categorias th,.fin-app .tabela-relatorio-categorias td{
    min-width: 115px;

    padding:
        11px
        10px;

    border-bottom:
        1px solid
        var(--border);

    border-right:
        1px solid
        rgba(
            53,
            57,
            92,
            .55
        );

    text-align: right;

    white-space: nowrap;

    font-size: 11px;
}

.fin-app .tabela-relatorio-categorias th{
    position: sticky;
    top: 0;

    z-index: 2;

    background:
        var(--bg-main);

    color:
        var(--primary);

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
}

.fin-app .tabela-relatorio-categorias tbody td{
    color:
        var(--text-light);
}

.fin-app .tabela-relatorio-categorias tbody tr:hover td{
    background:
        var(--bg-hover);
}

.fin-app .tabela-relatorio-categorias
.coluna-categoria{
    position: sticky;
    left: 0;

    z-index: 3;

    width: 190px;
    min-width: 190px;
    max-width: 190px;

    text-align: left;

    background:
        var(--bg-card);
}

.fin-app .tabela-relatorio-categorias
thead
.coluna-categoria{
    z-index: 5;

    background:
        var(--bg-main);
}

.fin-app .tabela-relatorio-categorias
tbody
.coluna-categoria
strong{
    color:
        var(--text);

    font-size: 11px;
}

.fin-app .tabela-relatorio-categorias
.coluna-total{
    position: sticky;
    right: 0;

    z-index: 3;

    min-width: 130px;

    background:
        #171a2d;

    border-left:
        1px solid
        var(--border);
}

.fin-app .tabela-relatorio-categorias
thead
.coluna-total{
    z-index: 5;

    background:
        var(--bg-main);

    color:
        var(--primary);
}

.fin-app .tabela-relatorio-categorias
tbody
.coluna-total
strong{
    color:
        var(--primary);
}

.fin-app .tabela-relatorio-categorias tfoot td{
    position: sticky;
    bottom: 0;

    z-index: 4;

    background:
        var(--bg-main);

    color:
        var(--text);

    font-weight: 800;

    border-bottom: 0;
}

.fin-app .tabela-relatorio-categorias
tfoot
.coluna-categoria{
    z-index: 6;

    background:
        var(--bg-main);

    color:
        var(--primary);
}

.fin-app .tabela-relatorio-categorias
tfoot
.coluna-total{
    z-index: 6;

    background:
        var(--bg-main);

    color:
        var(--success);
}


/* =========================================================
   RODAPÉ
========================================================= */

.fin-app .rodape-relatorio{
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 22px;

    margin-top: 14px;

    color:
        var(--text-light);

    font-size: 11px;
}

.fin-app .rodape-relatorio strong{
    margin-left: 4px;

    color:
        var(--primary);
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 900px) {

    .fin-app .cabecalho-relatorio{
        align-items: stretch;
        flex-direction: column;
    }

    .fin-app .filtro-ano-relatorio{
        flex:
            0
            0
            auto;

        width: 150px;
    }

    .fin-app .filtro-periodo-relatorio{
        width: 278px;
    }

    .fin-app .painel-relatorio{
        padding: 14px;
    }
}


@media (max-width: 620px) {

    .fin-app .menu-relatorios{
        margin-top: 14px;
    }

    .fin-app .menu-relatorio-item{
        min-height: 34px;

        padding:
            0
            11px;

        font-size: 10px;
    }

    .fin-app .cabecalho-relatorio h2{
        font-size: 16px;
    }

    .fin-app .filtro-ano-relatorio{
        width: 100%;
    }

    .fin-app .filtro-periodo-relatorio{
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .fin-app .tabela-relatorio-categorias
    .coluna-categoria{
        width: 145px;
        min-width: 145px;
        max-width: 145px;
    }

    .fin-app .rodape-relatorio{
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;
    }
}


/* =========================================================
   RELATÓRIOS - AJUSTES FINAIS / COLUNA TRAVADA
========================================================= */

.fin-app .tabela-relatorio-categorias
.coluna-descritivo{
    position: sticky;
    left: 0;

    z-index: 4;

    width: 210px;
    min-width: 210px;
    max-width: 210px;

    text-align: left;

    background:
        var(--bg-card);

    border-right:
        1px solid
        var(--border);

    box-shadow:
        9px 0 14px
        rgba(0, 0, 0, .14);
}

.fin-app .tabela-relatorio-categorias
thead
.coluna-descritivo{
    z-index: 7;

    background:
        var(--bg-main);

    color:
        var(--primary);
}

.fin-app .tabela-relatorio-categorias
tfoot
.coluna-descritivo{
    z-index: 7;

    background:
        var(--bg-main);

    color:
        var(--primary);
}

.fin-app .tabela-relatorio-categorias
tbody
tr:hover
.coluna-descritivo{
    background:
        var(--bg-hover);
}

.fin-app .link-detalhe-relatorio{
    display: block;

    overflow: hidden;

    color:
        var(--text);

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
    text-overflow: ellipsis;

    white-space: nowrap;
}

.fin-app .link-detalhe-relatorio:hover{
    color:
        var(--primary);
}

.fin-app .linha-destaque-relatorio td{
    background:
        rgba(0, 229, 255, .04);

    font-weight: 700;
}

.fin-app .linha-destaque-relatorio
.coluna-descritivo{
    color:
        var(--primary);
}

.fin-app .valor-negativo-relatorio{
    color:
        #ff6b6b !important;
}

.fin-app .filtro-ativo-relatorio{
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin:
        -4px
        0
        14px;

    padding:
        9px
        11px;

    background:
        var(--bg-main);

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

    border-radius: 8px;

    color:
        var(--text-light);

    font-size: 10px;
}

.fin-app .filtro-ativo-relatorio a{
    color:
        var(--primary);

    font-weight: 700;

    text-decoration: none;
}


@media (max-width: 620px) {

    .fin-app .tabela-relatorio-categorias
    .coluna-descritivo{
        width: 150px;
        min-width: 150px;
        max-width: 150px;
    }
}


/* =========================================================
   FINCONTROLE - SCROLLBAR GLOBAL
========================================================= */

html,body.fin-app,.fin-app *{
    scrollbar-width: thin;
    scrollbar-color: #35395c #121428;
}

.fin-app *::-webkit-scrollbar{
    width: 8px;
    height: 8px;
    background: #121428;
}

.fin-app *::-webkit-scrollbar-track{
    background: #121428;
    border-radius: 999px;
}

.fin-app *::-webkit-scrollbar-thumb{
    background: #35395c;
    border: 2px solid #121428;
    border-radius: 999px;
    min-height: 38px;
}

.fin-app *::-webkit-scrollbar-thumb:hover{
    background: #00e5ff;
}

.fin-app *::-webkit-scrollbar-corner{
    background: #121428;
}

/* MENU LATERAL */
.fin-app .sidebar{
    scrollbar-width: thin;
    scrollbar-color: #35395c #121428;
}

.fin-app .sidebar::-webkit-scrollbar{
    width: 6px;
}

.fin-app .sidebar::-webkit-scrollbar-track{
    background: #121428;
}

.fin-app .sidebar::-webkit-scrollbar-thumb{
    background: #35395c;
    border: 1px solid #121428;
    border-radius: 999px;
}

.fin-app .sidebar::-webkit-scrollbar-thumb:hover{
    background: #00e5ff;
}

/* CONTEÚDO PRINCIPAL / MODAIS / ASSISTENTE */
.fin-app .conteudo,.fin-app .conteudo-dashboard,.fin-app .relatorio-meses-scroll,.fin-app .modal-dashboard-conteudo,.fin-app .conteudo-fatura-dashboard,.fin-app .assistente-conteudo,.fin-app .assistente-mensagens{
    scrollbar-width: thin;
    scrollbar-color: #35395c #121428;
}

/* RELATÓRIOS - HORIZONTAL */
.fin-app .relatorio-meses-scroll::-webkit-scrollbar{
    height: 10px;
}

.fin-app .relatorio-meses-scroll::-webkit-scrollbar-track{
    background: #121428;
    border: 1px solid #35395c;
    border-radius: 999px;
}

.fin-app .relatorio-meses-scroll::-webkit-scrollbar-thumb{
    background: #252846;
    border: 2px solid #121428;
    border-radius: 999px;
    min-width: 58px;
}

.fin-app .relatorio-meses-scroll::-webkit-scrollbar-thumb:hover{
    background: #00e5ff;
}

/* MODAIS / CHAT */
.fin-app .modal-dashboard-conteudo::-webkit-scrollbar,.fin-app .conteudo-fatura-dashboard::-webkit-scrollbar,.fin-app .assistente-conteudo::-webkit-scrollbar,.fin-app .assistente-mensagens::-webkit-scrollbar{
    width: 7px;
}

.fin-app .modal-dashboard-conteudo::-webkit-scrollbar-thumb,.fin-app .conteudo-fatura-dashboard::-webkit-scrollbar-thumb,.fin-app .assistente-conteudo::-webkit-scrollbar-thumb,.fin-app .assistente-mensagens::-webkit-scrollbar-thumb{
    background: #35395c;
    border: 2px solid #121428;
    border-radius: 999px;
}

.fin-app .modal-dashboard-conteudo::-webkit-scrollbar-thumb:hover,.fin-app .conteudo-fatura-dashboard::-webkit-scrollbar-thumb:hover,.fin-app .assistente-conteudo::-webkit-scrollbar-thumb:hover,.fin-app .assistente-mensagens::-webkit-scrollbar-thumb:hover{
    background: #00e5ff;
}

/* MOBILE */
@media(max-width:620px) {
    .fin-app *::-webkit-scrollbar{
        width: 6px;
        height: 6px;
    }

    .fin-app .sidebar::-webkit-scrollbar{
        width: 4px;
    }

    .fin-app .relatorio-meses-scroll::-webkit-scrollbar{
        height: 8px;
    }
}


/* =========================================================
   FINCONTROLE - CORREÇÃO VISUAL DOS RELATÓRIOS
   V2 - largura, leitura e rolagem horizontal
========================================================= */

/*
 * O conteúdo de relatórios deve aproveitar toda a área disponível.
 */
.fin-app .relatorios-fincontrole{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.fin-app .relatorios-fincontrole .relatorios-topo-pagina,.fin-app .relatorios-fincontrole .menu-relatorios,.fin-app .relatorios-fincontrole .relatorio-card,.fin-app .relatorios-fincontrole .card-relatorio,.fin-app .relatorios-fincontrole .relatorio-bloco,.fin-app .relatorios-fincontrole .relatorio-conteudo{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}


/* =========================================================
   MENU SUPERIOR DOS RELATÓRIOS
========================================================= */

.fin-app .menu-relatorios{
    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    gap: 6px !important;

    margin:
        18px
        0
        14px !important;

    padding: 5px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    background:
        var(--bg-card) !important;

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

    border-radius:
        9px !important;
}

.fin-app .menu-relatorios a,.fin-app .menu-relatorios .menu-relatorio-item{
    flex: 0 0 auto !important;

    min-height: 34px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding:
        0
        13px !important;

    border-radius:
        7px !important;

    font-size:
        11px !important;

    white-space:
        nowrap !important;
}


/* =========================================================
   CARD / ÁREA PRINCIPAL DO RELATÓRIO
========================================================= */

.fin-app .relatorio-card,.fin-app .card-relatorio,.fin-app .relatorio-bloco{
    padding:
        16px !important;

    border-radius:
        10px !important;
}

.fin-app .relatorio-card h2,.fin-app .relatorio-card h3,.fin-app .card-relatorio h2,.fin-app .card-relatorio h3{
    font-size:
        17px !important;
}

.fin-app .relatorio-card p,.fin-app .card-relatorio p{
    font-size:
        11px !important;
}


/* =========================================================
   TABELA DUPLA
   Categoria fixa + meses roláveis
========================================================= */

.fin-app .relatorio-tabela-dupla{
    display: grid !important;

    grid-template-columns:
        200px
        minmax(0, 1fr) !important;

    width:
        100% !important;

    min-width:
        0 !important;

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

    border-radius:
        9px !important;

    overflow:
        hidden !important;

    background:
        var(--bg-card) !important;
}


/* coluna fixa da esquerda */
.fin-app .relatorio-coluna-fixa{
    width:
        200px !important;

    min-width:
        200px !important;

    max-width:
        200px !important;

    overflow:
        hidden !important;

    background:
        var(--bg-card) !important;

    border-right:
        1px solid
        var(--border) !important;

    position:
        relative !important;

    z-index:
        20 !important;
}


/* área dos meses ocupa o restante */
.fin-app .relatorio-meses-wrapper{
    width:
        100% !important;

    min-width:
        0 !important;

    overflow:
        hidden !important;
}

.fin-app .relatorio-meses-scroll{
    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    overflow-x:
        auto !important;

    overflow-y:
        hidden !important;

    padding-bottom:
        5px !important;
}


/* =========================================================
   TAMANHO DAS TABELAS
========================================================= */

.fin-app .tabela-relatorio-fixa,.fin-app .tabela-relatorio-meses{
    border-collapse:
        collapse !important;

    table-layout:
        fixed !important;
}

.fin-app .tabela-relatorio-fixa{
    width:
        200px !important;

    min-width:
        200px !important;
}

.fin-app .tabela-relatorio-meses{
    width:
        max-content !important;

    min-width:
        1040px !important;
}


/* células da coluna fixa */
.fin-app .tabela-relatorio-fixa th,.fin-app .tabela-relatorio-fixa td{
    width:
        200px !important;

    min-width:
        200px !important;

    height:
        42px !important;

    padding:
        0
        12px !important;

    box-sizing:
        border-box !important;

    font-size:
        11px !important;

    line-height:
        1.25 !important;

    vertical-align:
        middle !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;
}


/* meses e total */
.fin-app .tabela-relatorio-meses th,.fin-app .tabela-relatorio-meses td{
    width:
        80px !important;

    min-width:
        80px !important;

    height:
        42px !important;

    padding:
        0
        9px !important;

    box-sizing:
        border-box !important;

    font-size:
        11px !important;

    line-height:
        1.2 !important;

    text-align:
        right !important;

    vertical-align:
        middle !important;

    white-space:
        nowrap !important;
}


/* cabeçalhos */
.fin-app .tabela-relatorio-fixa thead th,.fin-app .tabela-relatorio-meses thead th{
    height:
        40px !important;

    color:
        var(--primary) !important;

    background:
        var(--bg-main) !important;

    font-size:
        10px !important;

    font-weight:
        900 !important;

    text-transform:
        uppercase !important;
}

.fin-app .tabela-relatorio-fixa thead th{
    text-align:
        left !important;
}

.fin-app .tabela-relatorio-meses thead th{
    text-align:
        center !important;
}


/* linhas */
.fin-app .tabela-relatorio-fixa tbody td,.fin-app .tabela-relatorio-meses tbody td{
    border-top:
        1px solid
        var(--border) !important;

    background:
        var(--bg-card) !important;
}

.fin-app .tabela-relatorio-fixa tbody tr:hover td,.fin-app .tabela-relatorio-meses tbody tr:hover td{
    background:
        var(--bg-hover) !important;
}


/* nomes das categorias um pouco mais fortes */
.fin-app .tabela-relatorio-fixa tbody td{
    color:
        var(--text) !important;

    font-weight:
        700 !important;
}


/* total fixo do fim */
.fin-app .tabela-relatorio-meses .coluna-total-meses,.fin-app .tabela-relatorio-meses th:last-child,.fin-app .tabela-relatorio-meses td:last-child{
    min-width:
        92px !important;

    width:
        92px !important;

    font-weight:
        900 !important;
}


/* =========================================================
   SELETOR DE ANO
========================================================= */

.fin-app .relatorios-fincontrole select,.fin-app .relatorio-card select,.fin-app .card-relatorio select{
    min-height:
        38px !important;

    font-size:
        12px !important;
}


/* =========================================================
   SCROLL HORIZONTAL BONITO
========================================================= */

.fin-app .relatorio-meses-scroll{
    scrollbar-width:
        thin !important;

    scrollbar-color:
        #35395c
        #121428 !important;
}

.fin-app .relatorio-meses-scroll::-webkit-scrollbar{
    display:
        block !important;

    height:
        9px !important;

    background:
        #121428 !important;
}

.fin-app .relatorio-meses-scroll::-webkit-scrollbar-track{
    background:
        #121428 !important;

    border:
        1px solid
        #35395c !important;

    border-radius:
        999px !important;
}

.fin-app .relatorio-meses-scroll::-webkit-scrollbar-thumb{
    background:
        #35395c !important;

    border:
        2px solid
        #121428 !important;

    border-radius:
        999px !important;

    min-width:
        60px !important;
}

.fin-app .relatorio-meses-scroll::-webkit-scrollbar-thumb:hover{
    background:
        #00e5ff !important;
}


/* =========================================================
   NOTEBOOK / TABLET
========================================================= */

@media(max-width:1100px) {

    .fin-app .relatorio-tabela-dupla{
        grid-template-columns:
            180px
            minmax(0, 1fr) !important;
    }

    .fin-app .relatorio-coluna-fixa,.fin-app .tabela-relatorio-fixa,.fin-app .tabela-relatorio-fixa th,.fin-app .tabela-relatorio-fixa td{
        width:
            180px !important;

        min-width:
            180px !important;

        max-width:
            180px !important;
    }

    .fin-app .tabela-relatorio-meses{
        min-width:
            980px !important;
    }

    .fin-app .tabela-relatorio-meses th,.fin-app .tabela-relatorio-meses td{
        width:
            75px !important;

        min-width:
            75px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:620px) {

    .fin-app .relatorios-fincontrole{
        padding-right:
            0 !important;
    }

    .fin-app .relatorios-topo-pagina{
        display:
            block !important;
    }

    .fin-app .menu-relatorios{
        margin-top:
            12px !important;

        padding:
            4px !important;
    }

    .fin-app .menu-relatorios a,.fin-app .menu-relatorios .menu-relatorio-item{
        min-height:
            38px !important;

        padding:
            0
            12px !important;

        font-size:
            11px !important;
    }

    .fin-app .relatorio-card,.fin-app .card-relatorio,.fin-app .relatorio-bloco{
        padding:
            12px !important;
    }

    .fin-app .relatorio-tabela-dupla{
        grid-template-columns:
            145px
            minmax(0, 1fr) !important;
    }

    .fin-app .relatorio-coluna-fixa,.fin-app .tabela-relatorio-fixa,.fin-app .tabela-relatorio-fixa th,.fin-app .tabela-relatorio-fixa td{
        width:
            145px !important;

        min-width:
            145px !important;

        max-width:
            145px !important;
    }

    .fin-app .tabela-relatorio-fixa th,.fin-app .tabela-relatorio-fixa td{
        height:
            44px !important;

        padding:
            0
            9px !important;

        font-size:
            10px !important;
    }

    .fin-app .tabela-relatorio-meses{
        min-width:
            910px !important;
    }

    .fin-app .tabela-relatorio-meses th,.fin-app .tabela-relatorio-meses td{
        width:
            70px !important;

        min-width:
            70px !important;

        height:
            44px !important;

        padding:
            0
            7px !important;

        font-size:
            10px !important;
    }

    .fin-app .relatorio-meses-scroll::-webkit-scrollbar{
        height:
            7px !important;
    }
}



/* ===== APRENDER / ONBOARDING VISUAL ===== */
/* =========================================================
   FINCONTROLE - APRENDER POR MÓDULO V2
========================================================= */

/*
 * Por padrão o botão entra DENTRO do cabeçalho da página.
 * Assim ele não cobre período, filtros ou ações.
 */
.fin-app .botao-aprender-modulo{
    position: static;
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 38px;
    padding: 0 13px;

    border: 1px solid rgba(0,229,255,.38);
    border-radius: 9px;

    background: rgba(15,17,32,.72);
    color: var(--primary, #00e5ff);

    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .35px;

    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
}

.fin-app .botao-aprender-modulo:hover{
    background: var(--bg-hover, #252846);
    border-color: var(--primary, #00e5ff);
}

.fin-app .botao-aprender-modulo .aprender-icone{
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,229,255,.09);
    font-size: 12px;
}

/* Cabeçalhos conhecidos */
.fin-app .dashboard-cabecalho,.fin-app .relatorios-topo-pagina,.fin-app .fc-cadastro-cabecalho,.fin-app .aprender-host-cabecalho{
    gap: 12px !important;
}

.fin-app .dashboard-cabecalho .botao-aprender-modulo,.fin-app .relatorios-topo-pagina .botao-aprender-modulo,.fin-app .fc-cadastro-cabecalho .botao-aprender-modulo{
    margin-left: auto;
}

/* No dashboard ele fica antes do seletor de período. */
.fin-app .dashboard-cabecalho .botao-aprender-modulo + .seletor-periodo-dashboard{
    margin-left: 0 !important;
}

/* Se nenhuma área adequada existir, usa fallback flutuante. */
.fin-app .botao-aprender-modulo.aprender-flutuante{
    position: fixed;
    right: 18px;
    bottom: 88px;
    top: auto;
    z-index: 1800;
    background: rgba(15,17,32,.96);
    box-shadow: 0 10px 28px rgba(0,0,0,.26);
    backdrop-filter: blur(8px);
}

/* =========================================================
   TOUR LOCAL DO MÓDULO
========================================================= */
.fin-app .aprender-overlay{
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: none;
    background: rgba(4,6,15,.70);
    pointer-events: none;
}

.fin-app .aprender-overlay.ativo{
    display: block;
}

.fin-app .aprender-caixa{
    position: fixed;
    z-index: 100000;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);

    width: min(540px, calc(100vw - 22px));
    padding: 18px;

    border: 1px solid var(--border, #35395c);
    border-radius: 13px;
    background: var(--bg-card, #1a1d33);
    color: var(--text, #fff);

    box-shadow: 0 24px 70px rgba(0,0,0,.56);
}

.fin-app .aprender-topo{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.fin-app .aprender-progresso{
    color: var(--primary, #00e5ff);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.fin-app .aprender-modulo{
    margin-top: 3px;
    color: var(--text-light, #bfc6ff);
    font-size: 10px;
    font-weight: 800;
}

.fin-app .aprender-fechar{
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid var(--border, #35395c);
    border-radius: 8px;
    background: transparent;
    color: var(--text-light, #bfc6ff);
    font-size: 19px;
    cursor: pointer;
}

.fin-app .aprender-caixa h3{
    margin: 14px 0 7px;
    color: var(--text, #fff);
    font-size: 18px;
}

.fin-app .aprender-caixa p{
    margin: 0;
    color: var(--text-light, #bfc6ff);
    font-size: 13px;
    line-height: 1.58;
}

.fin-app .aprender-acoes{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
}

.fin-app .aprender-botao{
    min-height: 42px;
    border: 1px solid var(--primary, #00e5ff);
    border-radius: 8px;
    background: rgba(0,229,255,.08);
    color: var(--primary, #00e5ff);
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.fin-app .aprender-botao.secundario{
    border-color: var(--border, #35395c);
    background: transparent;
    color: var(--text-light, #bfc6ff);
}

.fin-app .aprender-botao:disabled{
    opacity: .35;
    cursor: default;
}

.fin-app .aprender-destaque{
    position: relative !important;
    z-index: 99999 !important;
    outline: 2px solid var(--primary, #00e5ff) !important;
    outline-offset: 4px !important;
    border-radius: 8px !important;
    box-shadow: 0 0 0 7px rgba(0,229,255,.09) !important;
}

body.fin-app.aprender-ativo{
    scroll-behavior: smooth;
}

@media(max-width:900px) {
    .fin-app .dashboard-cabecalho{
        flex-wrap: wrap !important;
    }

    .fin-app .dashboard-cabecalho .botao-aprender-modulo{
        order: 2;
        margin-left: auto;
    }

    .fin-app .dashboard-cabecalho .seletor-periodo-dashboard{
        order: 3;
    }
}

@media(max-width:620px) {
    .fin-app .dashboard-cabecalho,.fin-app .relatorios-topo-pagina,.fin-app .fc-cadastro-cabecalho{
        align-items: flex-start !important;
    }

    .fin-app .dashboard-cabecalho .botao-aprender-modulo,.fin-app .relatorios-topo-pagina .botao-aprender-modulo,.fin-app .fc-cadastro-cabecalho .botao-aprender-modulo{
        min-height: 36px;
        padding: 0 10px;
        margin-left: 0;
        font-size: 10px;
    }

    .fin-app .dashboard-cabecalho .botao-aprender-modulo{
        order: 3;
        width: auto;
    }

    .fin-app .dashboard-cabecalho .seletor-periodo-dashboard{
        order: 2;
        width: auto;
        margin-left: auto;
    }

    .fin-app .botao-aprender-modulo.aprender-flutuante{
        right: 12px;
        bottom: 82px;
    }

    .fin-app .aprender-caixa{
        top: 8px;
        width: calc(100vw - 16px);
        padding: 15px;
    }

    .fin-app .aprender-caixa h3{
        font-size: 18px;
    }

    .fin-app .aprender-caixa p{
        font-size: 14px;
    }

    .fin-app .aprender-botao{
        min-height: 48px;
        font-size: 12px;
    }
}


/* =========================================================
   FINCONTROLE - TUTORIAL / ANALISE VISUAL V6
========================================================= */

.fin-app #dashboardGraficos.aprender-destaque,.fin-app .dashboard-grafico-card.aprender-destaque,.fin-app #tourExplicacaoGraficos.aprender-destaque{
    overflow:visible!important;
}

@media(max-width:760px){
    .fin-app .aprender-caixa{
        width:calc(100vw - 14px)!important;
        max-height:44vh!important;
        overflow:auto!important;
    }

    .fin-app .aprender-acoes{
        grid-template-columns:1fr 1fr!important;
        gap:7px!important;
    }
}


/* =========================================================
   FINCONTROLE - TUTORIAL/TOUR V6.4
   Proteção contra clique acidental em ações reais da página
========================================================= */

/* Durante o Tutorial local, o fundo não recebe cliques. */
.fin-app .aprender-overlay{
    pointer-events: auto !important;
}

/* A caixa continua totalmente utilizável. */
.fin-app .aprender-caixa{
    pointer-events: auto !important;
}

/* O elemento destacado é somente visual durante a explicação. */
.fin-app .aprender-destaque{
    pointer-events: none !important;
}

/* Mesma proteção no Tour Geral. */
.fin-app .onboarding-destaque{
    pointer-events: none !important;
}

/*
 * O objetivo é impedir que um toque no destaque execute ações como
 * "Nova transferência", "Editar", "Excluir", "Pagar" etc.
 */


/* =========================================================
   FINCONTROLE - TOUR GERAL V6.8
   Layout restaurado / independente do theme.css
========================================================= */

.fin-app .onboarding-overlay{
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;

    background: rgba(5, 7, 18, .58) !important;
    backdrop-filter: blur(1.5px);

    pointer-events: none !important;
}

.fin-app .onboarding-caixa{
    position: fixed !important;
    top: 14px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    transform: translateX(-50%) !important;

    z-index: 2147483001 !important;

    width: min(440px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 28px) !important;
    overflow-y: auto !important;

    padding: 16px !important;

    background: #171a30 !important;
    border: 1px solid #3a4068 !important;
    border-radius: 13px !important;

    box-shadow:
        0 18px 55px rgba(0,0,0,.50),
        0 0 0 1px rgba(0,229,255,.035) !important;

    color: #ffffff !important;

    font-family: Arial, sans-serif !important;

    pointer-events: auto !important;
}

.fin-app .onboarding-progresso{
    margin: 0 42px 3px 0 !important;

    color: #00e5ff !important;

    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;

    letter-spacing: .25px !important;
}

.fin-app .onboarding-pagina{
    margin: 0 42px 8px 0 !important;

    color: #00ffb3 !important;

    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    text-transform: uppercase !important;
    letter-spacing: .35px !important;
}

.fin-app .onboarding-caixa h3{
    margin: 0 42px 7px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

.fin-app .onboarding-caixa p{
    margin: 0 !important;
    padding: 0 !important;

    color: #c8cff8 !important;

    font-size: 11px !important;
    line-height: 1.5 !important;
}

.fin-app .onboarding-fechar{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;

    width: 31px !important;
    min-width: 31px !important;
    height: 31px !important;
    min-height: 31px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #101326 !important;

    border: 1px solid #41476e !important;
    border-radius: 8px !important;

    color: #ffffff !important;

    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    cursor: pointer !important;
}

.fin-app .onboarding-fechar:hover{
    border-color: #00e5ff !important;
    color: #00e5ff !important;
}

.fin-app .onboarding-acoes{
    margin-top: 14px !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

.fin-app .onboarding-botao{
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 8px 12px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(0,229,255,.08) !important;

    border: 1px solid #00e5ff !important;
    border-radius: 8px !important;

    color: #00e5ff !important;

    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;

    cursor: pointer !important;
}

.fin-app .onboarding-botao:hover{
    background: rgba(0,229,255,.14) !important;
}

.fin-app .onboarding-botao.secundario{
    background: transparent !important;
    border-color: #3a4068 !important;
    color: #d5d9f5 !important;
}

.fin-app .onboarding-botao.secundario:hover{
    border-color: #69719c !important;
}

.fin-app .onboarding-botao:disabled{
    opacity: .45 !important;
    cursor: default !important;
}

.fin-app .onboarding-pular{
    width: 100% !important;
    min-height: 34px !important;

    margin: 8px 0 0 !important;
    padding: 7px 10px !important;

    background: transparent !important;

    border: 1px solid #343a60 !important;
    border-radius: 8px !important;

    color: #aeb6e8 !important;

    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    cursor: pointer !important;
}

.fin-app .onboarding-pular:hover{
    color: #ffffff !important;
    border-color: #59618e !important;
}

/*
 * Destaque do elemento ensinado.
 * O contorno fica forte e visível sem alterar o layout.
 */
.fin-app .onboarding-destaque{
    position: relative !important;
    z-index: 2147482999 !important;

    outline: 2px solid #00e5ff !important;
    outline-offset: 4px !important;

    border-radius: 7px !important;

    box-shadow:
        0 0 0 4px rgba(0,229,255,.08),
        0 0 24px rgba(0,229,255,.18) !important;

    pointer-events: none !important;
}

@media (max-width: 620px) {

    .fin-app .onboarding-caixa{
        top: 8px !important;

        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
        max-height: calc(100vh - 16px) !important;

        padding: 13px !important;

        border-radius: 11px !important;
    }

    .fin-app .onboarding-caixa h3{
        font-size: 15px !important;
    }

    .fin-app .onboarding-caixa p{
        font-size: 10px !important;
    }

    .fin-app .onboarding-acoes{
        gap: 7px !important;
    }

    .fin-app .onboarding-botao{
        min-height: 40px !important;
        font-size: 10px !important;
    }

    .fin-app .onboarding-pular{
        min-height: 36px !important;
    }
}


/* =========================================================
   FINCONTROLE - V6.9 - BOTÃO ENCERRAR TOUR
========================================================= */

.fin-app .onboarding-pular{
    background:
        rgba(255, 75, 92, .10) !important;

    border:
        1px solid
        rgba(255, 75, 92, .75) !important;

    color:
        #ff6673 !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,75,92,.04) !important;
}

.fin-app .onboarding-pular:hover,.fin-app .onboarding-pular:focus-visible{
    background:
        rgba(255, 75, 92, .18) !important;

    border-color:
        #ff5b68 !important;

    color:
        #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(255,75,92,.10),
        0 0 18px rgba(255,75,92,.12) !important;

    outline: none !important;
}

@media (max-width: 620px) {
    .fin-app .onboarding-pular{
        min-height: 40px !important;
        font-size: 10px !important;
        font-weight: 900 !important;
    }
}


/* ===== BLOG ===== */

.pagina-blog *{box-sizing:border-box}html{scroll-behavior:smooth}body.pagina-blog{margin:0;background:radial-gradient(circle at 50% 0,#09234b 0,#070b19 34%,#070b19 100%);color:var(--text);font-family:Arial,sans-serif}.pagina-blog .bc{width:min(1480px,calc(100% - 42px));margin:auto}
.pagina-blog .bt{position:sticky;top:0;z-index:30;background:rgba(4,10,22,.94);border-bottom:1px solid var(--border);backdrop-filter:blur(14px)}.pagina-blog .bti{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}.pagina-blog .brand{display:flex;align-items:center;width:287px;height:63px}.pagina-blog .brand img{display:block;width:287px;height:63px;object-fit:contain;object-position:left center}.pagina-blog .bn{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pagina-blog .bn a{padding:11px 14px;color:#e8f0ff;text-decoration:none;font-size:13px;font-weight:700;border-bottom:2px solid transparent}.pagina-blog .bn a:hover,.pagina-blog .bn .ativo{color:var(--primary);border-color:var(--primary)}.pagina-blog .bn .navcta{background:var(--primary);color:#03121a;border:0;border-radius:8px;padding:13px 18px}
.pagina-blog .hero-blog{padding:22px 0 12px}.pagina-blog .hero-grid{min-height:310px;display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:linear-gradient(120deg,#07101f,#08224b)}.pagina-blog .hero-grid>div:first-child{padding:40px 50px}.pagina-blog .hero-grid span,.pagina-blog .artigos-topo small,.pagina-blog .tag-art{color:var(--primary);font-size:11px;font-weight:900;letter-spacing:.6px}.pagina-blog .hero-grid h1{font-size:clamp(38px,4vw,62px);line-height:1.04;margin:12px 0 18px;max-width:650px}.pagina-blog .hero-grid p{font-size:16px;line-height:1.7;color:var(--light);max-width:640px}.pagina-blog .hero-img{height:310px}.pagina-blog .hero-img img{width:100%;height:100%;object-fit:cover;object-position:center}
.pagina-blog .artigos-topo{padding:28px 0 10px}.pagina-blog .artigos-topo h2{font-size:28px;margin:5px 0}.pagina-blog .artigos-topo p{margin:0;color:var(--light)}
.pagina-blog .bg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:12px 0 35px}.pagina-blog .card{overflow:hidden;border:1px solid var(--border);border-radius:13px;background:linear-gradient(180deg,#0b1930,#091426);transition:.2s}.pagina-blog .card:hover{transform:translateY(-3px);border-color:#00b8df;box-shadow:0 14px 35px rgba(0,229,255,.08)}.pagina-blog .card-img{display:block;height:155px;overflow:hidden;background:#07111f}.pagina-blog .card-img img{width:100%;height:100%;object-fit:cover;transition:.25s}.pagina-blog .card:hover .card-img img{transform:scale(1.035)}.pagina-blog .card-body{padding:15px}.pagina-blog .card-body small{display:inline-block;color:var(--primary);font-size:9px;font-weight:900}.pagina-blog .card-body h2{margin:9px 0;font-size:17px;line-height:1.3}.pagina-blog .card-body h2 a{color:white;text-decoration:none}.pagina-blog .card-body p{min-height:70px;margin:0;color:var(--light);font-size:11px;line-height:1.55}.pagina-blog .card-footer{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:15px;color:#8da5c4;font-size:10px}.pagina-blog .card-footer a{color:var(--primary);font-weight:900;text-decoration:none}
.pagina-blog .cta-final{margin:0 auto 45px;padding:25px 32px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(100deg,#0a1930,#08294a);display:flex;align-items:center;justify-content:space-between;gap:20px}.pagina-blog .cta-final h2{margin:0 0 5px}.pagina-blog .cta-final p{margin:0;color:var(--light)}.pagina-blog .cta-final>a{white-space:nowrap;padding:14px 22px;border-radius:8px;background:var(--primary);color:#03121a;text-decoration:none;font-weight:900}
.pagina-blog .art{width:min(900px,calc(100% - 32px));margin:auto;padding:50px 0 80px}.pagina-blog .voltar{color:var(--primary);font-size:11px;font-weight:900;text-decoration:none}.pagina-blog .cab{padding:22px 0 28px;border-bottom:1px solid var(--border)}.pagina-blog .cab h1{margin:12px 0;font-size:clamp(36px,5vw,56px);line-height:1.08}.pagina-blog .desc{color:var(--light);font-size:17px;line-height:1.65}.pagina-blog .meta{margin-top:13px;color:#8ea6c6;font-size:11px}.pagina-blog .art-img{margin:28px 0 8px;border:1px solid var(--border);border-radius:15px;overflow:hidden;background:#081427}.pagina-blog .art-img img{display:block;width:100%;max-height:460px;object-fit:cover}.pagina-blog .conteudo{padding-top:20px;color:#e8efff;font-size:16px;line-height:1.85}.pagina-blog .conteudo h2{margin:34px 0 10px;color:#fff;font-size:25px;line-height:1.25}.pagina-blog .conteudo p{margin:0 0 18px}.pagina-blog .cta{margin-top:42px;padding:25px;border:1px solid rgba(0,229,255,.35);border-radius:14px;background:linear-gradient(120deg,#0d1930,#0b2740)}.pagina-blog .cta h2{margin:0 0 8px}.pagina-blog .cta p{color:var(--light)}.pagina-blog .cta a{display:inline-flex;margin-top:6px;padding:11px 15px;border-radius:8px;background:var(--primary);color:#03121a;text-decoration:none;font-size:11px;font-weight:900}.pagina-blog .vazio{margin:30px 0 70px;padding:22px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--light)}
@media(max-width:1250px){.pagina-blog .bg{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:900px){.pagina-blog .hero-grid{grid-template-columns:1fr}.pagina-blog .hero-img{height:250px}.pagina-blog .bg{grid-template-columns:repeat(2,minmax(0,1fr))}.pagina-blog .brand{width:230px}}@media(max-width:620px){.pagina-blog .bc{width:min(100% - 24px,1480px)}.pagina-blog .bti{align-items:flex-start;flex-direction:column;padding:10px 0}.pagina-blog .bn{width:100%}.pagina-blog .bn a{padding:8px}.pagina-blog .hero-grid>div:first-child{padding:28px 22px}.pagina-blog .hero-grid h1{font-size:38px}.pagina-blog .bg{grid-template-columns:1fr}.pagina-blog .card-img{height:210px}.pagina-blog .cta-final{align-items:flex-start;flex-direction:column}.pagina-blog .cta-final>a{width:100%;text-align:center}}
/* V3 - qualidade de imagens e identidade visual */
.pagina-blog .card-img img,.pagina-blog .art-img img{image-rendering:auto}
.pagina-blog .art-img img{width:100%;height:auto;max-height:none;aspect-ratio:16/9;object-fit:cover}
.pagina-blog .logo-fincontrole-reutilizavel{display:block;max-width:287px;height:auto;object-fit:contain}
.pagina-blog .marca-fincontrole-reutilizavel{display:block;width:48px;height:48px;object-fit:contain}


/* =========================================================
   TOPO UNIFICADO V9 - BLOG + INDEX
========================================================= */

.pagina-blog .bt{
    border-top:
        2px solid
        rgba(0,229,255,.62) !important;
}

.pagina-blog .bti{
    position:relative !important;
    min-height:82px !important;
    gap:24px !important;
}

.pagina-blog .brand{
    width:250px !important;
    height:58px !important;
    flex:0 0 250px !important;
}

.pagina-blog .brand img{
    width:250px !important;
    height:58px !important;
    object-fit:contain !important;
}

.pagina-blog .brand .fc-marca-inline{
    width:100%;
    height:58px;
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
}

.pagina-blog .brand .fc-marca-inline svg{
    width:52px;
    height:52px;
    flex:0 0 52px;
    display:block;
}

.pagina-blog .brand .fc-marca-inline strong{
    color:#fff;
    font-size:31px;
    font-weight:850;
    letter-spacing:-1px;
    white-space:nowrap;
}

.pagina-blog .brand .fc-marca-inline strong span{
    color:#00e5ff;
}

.pagina-blog .bn{
    margin-left:auto !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
}

.pagina-blog .bn a{
    min-height:44px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 15px !important;
    border:1px solid transparent !important;
    border-radius:9px !important;
    color:#e8f0ff !important;
    font-size:13px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
}

.pagina-blog .bn a:hover,.pagina-blog .bn .ativo{
    color:var(--primary) !important;
    background:rgba(0,229,255,.055) !important;
    border-color:rgba(0,229,255,.18) !important;
}

.pagina-blog .bn .navcta{
    min-height:46px !important;
    padding:0 19px !important;
    margin-left:3px !important;
    background:var(--primary) !important;
    border:1px solid var(--primary) !important;
    border-radius:9px !important;
    color:#03121a !important;
    font-size:13px !important;
    font-weight:900 !important;
}

/*
 * Botão mobile: propositalmente claro/ciano
 * para não sumir no fundo escuro.
 */
.pagina-blog .menu-toggle{
    display:none;

    width:52px;
    height:52px;
    flex:0 0 52px;

    padding:0;

    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;

    background:var(--primary);

    border:
        2px solid
        #7bf3ff;

    border-radius:11px;

    box-shadow:
        0 0 22px
        rgba(0,229,255,.26);

    cursor:pointer;
}

.pagina-blog .menu-toggle span{
    width:24px;
    height:3px;

    display:block;

    border-radius:999px;

    background:#03121a;

    transition:.2s ease;
}


@media(max-width:820px){

    .pagina-blog .bti{
        min-height:78px !important;
        padding:7px 0 !important;

        flex-direction:row !important;
        align-items:center !important;
    }

    .pagina-blog .brand{
        width:225px !important;
        height:54px !important;
        flex-basis:225px !important;
    }

    .pagina-blog .brand img{
        width:225px !important;
        height:54px !important;
    }

    .pagina-blog .brand .fc-marca-inline{height:54px;gap:9px}
    .pagina-blog .brand .fc-marca-inline svg{width:46px;height:46px;flex-basis:46px}
    .pagina-blog .brand .fc-marca-inline strong{font-size:27px}

    .pagina-blog .menu-toggle{
        display:flex !important;
        margin-left:auto;
    }

    .pagina-blog .bn{
        display:none !important;

        position:absolute;

        top:calc(100% + 8px);
        left:0;
        right:0;

        width:100% !important;

        padding:12px;
        margin:0 !important;

        flex-direction:column !important;
        align-items:stretch !important;

        gap:6px !important;

        background:#071326;

        border:
            1px solid
            rgba(0,229,255,.48);

        border-radius:14px;

        box-shadow:
            0 22px 60px
            rgba(0,0,0,.52);
    }

    body.pagina-blog.menu-aberto .bn{
        display:flex !important;
    }

    .pagina-blog .bn a{
        width:100% !important;
        min-height:52px !important;

        justify-content:flex-start !important;

        padding:0 16px !important;

        background:#0b1a30 !important;

        border:
            1px solid
            #17385a !important;

        border-radius:9px !important;

        color:#fff !important;

        font-size:15px !important;
    }

    .pagina-blog .bn a:hover,.pagina-blog .bn .ativo{
        color:var(--primary) !important;
        background:#10243d !important;
        border-color:rgba(0,229,255,.45) !important;
    }

    .pagina-blog .bn .navcta{
        min-height:54px !important;

        justify-content:center !important;

        margin-top:3px !important;
        margin-left:0 !important;

        background:var(--primary) !important;

        border-color:var(--primary) !important;

        color:#03121a !important;

        font-size:15px !important;
    }

    body.pagina-blog.menu-aberto
    .menu-toggle
    span:nth-child(1){
        transform:
            translateY(8px)
            rotate(45deg);
    }

    body.pagina-blog.menu-aberto
    .menu-toggle
    span:nth-child(2){
        opacity:0;
    }

    body.pagina-blog.menu-aberto
    .menu-toggle
    span:nth-child(3){
        transform:
            translateY(-8px)
            rotate(-45deg);
    }
}


@media(max-width:480px){

    .pagina-blog .bti{
        min-height:74px !important;
    }

    .pagina-blog .brand{
        width:195px !important;
        height:50px !important;
        flex-basis:195px !important;
    }

    .pagina-blog .brand img{
        width:195px !important;
        height:50px !important;
    }

    .pagina-blog .brand .fc-marca-inline{height:50px;gap:8px}
    .pagina-blog .brand .fc-marca-inline svg{width:42px;height:42px;flex-basis:42px}
    .pagina-blog .brand .fc-marca-inline strong{font-size:24px}

    .pagina-blog .menu-toggle{
        width:50px !important;
        height:50px !important;
        flex-basis:50px !important;
    }
}


/* ===== ADMIN ===== */


.pagina-admin *{box-sizing:border-box}body.pagina-admin{margin:0;background:var(--bg);color:var(--text);font-family:Arial,sans-serif}.pagina-admin .admin-layout{min-height:100vh;display:grid;grid-template-columns:260px minmax(0,1fr)}.pagina-admin .admin-sidebar{position:sticky;top:0;height:100vh;padding:18px 14px;border-right:1px solid var(--border);background:#121428;overflow:auto}.pagina-admin .admin-logo{display:block;padding:12px 10px 20px;color:var(--primary);font-size:22px;font-weight:900;text-decoration:none}.pagina-admin .admin-logo small{display:block;margin-top:4px;color:var(--light);font-size:9px}.pagina-admin .admin-menu{display:grid;gap:7px}.pagina-admin .admin-menu a{min-height:44px;display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--light);font-size:12px;font-weight:800;text-decoration:none}.pagina-admin .admin-menu a:hover,.pagina-admin .admin-menu a.ativo{border-color:var(--primary);background:var(--hover);color:var(--primary)}.pagina-admin .admin-conteudo{min-width:0;padding:24px}.pagina-admin .admin-topo{display:flex;justify-content:space-between;gap:16px;margin-bottom:20px}.pagina-admin .admin-topo h1{margin:0;font-size:24px}.pagina-admin .admin-topo p{margin:6px 0 0;color:var(--light);font-size:11px}.pagina-admin .admin-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.pagina-admin .admin-card,.pagina-admin .admin-painel{min-width:0;padding:16px;border:1px solid var(--border);border-radius:11px;background:var(--card)}.pagina-admin .admin-card small{display:block;color:var(--light);font-size:9px;font-weight:800;text-transform:uppercase}.pagina-admin .admin-card strong{display:block;margin-top:8px;color:var(--primary);font-size:25px;font-weight:900}.pagina-admin .verde{color:var(--ok)!important}.pagina-admin .amarelo{color:var(--warn)!important}.pagina-admin .vermelho{color:var(--danger)!important}.pagina-admin .admin-grid-2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:14px}.pagina-admin .admin-painel-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}.pagina-admin .admin-painel-topo h2{margin:0;font-size:14px}.pagina-admin .admin-painel-topo span,.pagina-admin .admin-muted{color:var(--light);font-size:9px}.pagina-admin .admin-tabela-wrap{width:100%;overflow:auto}.pagina-admin .admin-tabela{width:100%;border-collapse:collapse;min-width:720px}.pagina-admin .admin-tabela th,.pagina-admin .admin-tabela td{padding:10px 9px;border-bottom:1px solid var(--border);text-align:left;font-size:10px;vertical-align:middle}.pagina-admin .admin-tabela th{color:var(--light);font-size:8px;text-transform:uppercase}.pagina-admin .admin-status{display:inline-flex;align-items:center;min-height:24px;padding:0 7px;border-radius:999px;border:1px solid var(--border);color:var(--light);font-size:8px;font-weight:900}.pagina-admin .admin-status.online,.pagina-admin .admin-status.ativa{border-color:rgba(0,255,179,.42);color:var(--ok);background:rgba(0,255,179,.06)}.pagina-admin .admin-status.teste,.pagina-admin .admin-status.pendente{border-color:rgba(255,200,87,.42);color:var(--warn);background:rgba(255,200,87,.06)}.pagina-admin .admin-status.cancelada,.pagina-admin .admin-status.vencida,.pagina-admin .admin-status.bloqueado{border-color:rgba(255,91,104,.42);color:var(--danger);background:rgba(255,91,104,.06)}.pagina-admin .admin-botao{min-height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 11px;border:1px solid var(--primary);border-radius:8px;background:rgba(0,229,255,.06);color:var(--primary);font-size:9px;font-weight:900;text-decoration:none;cursor:pointer}.pagina-admin .admin-botao.secundario{border-color:var(--border);background:transparent;color:var(--light)}.pagina-admin .admin-lista-online{display:grid;gap:8px}.pagina-admin .admin-online-item{display:grid;grid-template-columns:9px minmax(0,1fr);gap:9px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--card2)}.pagina-admin .admin-online-bolinha{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px rgba(0,255,179,.35)}.pagina-admin .admin-online-item strong,.pagina-admin .admin-online-item small{display:block}.pagina-admin .admin-online-item strong{font-size:10px}.pagina-admin .admin-online-item small{margin-top:3px;color:var(--light);font-size:8px}.pagina-admin .admin-filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px}.pagina-admin .admin-filtros input,.pagina-admin .admin-filtros select,.pagina-admin .admin-campo input,.pagina-admin .admin-campo select{min-height:40px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:var(--card2);color:var(--text)}.pagina-admin .admin-form{display:grid;gap:12px}.pagina-admin .admin-form-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pagina-admin .admin-campo label{display:block;margin-bottom:5px;color:var(--light);font-size:9px;font-weight:800}.pagina-admin .admin-campo input,.pagina-admin .admin-campo select{width:100%}.pagina-admin .admin-aviso{margin-bottom:14px;padding:11px;border:1px solid rgba(0,229,255,.28);border-radius:8px;background:rgba(0,229,255,.04);color:var(--light);font-size:10px}.pagina-admin .admin-aviso.erro{border-color:rgba(255,91,104,.35);color:#ff9ca5;background:rgba(255,91,104,.05)}
@media(max-width:1100px){.pagina-admin .admin-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.pagina-admin .admin-grid-2{grid-template-columns:1fr}}@media(max-width:760px){.pagina-admin .admin-layout{grid-template-columns:1fr}.pagina-admin .admin-sidebar{position:static;height:auto}.pagina-admin .admin-menu{grid-template-columns:repeat(2,minmax(0,1fr))}.pagina-admin .admin-conteudo{padding:14px}.pagina-admin .admin-topo{flex-direction:column}.pagina-admin .admin-form-grade{grid-template-columns:1fr}}@media(max-width:480px){.pagina-admin .admin-cards,.pagina-admin .admin-menu{grid-template-columns:1fr}}

.pagina-admin .admin-grid-imagens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.pagina-admin .admin-imagens-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pagina-admin .admin-imagem-item{min-width:0;padding:10px;border:1px solid var(--border);border-radius:9px;background:var(--card2)}
.pagina-admin .admin-imagem-preview{height:84px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;padding:8px;border:1px solid rgba(255,255,255,.04);border-radius:7px;background:#0d1020}
.pagina-admin .admin-imagem-preview img{display:block;max-width:100%;max-height:64px;width:auto;height:auto;object-fit:contain}
.pagina-admin .admin-imagem-dados{min-width:0;margin-bottom:8px}
.pagina-admin .admin-imagem-dados strong,.pagina-admin .admin-imagem-dados small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pagina-admin .admin-imagem-dados strong{font-size:10px}
.pagina-admin .admin-imagem-dados small{margin-top:4px;color:var(--light);font-size:8px}
.pagina-admin .admin-contador-imagens{min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:999px;color:var(--primary);font-size:10px}
.pagina-admin .admin-check{display:flex;align-items:flex-start;gap:8px;color:var(--light);font-size:9px;line-height:1.45}
.pagina-admin .admin-check input{margin-top:1px}
.pagina-admin .admin-botao-perigo{border-color:rgba(255,91,104,.55);background:rgba(255,91,104,.06);color:var(--danger)}
.pagina-admin .admin-botao-perigo:hover{background:rgba(255,91,104,.12);border-color:var(--danger)}
.pagina-admin .admin-botao-perigo:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:1000px){.pagina-admin .admin-grid-imagens{grid-template-columns:1fr}}
@media(max-width:560px){.pagina-admin .admin-imagens-grade{grid-template-columns:1fr}}

.pagina-admin .admin-campo textarea{width:100%;min-height:105px;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--card2);color:var(--text);font-family:Arial,sans-serif;line-height:1.5;resize:vertical}
.pagina-admin .admin-editor-conteudo{min-height:430px!important;font-family:Consolas,monospace!important;font-size:12px!important}
.pagina-admin .admin-ajuda{display:block;margin-top:5px;color:var(--light);font-size:8px;line-height:1.45}
.pagina-admin .admin-acoes-linha,.pagina-admin .admin-acoes-rodape{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.pagina-admin .admin-acoes-rodape{padding:4px 0 24px}


/* ===== CAIXA ===== */



.pagina-caixa-app *{
    box-sizing: border-box;
}

body.pagina-caixa-app{
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, sans-serif;
}

.pagina-caixa-app a{
    color: inherit;
}

.pagina-caixa-app .topo-caixa{
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 18px;
    background: #121428;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.pagina-caixa-app .topo-caixa-marca{
    color: var(--primary);
    font-size: 22px;
    font-weight: 900;
}

.pagina-caixa-app .topo-caixa-nav{
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.pagina-caixa-app .topo-caixa-nav a{
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.pagina-caixa-app .topo-caixa-nav a:hover{
    border-color: var(--primary);
    color: var(--primary);
}

.pagina-caixa-app .topo-caixa-usuario{
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
}

.pagina-caixa-app .pagina-caixa{
    width: min(1240px, calc(100% - 28px));
    margin: 24px auto;
}

.pagina-caixa-app .pagina-caixa h1{
    margin: 0 0 6px;
}

.pagina-caixa-app .descricao-pagina{
    margin: 0 0 20px;
    color: var(--muted);
}

.pagina-caixa-app .card-caixa{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
}

.pagina-caixa-app .grid-2{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pagina-caixa-app .grid-3{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.pagina-caixa-app .campo{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pagina-caixa-app .campo label{
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.pagina-caixa-app .campo input,.pagina-caixa-app .campo select{
    min-height: 46px;
    padding: 0 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
}

.pagina-caixa-app .botao{
    min-height: 44px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--primary);
    background: rgba(0,229,255,.07);
    color: var(--primary);
    font-weight: 800;
    cursor: pointer;
}

.pagina-caixa-app .botao-danger{
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(255,91,103,.06);
}

.pagina-caixa-app .botao-success{
    border-color: var(--success);
    color: var(--success);
    background: rgba(0,255,179,.06);
}

.pagina-caixa-app .botao-warning{
    border-color: var(--warning);
    color: var(--warning);
    background: rgba(255,200,87,.06);
}

.pagina-caixa-app .mensagem{
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.pagina-caixa-app .mensagem.ok{
    border-color: rgba(0,255,179,.45);
    color: var(--success);
}

.pagina-caixa-app .mensagem.erro{
    border-color: rgba(255,91,103,.45);
    color: var(--danger);
}

.pagina-caixa-app .tabela{
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.pagina-caixa-app .tabela th,.pagina-caixa-app .tabela td{
    padding: 11px 9px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 12px;
}

.pagina-caixa-app .tabela th{
    color: var(--muted);
}

.pagina-caixa-app .login-caixa{
    width: min(430px, calc(100% - 28px));
    margin: 90px auto;
}

.pagina-caixa-app .login-caixa .card-caixa{
    padding: 24px;
}

.pagina-caixa-app .venda-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 14px;
    min-height: calc(100vh - 120px);
}

.pagina-caixa-app .venda-produtos{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(120px, auto);
    gap: 12px;
}

.pagina-caixa-app .botao-produto{
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card2);
    color: var(--text);
    cursor: pointer;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
}

.pagina-caixa-app .botao-produto strong{
    font-size: 18px;
}

.pagina-caixa-app .botao-produto span{
    color: var(--success);
    font-size: 22px;
    font-weight: 900;
}

.pagina-caixa-app .botao-produto:hover{
    border-color: var(--primary);
}

.pagina-caixa-app .venda-resumo{
    position: sticky;
    top: 80px;
    height: fit-content;
}

.pagina-caixa-app .venda-itens{
    min-height: 220px;
    max-height: 340px;
    overflow-y: auto;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.pagina-caixa-app .item-venda{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.pagina-caixa-app .item-venda small{
    display: block;
    color: var(--muted);
    margin-top: 3px;
}

.pagina-caixa-app .total-venda{
    margin-top: 12px;
    padding: 18px;
    border-radius: 12px;
    background: #0c1220;
    border: 1px solid var(--primary);
    text-align: center;
}

.pagina-caixa-app .total-venda small{
    display: block;
    color: var(--muted);
    margin-bottom: 6px;
}

.pagina-caixa-app .total-venda strong{
    display: block;
    color: var(--success);
    font-size: 36px;
}

.pagina-caixa-app .pagamentos-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.pagina-caixa-app .botao-pagamento{
    min-height: 58px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card2);
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
}

.pagina-caixa-app .botao-pagamento.ativo{
    border-color: var(--primary);
    color: var(--primary);
}

.pagina-caixa-app .acoes-venda{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.pagina-caixa-app .acoes-venda .botao{
    min-height: 58px;
}

.pagina-caixa-app .troco-box{
    margin-top: 10px;
    display: none;
}

.pagina-caixa-app .troco-box.ativo{
    display: block;
}

.pagina-caixa-app .troco-resultado{
    margin-top: 8px;
    color: var(--warning);
    font-weight: 800;
}

.pagina-caixa-app .layout-editor{
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 14px;
}

.pagina-caixa-app .layout-preview{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
}

.pagina-caixa-app .layout-slot{
    min-height: 120px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 12px;
    background: var(--card2);
}

.pagina-caixa-app .caixa-status{
    font-size: 28px;
    font-weight: 900;
}

.pagina-caixa-app .caixa-status.aberto{
    color: var(--success);
}

.pagina-caixa-app .caixa-status.fechado{
    color: var(--danger);
}

@media (max-width: 900px) {
    .pagina-caixa-app .topo-caixa{
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .pagina-caixa-app .topo-caixa-usuario{
        width: 100%;
        margin-left: 0;
    }

    .pagina-caixa-app .venda-layout{
        grid-template-columns: 1fr;
    }

    .pagina-caixa-app .venda-resumo{
        position: static;
    }

    .pagina-caixa-app .layout-editor{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .pagina-caixa-app .pagina-caixa{
        width: min(100% - 14px, 1240px);
        margin: 10px auto 90px;
    }

    .pagina-caixa-app .topo-caixa{
        padding: 8px;
    }

    .pagina-caixa-app .topo-caixa-nav{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .pagina-caixa-app .topo-caixa-nav a{
        min-height: 46px;
        justify-content: center;
        font-size: 13px;
    }

    .pagina-caixa-app .grid-2,.pagina-caixa-app .grid-3{
        grid-template-columns: 1fr;
    }

    .pagina-caixa-app .venda-produtos{
        grid-template-columns: repeat(2, minmax(0,1fr));
        grid-auto-rows: minmax(125px, auto);
    }

    .pagina-caixa-app .botao-produto{
        min-height: 125px;
        padding: 14px;
    }

    .pagina-caixa-app .botao-produto strong{
        font-size: 17px;
    }

    .pagina-caixa-app .botao-produto span{
        font-size: 23px;
    }

    .pagina-caixa-app .pagamentos-grid{
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .pagina-caixa-app .botao-pagamento{
        min-height: 68px;
        font-size: 16px;
    }

    .pagina-caixa-app .acoes-venda{
        grid-template-columns: 1fr;
    }

    .pagina-caixa-app .acoes-venda .botao{
        min-height: 64px;
        font-size: 16px;
    }

    .pagina-caixa-app .total-venda{
        position: sticky;
        bottom: 0;
        z-index: 20;
    }

    .pagina-caixa-app .total-venda strong{
        font-size: 42px;
    }

    .pagina-caixa-app .layout-preview{
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}


/* =========================================================
   MENU COMPACTO DA TELA DE VENDA
========================================================= */

.pagina-caixa-app .topo-caixa-barra{
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
}

.pagina-caixa-app .topo-caixa-venda{
    min-height: 52px;

    display: block;

    padding: 7px 12px;

    background:
        rgba(18,20,40,.98);

    backdrop-filter:
        blur(8px);
}

.pagina-caixa-app .topo-caixa-venda .topo-caixa-barra{
    width: 100%;
}

.pagina-caixa-app .topo-caixa-usuario-venda{
    margin-left: auto;

    max-width: 210px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pagina-caixa-app .botao-menu-caixa{
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 12px;

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

    border-radius: 8px;

    background:
        var(--card);

    color:
        var(--primary);

    font-family: inherit;
    font-size: 15px;
    font-weight: 900;

    cursor: pointer;
}

.pagina-caixa-app .botao-menu-caixa span{
    font-size: 11px;
}

.pagina-caixa-app .topo-caixa-nav-venda{
    display: none;

    width: 100%;

    margin-top: 7px;
    padding-top: 7px;

    border-top:
        1px solid
        var(--border);
}

.pagina-caixa-app .topo-caixa-nav-venda.aberto{
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap: 7px;
}

.pagina-caixa-app .topo-caixa-nav-venda a{
    min-height: 42px;

    justify-content: center;

    background:
        var(--card);
}

.pagina-caixa-app .pagina-caixa-venda{
    margin-top: 12px;
}


/* =========================================================
   MOBILE - VENDA MAIS PARECIDA COM PDV
========================================================= */

@media(max-width:620px) {

    .pagina-caixa-app .topo-caixa-venda{
        min-height: 48px;

        padding: 6px 8px;
    }

    .pagina-caixa-app .topo-caixa-venda .topo-caixa-marca{
        font-size: 18px;
    }

    .pagina-caixa-app .topo-caixa-usuario-venda{
        max-width: 120px;

        font-size: 11px;
    }

    .pagina-caixa-app .botao-menu-caixa{
        min-height: 38px;

        padding: 0 10px;
    }

    .pagina-caixa-app .botao-menu-caixa span{
        display: none;
    }

    .pagina-caixa-app .topo-caixa-nav-venda.aberto{
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .pagina-caixa-app .topo-caixa-nav-venda a{
        min-height: 48px;

        font-size: 13px;
    }

    .pagina-caixa-app .pagina-caixa-venda{
        width:
            calc(100% - 8px);

        margin:
            6px auto 90px;
    }

    .pagina-caixa-app .pagina-caixa-venda > h1{
        margin-bottom: 8px;

        font-size: 21px;
    }

    .pagina-caixa-app .pagina-caixa-venda .card-caixa{
        padding: 10px;
    }

    .pagina-caixa-app .pagina-caixa-venda .venda-produtos{
        gap: 8px;
    }
}


/* =========================================================
   V1.5 - REMOVER ITEM / CANCELAR VENDA COM SEGURANÇA
========================================================= */

.pagina-caixa-app .item-venda{
    padding: 0;
}

.pagina-caixa-app .item-venda-remover{
    width: 100%;
    min-height: 58px;

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;

    padding: 10px 12px;

    border: 0;
    background: transparent;

    color: var(--text);
    text-align: left;

    font-family: inherit;

    cursor: pointer;
}

.pagina-caixa-app .item-venda-remover:hover{
    background:
        rgba(255,91,103,.06);
}

.pagina-caixa-app .item-venda-direita{
    text-align: right;
}

.pagina-caixa-app .item-venda-direita strong{
    display: block;
}

.pagina-caixa-app .item-venda-direita span{
    display: block;

    margin-top: 4px;

    color: var(--danger);

    font-size: 8px;
    font-weight: 900;
}

.pagina-caixa-app .modal-cancelar-venda{
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 16px;

    background:
        rgba(5,7,15,.80);

    backdrop-filter:
        blur(4px);
}

.pagina-caixa-app .modal-cancelar-venda.aberto{
    display: flex;
}

.pagina-caixa-app .modal-cancelar-venda-card{
    width:
        min(
            460px,
            100%
        );

    padding: 22px;

    background:
        var(--card);

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

    border-radius: 13px;

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.50);
}

.pagina-caixa-app .modal-cancelar-venda-card h3{
    margin:
        0 0 8px;

    color:
        var(--danger);

    font-size: 20px;
}

.pagina-caixa-app .modal-cancelar-venda-card p{
    margin:
        0 0 16px;

    color:
        var(--muted);

    line-height: 1.5;

    font-size: 13px;
}

.pagina-caixa-app .modal-cancelar-venda-card p strong{
    color:
        var(--text);
}

.pagina-caixa-app .modal-cancelar-venda-acoes{
    display: grid;
    grid-template-columns:
        1fr 1fr;

    gap: 9px;

    margin-top: 14px;
}

@media(max-width:620px) {

    .pagina-caixa-app .item-venda-remover{
        min-height: 66px;
    }

    .pagina-caixa-app .item-venda-direita span{
        font-size: 9px;
    }

    .pagina-caixa-app .modal-cancelar-venda-card{
        padding: 18px;
    }

    .pagina-caixa-app .modal-cancelar-venda-card h3{
        font-size: 22px;
    }

    .pagina-caixa-app .modal-cancelar-venda-card p{
        font-size: 14px;
    }

    .pagina-caixa-app .modal-cancelar-venda-card input{
        min-height: 54px;
        font-size: 16px;
    }

    .pagina-caixa-app .modal-cancelar-venda-acoes{
        grid-template-columns:
            1fr;
    }

    .pagina-caixa-app .modal-cancelar-venda-acoes .botao{
        min-height: 56px;
        font-size: 14px;
    }
}


/* =========================================================
   V1.8 - MENU DA VENDA REALMENTE RECOLHIDO
========================================================= */

.pagina-caixa-app .topo-caixa-venda .topo-caixa-nav-venda[hidden]{
    display: none !important;
}

.pagina-caixa-app .topo-caixa-venda .topo-caixa-nav-venda:not([hidden]){
    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0,1fr));
    gap: 7px;
}

@media(max-width:620px) {

    .pagina-caixa-app .topo-caixa-venda .topo-caixa-nav-venda[hidden]{
        display: none !important;
    }

    .pagina-caixa-app .topo-caixa-venda .topo-caixa-nav-venda:not([hidden]){
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }
}



/* =========================================================
   CAMADA DE PADRONIZAÇÃO VISUAL
   Mantém layouts existentes, mas aproxima todas as áreas
   da identidade do Blog.
========================================================= */

/* Painéis e cards da área principal */
.fin-app .card,
.fin-app .card-dashboard,
.fin-app .painel-dashboard,
.fin-app .cartao-formulario,
.fin-app .cadastro-formulario,
.fin-app .lista-categorias {
    border-color: var(--fc-border);
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* Menus da área logada: mesma leitura do topo do Blog */
.fin-app .sidebar-fincontrole {
    background:
        linear-gradient(180deg, rgba(8,18,37,.985), rgba(5,12,26,.985));
    border-right-color: var(--fc-border);
}

.fin-app .menu-fincontrole a {
    background: linear-gradient(180deg, rgba(16,28,51,.92), rgba(12,22,41,.94));
    border-color: var(--fc-border);
}

.fin-app .menu-fincontrole a:hover,
.fin-app .menu-fincontrole a.menu-item-ativo {
    background: rgba(0,229,255,.055);
    border-color: rgba(0,229,255,.55);
    box-shadow: inset 3px 0 0 var(--fc-primary);
}

/* Inputs padronizados */
.fin-app input,
.fin-app select,
.fin-app textarea,
.pagina-admin input,
.pagina-admin select,
.pagina-admin textarea,
.pagina-caixa-app input,
.pagina-caixa-app select,
.pagina-caixa-app textarea {
    border-color: var(--fc-border);
}

/* Blog: mantém exatamente a linguagem visual escolhida */
.pagina-blog .card,
.pagina-blog .hero-grid,
.pagina-blog .cta-final,
.pagina-blog .art-img,
.pagina-blog .cta {
    box-shadow: var(--fc-shadow-cyan);
}

/* Admin */
.pagina-admin .admin-sidebar {
    background: linear-gradient(180deg, rgba(8,18,37,.99), rgba(5,12,26,.99));
    border-right-color: var(--fc-border);
}

.pagina-admin .admin-card,
.pagina-admin .admin-painel,
.pagina-admin .admin-online-item {
    background: linear-gradient(180deg, var(--fc-card-2), var(--fc-card));
    border-color: var(--fc-border);
}

/* Caixa */
.pagina-caixa-app .topo-caixa {
    background: rgba(4,10,22,.96);
    border-bottom-color: var(--fc-border);
    backdrop-filter: blur(14px);
}

.pagina-caixa-app .card-caixa,
.pagina-caixa-app .botao-produto {
    background: linear-gradient(180deg, var(--fc-card-2), var(--fc-card));
    border-color: var(--fc-border);
}


/* =========================================================
   FINCONTROLE — REFINAMENTO VISUAL V2
   Padronização progressiva sem alteração de lógica.
========================================================= */

/* ---------- superfícies ---------- */
.fin-app .card-dashboard,
.fin-app .painel-dashboard,
.fin-app .card,
.fin-app .box,
.fin-app .cartao-item,
.fin-app .conta-item,
.pagina-admin .admin-card,
.pagina-admin .admin-painel,
.pagina-caixa-app .card-caixa,
.pagina-blog .card {
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius);
}

/* ---------- títulos ---------- */
.fin-app h1,
.fin-app h2,
.fin-app h3,
.pagina-blog h1,
.pagina-blog h2,
.pagina-blog h3,
.pagina-admin h1,
.pagina-admin h2,
.pagina-admin h3,
.pagina-caixa-app h1,
.pagina-caixa-app h2,
.pagina-caixa-app h3 {
    letter-spacing: -.015em;
}

/* ---------- botões e links de ação ---------- */
.fin-app button,
.fin-app .botao,
.fin-app .btn,
.fin-app .link-dashboard,
.pagina-admin button,
.pagina-admin .btn,
.pagina-caixa-app button,
.pagina-caixa-app .btn {
    border-radius: var(--fc-radius-sm);
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.fin-app button:hover,
.fin-app .botao:hover,
.fin-app .btn:hover,
.pagina-admin button:hover,
.pagina-admin .btn:hover,
.pagina-caixa-app button:hover,
.pagina-caixa-app .btn:hover {
    border-color: rgba(0,229,255,.55);
}

/* ---------- formulários ---------- */
.fin-app input,
.fin-app select,
.fin-app textarea,
.pagina-admin input,
.pagina-admin select,
.pagina-admin textarea,
.pagina-caixa-app input,
.pagina-caixa-app select,
.pagina-caixa-app textarea {
    background-color: rgba(7, 19, 38, .82);
    color: var(--fc-text);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-sm);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.fin-app input:focus,
.fin-app select:focus,
.fin-app textarea:focus,
.pagina-admin input:focus,
.pagina-admin select:focus,
.pagina-admin textarea:focus,
.pagina-caixa-app input:focus,
.pagina-caixa-app select:focus,
.pagina-caixa-app textarea:focus {
    border-color: rgba(0,229,255,.72);
    box-shadow: 0 0 0 3px rgba(0,229,255,.07);
}

/* ---------- tabelas ---------- */
.fin-app table,
.pagina-admin table,
.pagina-caixa-app table {
    border-color: var(--fc-border);
}

.fin-app th,
.pagina-admin th,
.pagina-caixa-app th {
    background: rgba(16,28,51,.94);
    color: var(--fc-text);
}

.fin-app td,
.fin-app th,
.pagina-admin td,
.pagina-admin th,
.pagina-caixa-app td,
.pagina-caixa-app th {
    border-color: var(--fc-border-soft);
}

/* ---------- dashboard: indicadores mais uniformes ---------- */
.fin-app .cards-dashboard {
    gap: 12px;
}

.fin-app .card-dashboard {
    background:
        linear-gradient(180deg, rgba(16,28,51,.96), rgba(10,20,38,.96));
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

.fin-app .card-dashboard-titulo {
    color: var(--fc-text-light);
}

body.fin-app.pagina-dashboard .card-dashboard-titulo{
    justify-content:space-between;
    gap:8px;
}

body.fin-app.pagina-dashboard .indicador-ajuda-botao{
    display:inline-flex;
    flex:0 0 21px;
    align-items:center;
    justify-content:center;
    width:21px;
    height:21px;
    min-width:21px;
    min-height:21px;
    margin:-4px -4px 0 0;
    padding:0;
    border:1px solid rgba(0,229,255,.55);
    border-radius:50%;
    background:rgba(0,229,255,.08);
    color:var(--primary);
    font:800 12px/1 Arial,sans-serif;
    text-transform:none;
    cursor:pointer;
    transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}

body.fin-app.pagina-dashboard .indicador-ajuda-botao:hover,
body.fin-app.pagina-dashboard .indicador-ajuda-botao:focus-visible{
    border-color:var(--primary);
    background:rgba(0,229,255,.18);
    outline:none;
    transform:translateY(-1px);
}

#modalGlobalFinControle.modal-indicador-ajuda
.modal-confirmacao-fincontrole-icone{
    border-color:rgba(0,229,255,.55);
    background:rgba(0,229,255,.08);
    color:var(--primary);
}

#modalGlobalFinControle.modal-indicador-ajuda
.modal-confirmacao-perigo{
    border-color:var(--primary);
    color:var(--primary);
}

.fin-app .card-dashboard-valor {
    letter-spacing: -.025em;
}

/* ---------- cabeçalhos dos painéis ---------- */
.fin-app .painel-dashboard-cabecalho {
    border-bottom-color: var(--fc-border-soft);
}

/* ---------- menu lateral ---------- */
.fin-app .logo-fincontrole {
    border-bottom-color: var(--fc-border-soft);
}

.fin-app .usuario-logado {
    border-color: var(--fc-border);
    background: rgba(12,22,41,.72);
}

/* ---------- Blog ---------- */
.pagina-blog .card,
.pagina-blog .art,
.pagina-blog .hero-grid {
    border-color: var(--fc-border);
}

.pagina-blog a:focus-visible {
    border-radius: 6px;
}

/* ---------- Admin ---------- */
.pagina-admin .admin-sidebar a:hover,
.pagina-admin .admin-sidebar a.ativo {
    border-color: rgba(0,229,255,.48);
}

/* ---------- mobile ---------- */
@media (max-width: 900px) {
    .fin-app .cards-dashboard {
        gap: 10px;
    }

    .fin-app .card-dashboard {
        border-radius: 10px;
    }

    body.fin-app.pagina-dashboard .indicador-ajuda-botao{
        flex-basis:19px;
        width:19px;
        height:19px;
        min-width:19px;
        min-height:19px;
        margin:-4px -3px 0 0;
        font-size:11px;
    }

    .fin-app input,
    .fin-app select,
    .fin-app textarea,
    .pagina-admin input,
    .pagina-admin select,
    .pagina-admin textarea,
    .pagina-caixa-app input,
    .pagina-caixa-app select,
    .pagina-caixa-app textarea {
        font-size: 16px;
    }
}


/* =========================================================
   INDEX — ESTILOS ESPECÍFICOS
   CSS antes inline em index.php
   Agora isolado por classe específica da página.
========================================================= */

/* --- bloco 1 originalmente inline em index.php --- */


        /* =====================================================
           HOME PÚBLICA - FINCONTROLE
        ====================================================== */

        html:has(body.fin-app.pagina-index){
            scroll-behavior: smooth;
        }

        body.fin-app.pagina-index.pagina-home{
            margin: 0;
            overflow-x: hidden;
        }

        body.fin-app.pagina-index .home-container{
            width: min(1180px, calc(100% - 32px));
            margin: 0 auto;
        }


        /* =====================================================
           TOPO
        ====================================================== */

        body.fin-app.pagina-index .home-topo{
            position: sticky;
            top: 0;
            z-index: 100;

            background:
                rgba(15, 17, 32, .92);

            backdrop-filter:
                blur(12px);

            border-bottom:
                1px solid rgba(53, 57, 92, .75);
        }

        body.fin-app.pagina-index .home-topo-interno{
            min-height: 72px;

            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
        }

        body.fin-app.pagina-index .home-logo{
            color: var(--primary);
            text-decoration: none;

            font-size: 24px;
            font-weight: 900;
            letter-spacing: .5px;
        }

        body.fin-app.pagina-index .home-topo-acoes{
            display: flex;
            align-items: center;
            gap: 8px;
        }

        body.fin-app.pagina-index .home-botao{
            min-height: 42px;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 0 17px;

            border: 1px solid var(--border);
            border-radius: 9px;

            background: transparent;
            color: var(--text-light);

            text-decoration: none;

            font-size: 11px;
            font-weight: 800;

            transition:
                background .2s ease,
                border-color .2s ease,
                transform .2s ease;
        }

        body.fin-app.pagina-index .home-botao:hover{
            background: var(--bg-hover);
            transform: translateY(-1px);
        }

        body.fin-app.pagina-index .home-botao.principal{
            border-color: var(--primary);
            color: var(--primary);

            background:
                rgba(0, 229, 255, .05);
        }


        /* =====================================================
           HERO
        ====================================================== */

        body.fin-app.pagina-index .home-hero{
            position: relative;

            padding:
                88px 0 68px;

            overflow: hidden;
        }

        body.fin-app.pagina-index .home-hero::before{
            content: "";

            position: absolute;

            width: 520px;
            height: 520px;

            top: -260px;
            right: -120px;

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    rgba(0, 229, 255, .12),
                    transparent 70%
                );

            pointer-events: none;
        }

        body.fin-app.pagina-index .home-hero-grid{
            position: relative;
            z-index: 1;

            display: grid;
            grid-template-columns:
                minmax(0, 1fr)
                minmax(420px, .9fr);

            gap: 54px;
            align-items: center;
        }

        body.fin-app.pagina-index .home-etiqueta{
            display: inline-flex;
            align-items: center;
            gap: 7px;

            margin-bottom: 18px;

            padding: 6px 9px;

            border:
                1px solid
                rgba(0, 229, 255, .35);

            border-radius: 999px;

            background:
                rgba(0, 229, 255, .05);

            color: var(--primary);

            font-size: 9px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .5px;
        }

        body.fin-app.pagina-index .home-hero h1{
            margin: 0;

            color: var(--text);

            font-size:
                clamp(40px, 5vw, 68px);

            line-height: 1.02;
            letter-spacing: -2px;
        }

        body.fin-app.pagina-index .home-hero h1 span{
            color: var(--primary);
        }

        body.fin-app.pagina-index .home-hero-texto{
            max-width: 650px;

            margin:
                22px 0 0;

            color: var(--text-light);

            font-size:
                clamp(15px, 1.7vw, 19px);

            line-height: 1.6;
        }

        body.fin-app.pagina-index .home-hero-acoes{
            display: flex;
            flex-wrap: wrap;
            gap: 10px;

            margin-top: 30px;
        }

        body.fin-app.pagina-index .home-hero-acoes .home-botao{
            min-height: 48px;
            padding: 0 22px;
        }

        body.fin-app.pagina-index .home-microtexto{
            margin-top: 14px;

            color:
                rgba(191, 198, 255, .72);

            font-size: 9px;
        }


        /* =====================================================
           PREVIEW DASHBOARD
        ====================================================== */

        body.fin-app.pagina-index .home-preview{
            position: relative;

            padding: 18px;

            border:
                1px solid
                rgba(0, 229, 255, .28);

            border-radius: 18px;

            background:
                linear-gradient(
                    145deg,
                    rgba(26, 29, 51, .97),
                    rgba(15, 17, 32, .97)
                );

            box-shadow:
                0 24px 80px
                rgba(0, 0, 0, .28);
        }

        body.fin-app.pagina-index .home-preview-topo{
            display: flex;
            align-items: center;
            justify-content: space-between;

            margin-bottom: 14px;
        }

        body.fin-app.pagina-index .home-preview-topo strong{
            color: var(--text);
            font-size: 12px;
        }

        body.fin-app.pagina-index .home-preview-demo{
            padding: 4px 7px;

            border:
                1px solid
                rgba(0, 229, 255, .38);

            border-radius: 999px;

            color: var(--primary);

            font-size: 7px;
            font-weight: 800;
        }

        body.fin-app.pagina-index .home-preview-indicadores{
            display: grid;
            grid-template-columns:
                repeat(2, minmax(0, 1fr));

            gap: 10px;
        }

        body.fin-app.pagina-index .home-preview-card{
            min-width: 0;
            min-height: 116px;

            padding: 15px;

            border: 1px solid var(--border);
            border-radius: 11px;

            background:
                rgba(26, 29, 51, .72);
        }

        body.fin-app.pagina-index .home-preview-card span{
            display: block;

            color: var(--text-light);

            font-size: 8px;
            font-weight: 800;
            text-transform: uppercase;
        }

        body.fin-app.pagina-index .home-preview-card strong{
            display: block;

            margin-top: 15px;

            font-size: 22px;
        }

        body.fin-app.pagina-index .home-preview-card small{
            display: block;

            margin-top: 14px;

            color:
                rgba(191, 198, 255, .72);

            font-size: 8px;
        }

        body.fin-app.pagina-index .home-valor-verde{
            color: var(--success);
        }

        body.fin-app.pagina-index .home-valor-vermelho{
            color: #ff5d67;
        }

        body.fin-app.pagina-index .home-valor-ciano{
            color: var(--primary);
        }

        body.fin-app.pagina-index .home-preview-grafico{
            height: 110px;

            margin-top: 10px;
            padding: 15px;

            display: flex;
            align-items: flex-end;
            gap: 8px;

            border: 1px solid var(--border);
            border-radius: 11px;

            background:
                rgba(26, 29, 51, .72);
        }

        body.fin-app.pagina-index .home-preview-grafico i{
            flex: 1;

            min-width: 8px;

            border-radius:
                4px 4px 1px 1px;

            background:
                linear-gradient(
                    to top,
                    rgba(0, 229, 255, .25),
                    rgba(0, 229, 255, .95)
                );
        }


        /* =====================================================
           SEÇÕES
        ====================================================== */

        body.fin-app.pagina-index .home-secao{
            padding: 72px 0;
        }

        body.fin-app.pagina-index .home-secao-titulo{
            max-width: 720px;
            margin-bottom: 30px;
        }

        body.fin-app.pagina-index .home-secao-titulo span{
            color: var(--primary);

            font-size: 9px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .5px;
        }

        body.fin-app.pagina-index .home-secao-titulo h2{
            margin:
                8px 0 10px;

            color: var(--text);

            font-size:
                clamp(27px, 3.5vw, 40px);

            line-height: 1.12;
        }

        body.fin-app.pagina-index .home-secao-titulo p{
            margin: 0;

            color: var(--text-light);

            font-size: 13px;
            line-height: 1.6;
        }


        /* =====================================================
           RECURSOS
        ====================================================== */

        body.fin-app.pagina-index .home-recursos{
            display: grid;
            grid-template-columns:
                repeat(3, minmax(0, 1fr));

            gap: 13px;
        }

        body.fin-app.pagina-index .home-recurso{
            min-height: 205px;

            padding: 22px;

            border: 1px solid var(--border);
            border-radius: 13px;

            background: var(--bg-card);

            transition:
                transform .2s ease,
                border-color .2s ease;
        }

        body.fin-app.pagina-index .home-recurso:hover{
            transform: translateY(-3px);
            border-color:
                rgba(0, 229, 255, .48);
        }

        body.fin-app.pagina-index .home-recurso-icone{
            width: 42px;
            height: 42px;

            display: flex;
            align-items: center;
            justify-content: center;

            margin-bottom: 18px;

            border:
                1px solid
                rgba(0, 229, 255, .35);

            border-radius: 10px;

            background:
                rgba(0, 229, 255, .05);

            color: var(--primary);
        }

        body.fin-app.pagina-index .home-recurso-icone svg{
            width: 22px;
            height: 22px;

            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
        }

        body.fin-app.pagina-index .home-recurso h3{
            margin: 0 0 9px;

            color: var(--text);

            font-size: 15px;
        }

        body.fin-app.pagina-index .home-recurso p{
            margin: 0;

            color: var(--text-light);

            font-size: 11px;
            line-height: 1.55;
        }


        /* =====================================================
           VISÃO FINANCEIRA
        ====================================================== */

        body.fin-app.pagina-index .home-visao{
            display: grid;
            grid-template-columns:
                .82fr 1.18fr;

            gap: 26px;
            align-items: stretch;
        }

        body.fin-app.pagina-index .home-visao-texto,
body.fin-app.pagina-index .home-visao-painel{
            padding: 28px;

            border: 1px solid var(--border);
            border-radius: 14px;

            background: var(--bg-card);
        }

        body.fin-app.pagina-index .home-visao-texto h3{
            margin: 0;

            color: var(--text);

            font-size: 24px;
        }

        body.fin-app.pagina-index .home-visao-texto p{
            color: var(--text-light);

            font-size: 12px;
            line-height: 1.65;
        }

        body.fin-app.pagina-index .home-checks{
            display: grid;
            gap: 9px;

            margin-top: 20px;
        }

        body.fin-app.pagina-index .home-check{
            display: flex;
            align-items: center;
            gap: 9px;

            color: var(--text-light);

            font-size: 11px;
        }

        body.fin-app.pagina-index .home-check b{
            width: 22px;
            height: 22px;

            display: flex;
            align-items: center;
            justify-content: center;

            flex: 0 0 auto;

            border-radius: 50%;

            background:
                rgba(0, 255, 179, .08);

            color: var(--success);
        }

        body.fin-app.pagina-index .home-visao-painel{
            display: grid;
            grid-template-columns:
                repeat(4, minmax(0, 1fr));

            gap: 9px;
        }

        body.fin-app.pagina-index .home-mini-indicador{
            min-width: 0;
            min-height: 128px;

            padding: 14px;

            border: 1px solid var(--border);
            border-radius: 10px;

            background:
                rgba(15, 17, 32, .44);
        }

        body.fin-app.pagina-index .home-mini-indicador span{
            display: block;

            min-height: 28px;

            color: var(--text-light);

            font-size: 8px;
            font-weight: 800;
            text-transform: uppercase;
        }

        body.fin-app.pagina-index .home-mini-indicador strong{
            display: block;

            margin-top: 12px;

            font-size: 17px;
        }


        /* =====================================================
           CELULAR / ETAPAS
        ====================================================== */

        body.fin-app.pagina-index .home-mobile-grid{
            display: grid;
            grid-template-columns:
                minmax(280px, .72fr)
                minmax(0, 1fr);

            gap: 38px;
            align-items: center;
        }

        body.fin-app.pagina-index .home-celular{
            width: min(320px, 100%);

            margin: 0 auto;

            padding: 11px;

            border:
                1px solid
                rgba(0, 229, 255, .45);

            border-radius: 28px;

            background: #080a13;

            box-shadow:
                0 25px 70px
                rgba(0, 0, 0, .35);
        }

        body.fin-app.pagina-index .home-celular-tela{
            min-height: 520px;

            padding: 18px 14px;

            border-radius: 20px;

            background: var(--bg-main);
        }

        body.fin-app.pagina-index .home-celular-tela h4{
            margin: 0 0 18px;

            color: var(--text);

            font-size: 20px;
        }

        body.fin-app.pagina-index .home-celular-cards{
            display: grid;
            grid-template-columns:
                repeat(2, minmax(0, 1fr));

            gap: 8px;
        }

        body.fin-app.pagina-index .home-celular-card{
            min-height: 112px;

            padding: 11px;

            border: 1px solid var(--border);
            border-radius: 10px;

            background: var(--bg-card);
        }

        body.fin-app.pagina-index .home-celular-card small{
            display: block;

            color: var(--text-light);

            font-size: 7px;
            text-transform: uppercase;
        }

        body.fin-app.pagina-index .home-celular-card strong{
            display: block;

            margin-top: 20px;

            font-size: 15px;
        }

        body.fin-app.pagina-index .home-etapas{
            display: grid;
            gap: 10px;
        }

        body.fin-app.pagina-index .home-etapa{
            display: grid;
            grid-template-columns:
                42px minmax(0, 1fr);

            gap: 12px;
            align-items: start;

            padding: 16px;

            border: 1px solid var(--border);
            border-radius: 10px;

            background: var(--bg-card);
        }

        body.fin-app.pagina-index .home-etapa-numero{
            width: 38px;
            height: 38px;

            display: flex;
            align-items: center;
            justify-content: center;

            border:
                1px solid
                rgba(0, 229, 255, .42);

            border-radius: 9px;

            color: var(--primary);

            font-size: 12px;
            font-weight: 900;
        }

        body.fin-app.pagina-index .home-etapa h3{
            margin: 0 0 5px;

            color: var(--text);

            font-size: 13px;
        }

        body.fin-app.pagina-index .home-etapa p{
            margin: 0;

            color: var(--text-light);

            font-size: 10px;
            line-height: 1.5;
        }


        /* =====================================================
           CTA FINAL
        ====================================================== */

        body.fin-app.pagina-index .home-cta{
            padding:
                28px 0 86px;
        }

        body.fin-app.pagina-index .home-cta-card{
            position: relative;

            padding:
                54px 28px;

            overflow: hidden;

            text-align: center;

            border:
                1px solid
                rgba(0, 229, 255, .38);

            border-radius: 18px;

            background:
                linear-gradient(
                    145deg,
                    rgba(26, 29, 51, .98),
                    rgba(15, 17, 32, .98)
                );
        }

        body.fin-app.pagina-index .home-cta-card::after{
            content: "";

            position: absolute;

            width: 360px;
            height: 360px;

            left: 50%;
            bottom: -300px;

            transform:
                translateX(-50%);

            border-radius: 50%;

            background:
                rgba(0, 229, 255, .14);

            filter:
                blur(70px);

            pointer-events: none;
        }

        body.fin-app.pagina-index .home-cta-card h2{
            position: relative;
            z-index: 1;

            margin: 0;

            color: var(--text);

            font-size:
                clamp(28px, 4vw, 42px);
        }

        body.fin-app.pagina-index .home-cta-card p{
            position: relative;
            z-index: 1;

            max-width: 620px;

            margin:
                13px auto 23px;

            color: var(--text-light);

            font-size: 12px;
            line-height: 1.6;
        }

        body.fin-app.pagina-index .home-cta-acoes{
            position: relative;
            z-index: 1;

            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 9px;
        }


        /* =====================================================
           RODAPÉ
        ====================================================== */

        body.fin-app.pagina-index .home-rodape{
            padding: 24px 0;

            border-top:
                1px solid var(--border);
        }

        body.fin-app.pagina-index .home-rodape-interno{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
        }

        body.fin-app.pagina-index .home-rodape strong{
            color: var(--primary);
            font-size: 14px;
        }

        body.fin-app.pagina-index .home-rodape span{
            color:
                rgba(191, 198, 255, .65);

            font-size: 9px;
        }


        /* =====================================================
           ASSISTENTE FINCONTROLE
        ====================================================== */

        body.fin-app.pagina-index .home-ia-grid{
            display: grid;
            grid-template-columns:
                minmax(0, 1fr)
                minmax(0, .9fr);

            gap: 18px;
            align-items: stretch;
        }

        body.fin-app.pagina-index .home-ia-chat,
body.fin-app.pagina-index .home-ia-beneficios{
            min-width: 0;
        }

        body.fin-app.pagina-index .home-ia-chat{
            padding: 18px;

            border:
                1px solid
                rgba(0, 229, 255, .32);

            border-radius: 14px;

            background:
                linear-gradient(
                    145deg,
                    rgba(26, 29, 51, .98),
                    rgba(15, 17, 32, .98)
                );
        }

        body.fin-app.pagina-index .home-ia-chat-topo{
            display: flex;
            align-items: center;
            justify-content: space-between;

            margin-bottom: 18px;
            padding-bottom: 13px;

            border-bottom:
                1px solid
                var(--border);
        }

        body.fin-app.pagina-index .home-ia-chat-topo strong{
            display: block;

            color: var(--primary);

            font-size: 13px;
        }

        body.fin-app.pagina-index .home-ia-chat-topo small{
            display: block;

            margin-top: 4px;

            color: var(--text-light);

            font-size: 8px;
        }

        body.fin-app.pagina-index .home-ia-mensagem{
            width: fit-content;
            max-width: 83%;

            margin-bottom: 10px;
            padding: 11px 12px;

            border-radius: 10px;

            font-size: 11px;
            line-height: 1.5;
        }

        body.fin-app.pagina-index .home-ia-mensagem.usuario{
            margin-left: auto;

            background:
                rgba(0, 229, 255, .08);

            border:
                1px solid
                rgba(0, 229, 255, .35);

            color: var(--text);
        }

        body.fin-app.pagina-index .home-ia-mensagem.assistente{
            background: var(--bg-main);

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

            color: var(--text-light);
        }

        body.fin-app.pagina-index .home-ia-exemplo{
            min-height: 44px;

            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;

            margin-top: 18px;
            padding: 0 12px;

            background: var(--bg-main);

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

            border-radius: 8px;

            color:
                rgba(191, 198, 255, .72);

            font-size: 9px;
        }

        body.fin-app.pagina-index .home-ia-exemplo span{
            color: var(--primary);

            font-size: 18px;
            font-weight: 800;
        }

        body.fin-app.pagina-index .home-ia-beneficios{
            display: grid;
            grid-template-columns:
                repeat(2, minmax(0, 1fr));

            gap: 10px;
        }

        body.fin-app.pagina-index .home-ia-beneficio{
            padding: 18px;

            background: var(--bg-card);

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

            border-radius: 11px;
        }

        body.fin-app.pagina-index .home-ia-beneficio strong{
            display: block;

            margin-bottom: 8px;

            color: var(--text);

            font-size: 12px;
        }

        body.fin-app.pagina-index .home-ia-beneficio p{
            margin: 0;

            color: var(--text-light);

            font-size: 10px;
            line-height: 1.55;
        }

        body.fin-app.pagina-index .home-recurso-ia{
            border-color:
                rgba(0, 229, 255, .38);
        }



        /* =====================================================
           NAVEGAÇÃO INTERNA / ATALHOS
        ====================================================== */

        body.fin-app.pagina-index .home-nav-interno{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            flex-wrap: wrap;
        }

        body.fin-app.pagina-index .home-nav-interno a{
            min-height: 34px;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 0 9px;

            border-radius: 7px;

            color: var(--text-light);

            text-decoration: none;

            font-size: 10px;
            font-weight: 800;

            transition:
                background .2s ease,
                color .2s ease;
        }

        body.fin-app.pagina-index .home-nav-interno a:hover{
            background: var(--bg-hover);
            color: var(--primary);
        }

        body.fin-app.pagina-index .home-botao-explorar{
            border-color:
                rgba(0, 229, 255, .35);
        }

        body.fin-app.pagina-index .home-atalhos{
            padding: 6px 0 28px;
        }

        body.fin-app.pagina-index .home-atalhos-grid{
            display: grid;
            grid-template-columns:
                repeat(6, minmax(0, 1fr));

            gap: 9px;
        }

        body.fin-app.pagina-index .home-atalho-card{
            min-width: 0;
            min-height: 110px;

            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 12px;

            padding: 15px;

            background: var(--bg-card);

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

            border-radius: 11px;

            color: inherit;

            text-decoration: none;

            transition:
                transform .2s ease,
                border-color .2s ease,
                background .2s ease;
        }

        body.fin-app.pagina-index .home-atalho-card:hover{
            transform:
                translateY(-2px);

            border-color:
                rgba(0, 229, 255, .45);

            background:
                var(--bg-hover);
        }

        body.fin-app.pagina-index .home-atalho-card.destaque{
            border-color:
                rgba(0, 229, 255, .42);
        }

        body.fin-app.pagina-index .home-atalho-icone{
            width: 34px;
            height: 34px;

            display: flex;
            align-items: center;
            justify-content: center;

            border:
                1px solid
                rgba(0, 229, 255, .30);

            border-radius: 8px;

            color: var(--primary);

            font-size: 17px;
            font-weight: 900;
        }

        body.fin-app.pagina-index .home-atalho-card strong{
            display: block;

            color: var(--text);

            font-size: 12px;
            line-height: 1.25;
        }

        body.fin-app.pagina-index .home-atalho-card small{
            display: block;

            margin-top: 5px;

            color: var(--text-light);

            font-size: 10px;
            line-height: 1.4;
        }

        body.fin-app.pagina-index section[id]{
            scroll-margin-top: 88px;
        }

        /* =====================================================
           RESPONSIVO
        ====================================================== */

        @media (max-width: 900px) {

            body.fin-app.pagina-index .home-nav-interno{
                display: none;
            }

            body.fin-app.pagina-index .home-atalhos-grid{
                grid-template-columns:
                    repeat(3, minmax(0, 1fr));
            }

            body.fin-app.pagina-index .home-hero-grid,
body.fin-app.pagina-index .home-visao,
body.fin-app.pagina-index .home-mobile-grid{
                grid-template-columns: 1fr;
            }

            body.fin-app.pagina-index .home-preview{
                max-width: 650px;
            }

            body.fin-app.pagina-index .home-recursos{
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
            }

            body.fin-app.pagina-index .home-ia-grid{
                grid-template-columns: 1fr;
            }

            body.fin-app.pagina-index .home-visao-painel{
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
            }
        }


        @media (max-width: 620px) {

            body.fin-app.pagina-index .home-atalhos{
                padding-bottom: 20px;
            }

            body.fin-app.pagina-index .home-atalhos-grid{
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));

                gap: 7px;
            }

            body.fin-app.pagina-index .home-atalho-card{
                min-height: 105px;
                padding: 12px;
            }

            body.fin-app.pagina-index .home-atalho-card strong{
                font-size: 13px;
            }

            body.fin-app.pagina-index .home-atalho-card small{
                font-size: 11px;
            }

            body.fin-app.pagina-index .home-container{
                width:
                    min(
                        100% - 22px,
                        1180px
                    );
            }

            body.fin-app.pagina-index .home-topo-interno{
                min-height: 64px;
            }

            body.fin-app.pagina-index .home-logo{
                font-size: 19px;
            }

            body.fin-app.pagina-index .home-topo-acoes{
                gap: 5px;
            }

            body.fin-app.pagina-index .home-topo-acoes .home-botao{
                min-height: 36px;
                padding: 0 10px;
                font-size: 9px;
            }

            body.fin-app.pagina-index .home-hero{
                padding:
                    54px 0 42px;
            }

            body.fin-app.pagina-index .home-hero h1{
                letter-spacing: -1px;
            }

            body.fin-app.pagina-index .home-hero-acoes{
                display: grid;
                grid-template-columns:
                    1fr 1fr;
            }

            body.fin-app.pagina-index .home-hero-acoes .home-botao{
                width: 100%;
                padding: 0 8px;
                box-sizing: border-box;
            }

            body.fin-app.pagina-index .home-preview{
                padding: 12px;
            }

            body.fin-app.pagina-index .home-preview-card{
                min-height: 105px;
                padding: 12px;
            }

            body.fin-app.pagina-index .home-preview-card strong{
                font-size: 17px;
            }

            body.fin-app.pagina-index .home-secao{
                padding: 48px 0;
            }

            body.fin-app.pagina-index .home-recursos{
                grid-template-columns: 1fr;
            }

            body.fin-app.pagina-index .home-ia-beneficios{
                grid-template-columns: 1fr;
            }

            body.fin-app.pagina-index .home-ia-mensagem{
                max-width: 92%;
                font-size: 12px;
            }

            body.fin-app.pagina-index .home-ia-exemplo{
                font-size: 10px;
            }

            body.fin-app.pagina-index .home-recurso{
                min-height: 0;
            }

            body.fin-app.pagina-index .home-visao-texto,
body.fin-app.pagina-index .home-visao-painel{
                padding: 18px;
            }

            body.fin-app.pagina-index .home-visao-painel{
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
            }

            body.fin-app.pagina-index .home-mini-indicador{
                min-height: 108px;
                padding: 11px;
            }

            body.fin-app.pagina-index .home-mini-indicador strong{
                font-size: 14px;
            }

            body.fin-app.pagina-index .home-celular{
                width: min(290px, 100%);
            }

            body.fin-app.pagina-index .home-celular-tela{
                min-height: 450px;
            }

            body.fin-app.pagina-index .home-cta-card{
                padding:
                    38px 18px;
            }

            body.fin-app.pagina-index .home-rodape-interno{
                flex-direction: column;
                align-items: flex-start;
            }
        }

    
        /* =====================================================
           AJUSTE DE LEGIBILIDADE - FONTES MAIORES
        ====================================================== */

        body.fin-app.pagina-index .home-marca{
            font-size: 17px;
        }

        body.fin-app.pagina-index .home-nav a,
body.fin-app.pagina-index .home-link-login{
            font-size: 12px;
        }

        body.fin-app.pagina-index .home-botao{
            font-size: 12px;
        }

        body.fin-app.pagina-index .home-badge{
            font-size: 11px;
        }

        body.fin-app.pagina-index .home-hero-texto p{
            font-size: 15px;
            line-height: 1.65;
        }

        body.fin-app.pagina-index .home-secao-titulo span{
            font-size: 12px;
        }

        body.fin-app.pagina-index .home-secao-titulo p{
            font-size: 14px;
            line-height: 1.65;
        }

        body.fin-app.pagina-index .home-recurso h3{
            font-size: 15px;
        }

        body.fin-app.pagina-index .home-recurso p{
            font-size: 13px;
            line-height: 1.6;
        }

        body.fin-app.pagina-index .home-visao-card span,
body.fin-app.pagina-index .home-visao-linha span{
            font-size: 11px;
        }

        body.fin-app.pagina-index .home-visao-card strong,
body.fin-app.pagina-index .home-visao-linha strong{
            font-size: 15px;
        }

        body.fin-app.pagina-index .home-ia-chat-topo strong{
            font-size: 16px;
        }

        body.fin-app.pagina-index .home-ia-chat-topo small{
            font-size: 11px;
        }

        body.fin-app.pagina-index .home-ia-mensagem{
            font-size: 13px;
            line-height: 1.6;
        }

        body.fin-app.pagina-index .home-ia-exemplo{
            font-size: 12px;
            line-height: 1.4;
        }

        body.fin-app.pagina-index .home-ia-beneficio strong{
            font-size: 14px;
        }

        body.fin-app.pagina-index .home-ia-beneficio p{
            font-size: 12px;
            line-height: 1.65;
        }

        body.fin-app.pagina-index .home-mobile-card strong{
            font-size: 15px;
        }

        body.fin-app.pagina-index .home-mobile-card p{
            font-size: 13px;
            line-height: 1.6;
        }

        body.fin-app.pagina-index .home-passo-numero{
            font-size: 13px;
        }

        body.fin-app.pagina-index .home-passo h3{
            font-size: 15px;
        }

        body.fin-app.pagina-index .home-passo p{
            font-size: 13px;
            line-height: 1.6;
        }

        body.fin-app.pagina-index .home-cta p{
            font-size: 14px;
            line-height: 1.6;
        }

        body.fin-app.pagina-index .home-footer{
            font-size: 11px;
        }

        @media (max-width: 760px) {

            body.fin-app.pagina-index .home-hero-texto p{
                font-size: 16px;
            }

            body.fin-app.pagina-index .home-secao-titulo p{
                font-size: 15px;
            }

            body.fin-app.pagina-index .home-recurso h3{
                font-size: 17px;
            }

            body.fin-app.pagina-index .home-recurso p{
                font-size: 14px;
            }

            body.fin-app.pagina-index .home-ia-chat-topo strong{
                font-size: 17px;
            }

            body.fin-app.pagina-index .home-ia-chat-topo small{
                font-size: 12px;
            }

            body.fin-app.pagina-index .home-ia-mensagem{
                font-size: 15px;
            }

            body.fin-app.pagina-index .home-ia-exemplo{
                min-height: 50px;
                font-size: 13px;
            }

            body.fin-app.pagina-index .home-ia-beneficio strong{
                font-size: 16px;
            }

            body.fin-app.pagina-index .home-ia-beneficio p{
                font-size: 14px;
            }

            body.fin-app.pagina-index .home-mobile-card strong,
body.fin-app.pagina-index .home-passo h3{
                font-size: 16px;
            }

            body.fin-app.pagina-index .home-mobile-card p,
body.fin-app.pagina-index .home-passo p{
                font-size: 14px;
            }

            body.fin-app.pagina-index .home-cta p{
                font-size: 15px;
            }
        }

        body.fin-app.pagina-index .home-artigo-card{color:inherit;text-decoration:none}
        body.fin-app.pagina-index .home-artigo-card h3{line-height:1.35}


        /* =====================================================
           TOPO UNIFICADO FINCONTROLE V9
           Mesmo padrão visual do Blog
        ====================================================== */

        body.fin-app.pagina-index .topo-fincontrole{
            position: sticky;
            top: 0;
            z-index: 1000;

            background:
                rgba(4, 10, 22, .96);

            border-top:
                2px solid
                rgba(0, 229, 255, .62);

            border-bottom:
                1px solid
                #17385a;

            backdrop-filter:
                blur(14px);

            box-shadow:
                0 8px 28px
                rgba(0, 0, 0, .16);
        }

        body.fin-app.pagina-index .topo-fincontrole-interno{
            position: relative;

            min-height: 82px;

            display: flex;
            align-items: center;
            justify-content: space-between;

            gap: 24px;
        }

        body.fin-app.pagina-index .topo-fincontrole-logo{
            width: 250px;
            height: 58px;

            flex:
                0 0
                250px;

            display: flex;
            align-items: center;

            padding: 0;

            text-decoration: none;
        }

        body.fin-app.pagina-index .topo-fincontrole-logo img{
            display: block;

            width: 250px;
            height: 58px;

            object-fit: contain;
            object-position: left center;
        }

        body.fin-app.pagina-index .topo-fincontrole-logo .fc-marca-inline{
            width: 100%;
            height: 58px;
            display: flex;
            align-items: center;
            gap: 12px;
            color: #ffffff;
        }

        body.fin-app.pagina-index .topo-fincontrole-logo .fc-marca-inline svg{
            width: 52px;
            height: 52px;
            flex: 0 0 52px;
            display: block;
        }

        body.fin-app.pagina-index .topo-fincontrole-logo .fc-marca-inline strong{
            color: #ffffff;
            font-size: 31px;
            font-weight: 850;
            letter-spacing: -1px;
            white-space: nowrap;
        }

        body.fin-app.pagina-index .topo-fincontrole-logo .fc-marca-inline strong span{
            color: #00e5ff;
        }

        body.fin-app.pagina-index .topo-fincontrole-nav{
            display: flex;
            align-items: center;

            gap: 8px;

            margin-left: auto;
        }

        body.fin-app.pagina-index .topo-fincontrole-nav a{
            min-height: 44px;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding:
                0 15px;

            border:
                1px solid
                transparent;

            border-radius:
                9px;

            color:
                #e8f0ff;

            text-decoration: none;

            font-size:
                13px;

            font-weight:
                800;

            white-space:
                nowrap;

            transition:
                .2s ease;
        }

        body.fin-app.pagina-index .topo-fincontrole-nav a:hover,
body.fin-app.pagina-index .topo-fincontrole-nav a.ativo{
            color:
                var(--primary);

            background:
                rgba(0, 229, 255, .055);

            border-color:
                rgba(0, 229, 255, .18);
        }

        body.fin-app.pagina-index .topo-fincontrole-nav
        .topo-fincontrole-cta{
            min-height: 46px;

            padding:
                0 19px;

            margin-left:
                3px;

            background:
                var(--primary);

            border-color:
                var(--primary);

            color:
                #03121a;

            font-size:
                13px;

            font-weight:
                900;

            box-shadow:
                0 0 18px
                rgba(0, 229, 255, .13);
        }

        body.fin-app.pagina-index .topo-fincontrole-nav
        .topo-fincontrole-cta:hover{
            background:
                #33ebff;

            color:
                #03121a;

            transform:
                translateY(-1px);
        }

        /* Botão mobile bem visível */
        body.fin-app.pagina-index .topo-menu-toggle{
            display: none;

            width: 52px;
            height: 52px;

            flex:
                0 0
                52px;

            padding: 0;

            align-items: center;
            justify-content: center;
            flex-direction: column;

            gap: 5px;

            background:
                var(--primary);

            border:
                2px solid
                #7bf3ff;

            border-radius:
                11px;

            box-shadow:
                0 0 22px
                rgba(0, 229, 255, .26);

            cursor:
                pointer;
        }

        body.fin-app.pagina-index .topo-menu-toggle span{
            width: 24px;
            height: 3px;

            display: block;

            border-radius:
                999px;

            background:
                #03121a;

            transition:
                .2s ease;
        }


        @media(max-width: 820px) {

            body.fin-app.pagina-index .topo-fincontrole-interno{
                min-height:
                    78px;

                padding:
                    7px 0;
            }

            body.fin-app.pagina-index .topo-fincontrole-logo{
                width:
                    225px;

                height:
                    54px;

                flex-basis:
                    225px;
            }

            body.fin-app.pagina-index .topo-fincontrole-logo img{
                width:
                    225px;

                height:
                    54px;
            }

            body.fin-app.pagina-index .topo-fincontrole-logo .fc-marca-inline{
                height: 54px;
                gap: 9px;
            }

            body.fin-app.pagina-index .topo-fincontrole-logo .fc-marca-inline svg{
                width: 46px;
                height: 46px;
                flex-basis: 46px;
            }

            body.fin-app.pagina-index .topo-fincontrole-logo .fc-marca-inline strong{
                font-size: 27px;
            }

            body.fin-app.pagina-index .topo-menu-toggle{
                display:
                    flex;
            }

            body.fin-app.pagina-index .topo-fincontrole-nav{
                display:
                    none;

                position:
                    absolute;

                top:
                    calc(100% + 8px);

                left:
                    0;

                right:
                    0;

                width:
                    100%;

                padding:
                    12px;

                margin:
                    0;

                flex-direction:
                    column;

                align-items:
                    stretch;

                gap:
                    6px;

                background:
                    #071326;

                border:
                    1px solid
                    rgba(0, 229, 255, .48);

                border-radius:
                    14px;

                box-shadow:
                    0 22px 60px
                    rgba(0, 0, 0, .52);
            }

            body.fin-app.pagina-index.topo-menu-aberto
            .topo-fincontrole-nav{
                display:
                    flex;
            }

            body.fin-app.pagina-index .topo-fincontrole-nav a{
                width:
                    100%;

                min-height:
                    52px;

                justify-content:
                    flex-start;

                padding:
                    0 16px;

                font-size:
                    15px;

                background:
                    #0b1a30;

                border:
                    1px solid
                    #17385a;

                border-radius:
                    9px;

                color:
                    #ffffff;
            }

            body.fin-app.pagina-index .topo-fincontrole-nav a:hover,
body.fin-app.pagina-index .topo-fincontrole-nav a.ativo{
                color:
                    var(--primary);

                background:
                    #10243d;

                border-color:
                    rgba(0, 229, 255, .45);
            }

            body.fin-app.pagina-index .topo-fincontrole-nav
            .topo-fincontrole-cta{
                min-height:
                    54px;

                justify-content:
                    center;

                margin:
                    3px 0 0;

                background:
                    var(--primary);

                color:
                    #03121a;

                border-color:
                    var(--primary);

                font-size:
                    15px;
            }

            body.fin-app.pagina-index.topo-menu-aberto
            .topo-menu-toggle
            span:nth-child(1){
                transform:
                    translateY(8px)
                    rotate(45deg);
            }

            body.fin-app.pagina-index.topo-menu-aberto
            .topo-menu-toggle
            span:nth-child(2){
                opacity:
                    0;
            }

            body.fin-app.pagina-index.topo-menu-aberto
            .topo-menu-toggle
            span:nth-child(3){
                transform:
                    translateY(-8px)
                    rotate(-45deg);
            }
        }


        @media(max-width: 480px) {

            body.fin-app.pagina-index .topo-fincontrole-interno{
                min-height:
                    74px;
            }

            body.fin-app.pagina-index .topo-fincontrole-logo{
                width:
                    195px;

                height:
                    50px;

                flex-basis:
                    195px;
            }

            body.fin-app.pagina-index .topo-fincontrole-logo img{
                width:
                    195px;

                height:
                    50px;
            }

            body.fin-app.pagina-index .topo-fincontrole-logo .fc-marca-inline{
                height: 50px;
                gap: 8px;
            }

            body.fin-app.pagina-index .topo-fincontrole-logo .fc-marca-inline svg{
                width: 42px;
                height: 42px;
                flex-basis: 42px;
            }

            body.fin-app.pagina-index .topo-fincontrole-logo .fc-marca-inline strong{
                font-size: 24px;
            }

            body.fin-app.pagina-index .topo-menu-toggle{
                width:
                    50px;

                height:
                    50px;

                flex-basis:
                    50px;
            }
        }

    
        /* =====================================================
           V11 - ATALHOS INTERNOS RESTAURADOS
           Mantém o topo principal igual ao Blog.
        ====================================================== */

        body.fin-app.pagina-index .home-atalhos-topo{
            position: sticky;
            top: 82px;
            z-index: 990;
            background: rgba(7, 19, 38, .96);
            border-bottom: 1px solid rgba(53, 57, 92, .78);
            backdrop-filter: blur(12px);
        }

        body.fin-app.pagina-index .home-atalhos-topo-interno{
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            overflow-x: auto;
            scrollbar-width: thin;
            scrollbar-color: rgba(0,229,255,.35) transparent;
        }

        body.fin-app.pagina-index .home-atalhos-topo-interno a{
            flex: 0 0 auto;
            min-height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 10px;
            border: 1px solid transparent;
            border-radius: 8px;
            color: var(--text-light);
            text-decoration: none;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
            transition: .2s ease;
        }

        body.fin-app.pagina-index .home-atalhos-topo-interno a:hover{
            color: var(--primary);
            background: rgba(0,229,255,.06);
            border-color: rgba(0,229,255,.18);
        }

        /* Compensa os dois cabeçalhos fixos ao navegar por âncoras */
        body.fin-app.pagina-index section[id]{
            scroll-margin-top: 138px !important;
        }

        @media(max-width:820px) {
            body.fin-app.pagina-index .home-atalhos-topo{
                top: 78px;
            }

            body.fin-app.pagina-index .home-atalhos-topo-interno{
                justify-content: flex-start;
                min-height: 46px;
                padding: 0 2px;
            }

            body.fin-app.pagina-index .home-atalhos-topo-interno a{
                min-height: 36px;
                padding: 0 11px;
                font-size: 12px;
            }

            body.fin-app.pagina-index section[id]{
                scroll-margin-top: 136px !important;
            }
        }

        @media(max-width:480px) {
            body.fin-app.pagina-index .home-atalhos-topo{
                top: 74px;
            }

            body.fin-app.pagina-index .home-atalhos-topo-interno{
                min-height: 44px;
            }

            body.fin-app.pagina-index .home-atalhos-topo-interno a{
                font-size: 11px;
            }

            body.fin-app.pagina-index section[id]{
                scroll-margin-top: 130px !important;
            }
        }

    

/* =========================================================
   DASHBOARD — ESTILOS ESPECÍFICOS
   CSS antes inline em dashboard.php
   Agora isolado por classe específica da página.
========================================================= */

/* --- bloco 1 originalmente inline em dashboard.php --- */

/* ===== CORREÇÃO GARANTIDA DO BLOCO DE LANÇAMENTOS ===== */

body.fin-app.pagina-dashboard .lista-vencimentos-dashboard{
    width:100%;
    display:block;
}

body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard,
body.fin-app.pagina-dashboard .linha-lancamento-final{
    display:grid !important;
    grid-template-columns:95px minmax(175px,1.15fr) minmax(170px,1fr) 105px 110px 220px 95px !important;
    gap:12px !important;
    align-items:center !important;
    width:100% !important;
}

body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard{
    padding:12px 14px !important;
    border:1px solid var(--border) !important;
    border-bottom:0 !important;
    border-radius:10px 10px 0 0 !important;
    color:var(--text) !important;
    font-size:11px !important;
}

body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard small{
    display:block !important;
    margin-top:4px !important;
    color:var(--text-light) !important;
    font-size:10px !important;
}

body.fin-app.pagina-dashboard .linha-lancamento-final{
    min-height:96px !important;
    padding:12px 14px !important;
    background:var(--bg-card) !important;
    border:1px solid var(--border) !important;
    border-bottom:0 !important;
}

body.fin-app.pagina-dashboard .linha-lancamento-final:last-child{
    border-bottom:1px solid var(--border) !important;
    border-radius:0 0 10px 10px !important;
}

body.fin-app.pagina-dashboard .data-lancamento-final{
    width:58px !important;
    min-height:68px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid var(--border) !important;
    border-radius:8px !important;
}

body.fin-app.pagina-dashboard .data-lancamento-final strong{
    color:var(--primary) !important;
    font-size:22px !important;
    line-height:1 !important;
}

body.fin-app.pagina-dashboard .data-lancamento-final span{
    margin-top:4px !important;
    color:var(--text) !important;
    font-size:10px !important;
    text-transform:uppercase !important;
}

body.fin-app.pagina-dashboard .coluna-principal-final{
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
    min-width:0 !important;
}

body.fin-app.pagina-dashboard .coluna-principal-final strong{
    color:var(--primary) !important;
    font-size:14px !important;
    font-weight:700 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

body.fin-app.pagina-dashboard .coluna-principal-final span{
    color:var(--text) !important;
    font-size:11px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

body.fin-app.pagina-dashboard .status-final{
    display:flex !important;
    justify-content:center !important;
}

body.fin-app.pagina-dashboard .status-final .badge-status{
    min-width:82px !important;
    padding:6px 8px !important;
    font-size:11px !important;
}

body.fin-app.pagina-dashboard .valor-final{
    color:var(--text) !important;
    text-align:right !important;
    white-space:nowrap !important;
}

body.fin-app.pagina-dashboard .valor-final strong{
    font-size:14px !important;
}

body.fin-app.pagina-dashboard .acoes-final{
    display:grid !important;
    grid-template-columns:100px 100px !important;
    gap:6px !important;
    align-items:center !important;
    justify-content:center !important;
}

body.fin-app.pagina-dashboard .botao-pagar-final,
body.fin-app.pagina-dashboard .botao-editar-final,
body.fin-app.pagina-dashboard .botao-cancelar-final{
    width:100px !important;
    min-height:33px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:5px 8px !important;
    border-radius:7px !important;
    font-family:inherit !important;
    font-size:11px !important;
    font-weight:bold !important;
    text-decoration:none !important;
    cursor:pointer !important;
}

body.fin-app.pagina-dashboard .botao-pagar-final{
    border:1px solid #00c853 !important;
    background:transparent !important;
    color:#00e65c !important;
}

body.fin-app.pagina-dashboard .botao-editar-final{
    border:1px solid var(--primary) !important;
    background:transparent !important;
    color:var(--primary) !important;
}

body.fin-app.pagina-dashboard .botao-cancelar-final{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    min-height:72px !important;
    border:1px solid var(--border) !important;
    background:var(--bg-main) !important;
    color:var(--text) !important;
    line-height:1.15 !important;
    text-align:center !important;
}

body.fin-app.pagina-dashboard .dias-final{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    line-height:1.05 !important;
}

body.fin-app.pagina-dashboard .dias-vencido-texto,
body.fin-app.pagina-dashboard .dias-vencido-numero{
    color:#ff4d4d !important;
}

body.fin-app.pagina-dashboard .dias-falta-texto,
body.fin-app.pagina-dashboard .dias-falta-numero{
    color:#ff9f1a !important;
}

body.fin-app.pagina-dashboard .dias-vencido-numero,
body.fin-app.pagina-dashboard .dias-falta-numero{
    margin:3px 0 !important;
    font-size:23px !important;
}

body.fin-app.pagina-dashboard .dias-vencido-texto,
body.fin-app.pagina-dashboard .dias-falta-texto{
    font-size:10px !important;
}

body.fin-app.pagina-dashboard .dias-hoje-final{
    color:#ff9f1a !important;
    font-size:11px !important;
}

/* em telas menores, vira 2 linhas sem quebrar */
@media (max-width:1250px){
    body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard{
        display:none !important;
    }

    body.fin-app.pagina-dashboard .linha-lancamento-final{
        grid-template-columns:65px minmax(150px,1fr) minmax(150px,1fr) 90px !important;
        grid-template-areas:
            "data lancamento categoria status"
            "data valor acoes dias" !important;
        row-gap:9px !important;
        margin-bottom:8px !important;
        border-bottom:1px solid var(--border) !important;
        border-radius:9px !important;
    }

    body.fin-app.pagina-dashboard .data-lancamento-final{grid-area:data !important;}
    body.fin-app.pagina-dashboard .coluna-principal-final:not(.categoria-final){grid-area:lancamento !important;}
    body.fin-app.pagina-dashboard .categoria-final{grid-area:categoria !important;}
    body.fin-app.pagina-dashboard .status-final{grid-area:status !important;}
    body.fin-app.pagina-dashboard .valor-final{grid-area:valor !important;text-align:left !important;}
    body.fin-app.pagina-dashboard .acoes-final{grid-area:acoes !important;justify-content:start !important;}
    body.fin-app.pagina-dashboard .dias-final{grid-area:dias !important;}
}

@media (max-width:800px){
    body.fin-app.pagina-dashboard .linha-lancamento-final{
        grid-template-columns:58px minmax(0,1fr) !important;
        grid-template-areas:
            "data lancamento"
            "data categoria"
            "data status"
            "data valor"
            "data acoes"
            "data dias" !important;
    }

    body.fin-app.pagina-dashboard .status-final,
body.fin-app.pagina-dashboard .dias-final{
        justify-content:flex-start !important;
        align-items:flex-start !important;
        text-align:left !important;
    }
}


/* --- bloco 2 originalmente inline em dashboard.php --- */

/* ===== AJUSTE FINAL PARA NÃO ESTOURAR A LARGURA ===== */

body.fin-app.pagina-dashboard .painel-vencimentos,
body.fin-app.pagina-dashboard .lista-vencimentos-dashboard,
body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard,
body.fin-app.pagina-dashboard .linha-lancamento-final{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard,
body.fin-app.pagina-dashboard .linha-lancamento-final{
    grid-template-columns:
        82px
        minmax(145px, 1.15fr)
        minmax(145px, 1fr)
        92px
        95px
        165px
        82px !important;
    gap: 8px !important;
}

body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard > div,
body.fin-app.pagina-dashboard .linha-lancamento-final > div{
    min-width: 0 !important;
}

body.fin-app.pagina-dashboard .acoes-final{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
}

body.fin-app.pagina-dashboard .botao-pagar-final,
body.fin-app.pagina-dashboard .botao-editar-final,
body.fin-app.pagina-dashboard .botao-cancelar-final{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 30px !important;
    height: auto !important;
    padding: 5px 6px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    box-sizing: border-box !important;
}

body.fin-app.pagina-dashboard .botao-cancelar-final{
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 40px !important;
}

body.fin-app.pagina-dashboard .valor-final{
    text-align: center !important;
}

body.fin-app.pagina-dashboard .dias-final{
    min-width: 0 !important;
    overflow: hidden !important;
}

body.fin-app.pagina-dashboard .dias-vencido-numero,
body.fin-app.pagina-dashboard .dias-falta-numero{
    font-size: 19px !important;
}

body.fin-app.pagina-dashboard .dias-vencido-texto,
body.fin-app.pagina-dashboard .dias-falta-texto,
body.fin-app.pagina-dashboard .dias-hoje-final{
    font-size: 9px !important;
}

/* telas até aproximadamente notebook */
@media (max-width: 1450px) {

    body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard,
body.fin-app.pagina-dashboard .linha-lancamento-final{
        grid-template-columns:
            72px
            minmax(135px, 1fr)
            minmax(135px, 1fr)
            85px
            90px
            145px
            75px !important;
        gap: 7px !important;
    }

    body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard{
        font-size: 10px !important;
    }

    body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard small{
        font-size: 9px !important;
    }

    body.fin-app.pagina-dashboard .coluna-principal-final strong{
        font-size: 12px !important;
    }

    body.fin-app.pagina-dashboard .coluna-principal-final span{
        font-size: 10px !important;
    }
}

/* abaixo de 1150 reorganiza sem deixar nada sair do painel */
@media (max-width: 1150px) {

    body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard{
        display: none !important;
    }

    body.fin-app.pagina-dashboard .linha-lancamento-final{
        grid-template-columns:
            58px
            minmax(130px, 1fr)
            minmax(130px, 1fr)
            85px !important;
        grid-template-areas:
            "data lancamento categoria status"
            "data valor acoes dias" !important;
        row-gap: 8px !important;
    }

    body.fin-app.pagina-dashboard .data-lancamento-final{
        grid-area: data !important;
    }

    body.fin-app.pagina-dashboard .coluna-principal-final:not(.categoria-final){
        grid-area: lancamento !important;
    }

    body.fin-app.pagina-dashboard .categoria-final{
        grid-area: categoria !important;
    }

    body.fin-app.pagina-dashboard .status-final{
        grid-area: status !important;
    }

    body.fin-app.pagina-dashboard .valor-final{
        grid-area: valor !important;
        text-align: left !important;
    }

    body.fin-app.pagina-dashboard .acoes-final{
        grid-area: acoes !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    body.fin-app.pagina-dashboard .dias-final{
        grid-area: dias !important;
    }

    body.fin-app.pagina-dashboard .botao-pagar-final,
body.fin-app.pagina-dashboard .botao-editar-final,
body.fin-app.pagina-dashboard .botao-cancelar-final{
        width: auto !important;
        min-width: 72px !important;
    }
}


/* --- bloco 3 originalmente inline em dashboard.php --- */

/* =========================================================
AJUSTE MOBILE FINAL - DASHBOARD
========================================================= */

@media (max-width: 900px) {

    html:has(body.fin-app.pagina-dashboard),
body.fin-app.pagina-dashboard{
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.fin-app.pagina-dashboard .conteudo,
body.fin-app.pagina-dashboard .conteudo.dashboard-financeiro{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        padding: 72px 14px 35px !important;
        box-sizing: border-box !important;
    }

    body.fin-app.pagina-dashboard .dashboard-financeiro,
body.fin-app.pagina-dashboard .dashboard-financeiro *{
        box-sizing: border-box;
    }

    body.fin-app.pagina-dashboard .painel-dashboard,
body.fin-app.pagina-dashboard .painel-vencimentos,
body.fin-app.pagina-dashboard .lista-vencimentos-dashboard,
body.fin-app.pagina-dashboard .grade-faturas-dashboard,
body.fin-app.pagina-dashboard .grade-contas-dashboard{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard{
        padding: 16px !important;
        border-radius: 12px !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard-cabecalho{
        align-items: flex-start !important;
        gap: 12px !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard-cabecalho h2{
        font-size: 21px !important;
        line-height: 1.15 !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard-cabecalho p{
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard-cabecalho .link-dashboard{
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 115px !important;
        text-align: center !important;
    }

    /* cabeçalho da tabela não aparece no celular */
    body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard{
        display: none !important;
    }

    /* cada lançamento vira um card vertical limpo */
    body.fin-app.pagina-dashboard .linha-lancamento-final{
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        grid-template-columns: 74px minmax(0, 1fr) !important;
        grid-template-areas:
            "data lancamento"
            "data categoria"
            "data status"
            "data valor"
            "data acoes"
            "data dias" !important;

        gap: 9px 14px !important;
        align-items: start !important;

        min-height: 0 !important;
        margin-bottom: 12px !important;
        padding: 14px !important;

        border: 1px solid var(--border) !important;
        border-radius: 11px !important;
        background: var(--bg-card) !important;

        overflow: hidden !important;
    }

    body.fin-app.pagina-dashboard .data-lancamento-final{
        grid-area: data !important;
        width: 64px !important;
        min-height: 90px !important;
        align-self: stretch !important;
        justify-self: start !important;
    }

    body.fin-app.pagina-dashboard .data-lancamento-final strong{
        font-size: 25px !important;
    }

    body.fin-app.pagina-dashboard .data-lancamento-final span{
        font-size: 11px !important;
    }

    body.fin-app.pagina-dashboard .coluna-principal-final:not(.categoria-final){
        grid-area: lancamento !important;
    }

    body.fin-app.pagina-dashboard .categoria-final{
        grid-area: categoria !important;
    }

    body.fin-app.pagina-dashboard .coluna-principal-final{
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.fin-app.pagina-dashboard .coluna-principal-final strong{
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        white-space: normal !important;
        text-overflow: clip !important;

        color: var(--primary) !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
    }

    body.fin-app.pagina-dashboard .coluna-principal-final span{
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        white-space: normal !important;
        text-overflow: clip !important;

        color: var(--text) !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    body.fin-app.pagina-dashboard .status-final{
        grid-area: status !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    body.fin-app.pagina-dashboard .status-final .badge-status{
        width: auto !important;
        min-width: 92px !important;
        max-width: 100% !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
    }

    body.fin-app.pagina-dashboard .valor-final{
        grid-area: valor !important;
        width: 100% !important;
        min-width: 0 !important;
        text-align: left !important;
    }

    body.fin-app.pagina-dashboard .valor-final strong{
        font-size: 17px !important;
    }

    body.fin-app.pagina-dashboard .acoes-final{
        grid-area: acoes !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;

        width: 100% !important;
        min-width: 0 !important;
        justify-content: stretch !important;
    }

    body.fin-app.pagina-dashboard .botao-pagar-final,
body.fin-app.pagina-dashboard .botao-editar-final,
body.fin-app.pagina-dashboard .botao-cancelar-final{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        height: auto !important;
        padding: 7px 8px !important;

        font-size: 11px !important;
        line-height: 1.15 !important;

        box-sizing: border-box !important;
    }

    /* se estiver pago: editar + cancelar lado a lado */
    body.fin-app.pagina-dashboard .botao-cancelar-final{
        grid-column: auto !important;
        grid-row: auto !important;
    }

    body.fin-app.pagina-dashboard .dias-final{
        grid-area: dias !important;

        width: 100% !important;
        min-width: 0 !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    body.fin-app.pagina-dashboard .dias-vencido-numero,
body.fin-app.pagina-dashboard .dias-falta-numero{
        font-size: 21px !important;
    }

    /* cartões superiores - 2 por linha no celular */
    body.fin-app.pagina-dashboard .cards-dashboard{
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    body.fin-app.pagina-dashboard .card-dashboard{
        width: 100% !important;
        min-width: 0 !important;
        min-height: 124px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    body.fin-app.pagina-dashboard .card-dashboard-titulo{
        min-height: 23px !important;
        margin-bottom: 4px !important;
        font-size: 10px !important;
        line-height: 1.12 !important;
    }

    body.fin-app.pagina-dashboard .card-dashboard-valor{
        margin-bottom: 6px !important;
        font-size: 18px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    body.fin-app.pagina-dashboard .card-dashboard-periodo{
        font-size: 9px !important;
        line-height: 1.25 !important;
    }

    body.fin-app.pagina-dashboard .mini-indicador-investimento{
        margin-top: 7px !important;
        padding-top: 7px !important;
        gap: 5px !important;
    }

    body.fin-app.pagina-dashboard .mini-indicador-investimento span{
        font-size: 8px !important;
    }

    body.fin-app.pagina-dashboard .mini-indicador-investimento strong{
        font-size: 10px !important;
    }

    /* faturas */
    body.fin-app.pagina-dashboard .grade-faturas-dashboard{
        grid-template-columns: 1fr !important;
    }

    body.fin-app.pagina-dashboard .fatura-dashboard{
        width: 100% !important;
        min-width: 0 !important;
    }

    body.fin-app.pagina-dashboard .fatura-dashboard-acoes{
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.fin-app.pagina-dashboard .fatura-dashboard-acoes button{
        width: 100% !important;
    }

    /* bancos */
    body.fin-app.pagina-dashboard .grade-contas-dashboard{
        grid-template-columns: 1fr !important;
    }

    body.fin-app.pagina-dashboard .conta-dashboard{
        width: 100% !important;
        min-width: 0 !important;
    }

    body.fin-app.pagina-dashboard .acoes-contas-dashboard{
        justify-content: stretch !important;
    }

    body.fin-app.pagina-dashboard .acoes-contas-dashboard .link-dashboard,
body.fin-app.pagina-dashboard .acoes-contas-dashboard a,
body.fin-app.pagina-dashboard .acoes-contas-dashboard button{
        width: 100% !important;
        max-width: none !important;
    }

    /* modais */
    body.fin-app.pagina-dashboard .modal-dashboard{
        padding: 12px !important;
    }

    body.fin-app.pagina-dashboard .modal-dashboard-conteudo,
body.fin-app.pagina-dashboard .modal-fatura-conteudo{
        width: 100% !important;
        max-width: 100% !important;
    }
}


@media (max-width: 480px) {

    body.fin-app.pagina-dashboard .conteudo,
body.fin-app.pagina-dashboard .conteudo.dashboard-financeiro{
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard{
        padding: 13px !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard-cabecalho{
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard-cabecalho h2{
        font-size: 20px !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard-cabecalho .link-dashboard{
        min-width: 105px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    body.fin-app.pagina-dashboard .linha-lancamento-final{
        grid-template-columns: 66px minmax(0, 1fr) !important;
        gap: 8px 11px !important;
        padding: 12px !important;
    }

    body.fin-app.pagina-dashboard .data-lancamento-final{
        width: 58px !important;
        min-height: 84px !important;
    }

    body.fin-app.pagina-dashboard .acoes-final{
        grid-template-columns: 1fr !important;
    }

    body.fin-app.pagina-dashboard .botao-pagar-final,
body.fin-app.pagina-dashboard .botao-editar-final,
body.fin-app.pagina-dashboard .botao-cancelar-final{
        min-height: 40px !important;
    }
}


/* --- bloco 4 originalmente inline em dashboard.php --- */

body.fin-app.pagina-dashboard .investimentos-dashboard-resumo{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
body.fin-app.pagina-dashboard .investimentos-dashboard-resumo>div{
    padding:15px;
    background:var(--bg-card,#1a1d33);
    border:1px solid var(--border,#35395c);
    border-radius:9px;
}
body.fin-app.pagina-dashboard .investimentos-dashboard-resumo span{
    display:block;
    color:var(--text-light,#bfc6ff);
    font-size:11px;
}
body.fin-app.pagina-dashboard .investimentos-dashboard-resumo strong{
    display:block;
    margin-top:7px;
    color:var(--primary,#00e5ff);
    font-size:20px;
}
body.fin-app.pagina-dashboard .saldo-conta-positivo{color:var(--primary,#00e5ff)!important;font-weight:700}
body.fin-app.pagina-dashboard .saldo-conta-negativo,
body.fin-app.pagina-dashboard .saldo-invest-negativo{color:#ff4d4d!important;font-weight:700}
@media(max-width:620px){
    body.fin-app.pagina-dashboard .investimentos-dashboard-resumo{grid-template-columns:1fr}
}


/* --- bloco 5 originalmente inline em dashboard.php --- */

/* =========================================================
   BOTÃO EXCLUIR - DASHBOARD / FATURA
========================================================= */

body.fin-app.pagina-dashboard .botao-excluir-final{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 6px !important;

    background: transparent !important;

    border: 1px solid #ff4d4d !important;
    border-radius: 7px !important;

    color: #ff4d4d !important;

    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: bold !important;

    cursor: pointer !important;
}

body.fin-app.pagina-dashboard .botao-excluir-final:hover{
    background: rgba(255, 77, 77, .08) !important;
}

@media (max-width: 900px) {

    body.fin-app.pagina-dashboard .botao-excluir-final{
        min-height: 38px !important;
        font-size: 11px !important;
    }
}


/* --- bloco 6 originalmente inline em dashboard.php --- */

body.fin-app.pagina-dashboard .seletor-tipo-lancamentos-dashboard{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 430px;
    margin: 0 0 18px;
    padding: 5px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 10px;
}

body.fin-app.pagina-dashboard .tipo-lista-dashboard{
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--text-light);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

body.fin-app.pagina-dashboard .tipo-lista-dashboard:hover{
    background: var(--bg-hover);
    color: var(--primary);
}

body.fin-app.pagina-dashboard .tipo-lista-dashboard.ativo{
    background: rgba(255, 107, 107, .08);
    border-color: rgba(255, 107, 107, .42);
    color: #ff6b6b;
}

body.fin-app.pagina-dashboard .tipo-lista-dashboard.ativo.receita{
    background: rgba(0, 255, 179, .07);
    border-color: rgba(0, 255, 179, .38);
    color: var(--success);
}

body.fin-app.pagina-dashboard .botao-receber-final{
    border-color: var(--success) !important;
    color: var(--success) !important;
}

@media (max-width: 620px) {
    body.fin-app.pagina-dashboard .seletor-tipo-lancamentos-dashboard{
        width: 100%;
        max-width: none;
    }
}


/* --- bloco 7 originalmente inline em dashboard.php --- */

body.fin-app.pagina-dashboard .mini-indicador-investimento{
    margin-top:10px;
    padding-top:9px;
    border-top:1px solid var(--border);

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

body.fin-app.pagina-dashboard .mini-indicador-investimento span{
    color:var(--text-light);
    font-size:10px;
    line-height:1;
    text-transform:uppercase;
}

body.fin-app.pagina-dashboard .mini-indicador-investimento strong{
    color:var(--success);
    font-size:13px;
    line-height:1;
    white-space:nowrap;
}


/* --- bloco 8 originalmente inline em dashboard.php --- */

/* =========================================================
   DASHBOARD - RESUMO FINAL / RODAPÉ V131
   Mantém o layout mesmo se o theme.css estiver em cache
   ou não possuir as classes desta versão.
========================================================= */

body.fin-app.pagina-dashboard .dashboard-resumo-final{
    width: 100% !important;

    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 14px !important;

    margin-top: 18px !important;
    margin-bottom: 22px !important;

    box-sizing: border-box !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-final-card{
    min-width: 0 !important;
    min-height: 164px !important;

    padding: 18px !important;

    background: var(--bg-card, #1a1d33) !important;

    border:
        1px solid
        var(--border, #35395c) !important;

    border-radius: 12px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-final-titulo{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    margin-bottom: 17px !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-final-titulo strong{
    color: var(--text, #ffffff) !important;

    font-size: 12px !important;
    font-weight: 900 !important;

    text-transform: uppercase !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-final-icone{
    color: var(--primary, #00e5ff) !important;
    font-size: 17px !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-categoria-conteudo,
body.fin-app.pagina-dashboard .dashboard-resumo-vazio{
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-categoria-conteudo > div:last-child{
    min-width: 0 !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-categoria-conteudo small,
body.fin-app.pagina-dashboard .dashboard-resumo-contas-conteudo small{
    display: block !important;

    margin-bottom: 5px !important;

    color: var(--text-light, #bfc6ff) !important;

    font-size: 10px !important;
    line-height: 1.25 !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-categoria-conteudo strong{
    display: inline-block !important;

    max-width: 100% !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    color: var(--text, #ffffff) !important;

    font-size: 15px !important;
    font-weight: 900 !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-categoria-conteudo .valor-despesa{
    display: inline-block !important;

    margin-left: 5px !important;

    color: #ff5b68 !important;

    font-size: 14px !important;
    font-weight: 900 !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-donut{
    flex: 0 0 68px !important;

    width: 68px !important;
    height: 68px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 11px solid
        var(--primary, #00e5ff) !important;

    border-radius: 50% !important;

    box-sizing: border-box !important;

    opacity: .78 !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-donut.vazio{
    border-color:
        var(--border, #35395c) !important;

    opacity: .58 !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-vazio{
    min-height: 82px !important;

    color:
        var(--text-light, #bfc6ff) !important;

    font-size: 11px !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-contas-conteudo{
    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-contas-conteudo > div{
    min-width: 0 !important;

    padding: 13px !important;

    background:
        rgba(15,17,32,.42) !important;

    border:
        1px solid
        var(--border, #35395c) !important;

    border-radius: 9px !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-contas-conteudo strong{
    display: block !important;

    margin-top: 3px !important;

    color: var(--text, #ffffff) !important;

    font-size: 17px !important;
    font-weight: 900 !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-contas-conteudo .valor-despesa{
    color: #ff5b68 !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-contas-conteudo .valor-receita{
    color: var(--success, #00ffb3) !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-banco-vazio{
    font-size: 27px !important;
    opacity: .72 !important;
}


@media(max-width: 900px) {

    body.fin-app.pagina-dashboard .dashboard-resumo-final{
        grid-template-columns:
            1fr !important;
    }
}


@media(max-width: 620px) {

    body.fin-app.pagina-dashboard .dashboard-resumo-final{
        gap: 10px !important;

        margin-top: 12px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-resumo-final-card{
        min-height: 0 !important;

        padding: 14px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-resumo-final-titulo{
        margin-bottom: 12px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-resumo-final-titulo strong{
        font-size: 11px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-resumo-categoria-conteudo{
        gap: 10px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-resumo-donut{
        flex-basis: 50px !important;

        width: 50px !important;
        height: 50px !important;

        border-width: 8px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-resumo-categoria-conteudo strong,
body.fin-app.pagina-dashboard .dashboard-resumo-categoria-conteudo .valor-despesa{
        font-size: 12px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-resumo-contas-conteudo{
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}


/* --- bloco 9 originalmente inline em dashboard.php --- */

/* =========================================================
   DASHBOARD - EXPERIÊNCIA DE NOVO USUÁRIO V2
   O modo EXEMPLO não depende do CSS temporário do Tour.
========================================================= */

body.fin-app.pagina-dashboard .dashboard-exemplo-aviso{
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;

    margin: 14px 0 18px !important;
    padding: 14px 16px !important;

    box-sizing: border-box !important;

    border: 1px solid rgba(0,229,255,.34) !important;
    border-radius: 12px !important;

    background:
        linear-gradient(
            135deg,
            rgba(0,229,255,.075),
            rgba(26,29,51,.94)
        ) !important;

    box-shadow:
        0 14px 34px rgba(0,0,0,.18) !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-aviso > div{
    min-width: 0 !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-aviso strong{
    display: block !important;

    margin: 0 0 5px !important;

    color: var(--primary, #00e5ff) !important;

    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-aviso span{
    display: block !important;

    max-width: 860px !important;

    color: var(--text-light, #bfc6ff) !important;

    font-size: 11px !important;
    line-height: 1.48 !important;
}


/* BOTÃO FECHAR DO MODO EXEMPLO */
body.fin-app.pagina-dashboard .dashboard-exemplo-fechar{
    flex: 0 0 auto !important;

    min-width: 92px !important;
    min-height: 40px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    padding: 0 12px !important;

    border: 2px solid #ff5b68 !important;
    border-radius: 9px !important;

    background: rgba(255,91,104,.09) !important;
    color: #ff7b86 !important;

    font-family: inherit !important;
    font-weight: 900 !important;

    cursor: pointer !important;

    box-shadow:
        0 0 0 1px rgba(255,91,104,.10) !important;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-fechar span{
    display: inline !important;

    margin: 0 !important;

    color: inherit !important;

    font-size: 19px !important;
    line-height: 1 !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-fechar small{
    display: inline !important;

    margin: 0 !important;

    color: inherit !important;

    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-fechar:hover{
    background: rgba(255,91,104,.21) !important;
    border-color: #ff8992 !important;
    color: #ffffff !important;
}


/* =========================================================
   CARDS DEMONSTRATIVOS
========================================================= */

body.fin-app.pagina-dashboard .card-dashboard-exemplo{
    position: relative !important;

    overflow: hidden !important;

    border-color:
        rgba(0,229,255,.30) !important;

    background:
        linear-gradient(
            145deg,
            rgba(0,229,255,.035),
            var(--bg-card, #1a1d33) 42%
        ) !important;
}

body.fin-app.pagina-dashboard .card-dashboard-exemplo::after{
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    pointer-events: none !important;

    border-radius: inherit !important;

    box-shadow:
        inset 0 0 28px rgba(0,229,255,.025) !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-badge{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 2 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 22px !important;

    padding: 0 7px !important;

    border: 1px solid rgba(0,229,255,.42) !important;
    border-radius: 999px !important;

    background: rgba(0,229,255,.08) !important;
    color: var(--primary, #00e5ff) !important;

    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: .35px !important;
}


/* =========================================================
   EXEMPLOS DE LANÇAMENTO
========================================================= */

body.fin-app.pagina-dashboard .dashboard-exemplo-lancamentos{
    display: grid !important;
    gap: 9px !important;

    padding: 3px 0 !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-lancamento{
    display: grid !important;

    grid-template-columns:
        76px
        minmax(150px, 1.4fr)
        minmax(130px, 1fr)
        92px
        110px !important;

    align-items: center !important;
    gap: 12px !important;

    min-height: 66px !important;

    padding: 10px 12px !important;

    border: 1px solid var(--border, #35395c) !important;
    border-radius: 9px !important;

    background: rgba(15,17,32,.34) !important;

    color: var(--text, #ffffff) !important;

    box-sizing: border-box !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-lancamento > *{
    min-width: 0 !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-lancamento strong{
    color: var(--primary, #00e5ff) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-lancamento span,
body.fin-app.pagina-dashboard .dashboard-exemplo-lancamento small{
    color: var(--text-light, #bfc6ff) !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
}


/* =========================================================
   MOBILE - NOVO USUÁRIO
========================================================= */

@media(max-width: 720px) {

    body.fin-app.pagina-dashboard .dashboard-exemplo-aviso{
        align-items: stretch !important;
        flex-direction: column !important;

        gap: 11px !important;

        padding: 13px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-exemplo-aviso strong{
        font-size: 15px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-exemplo-aviso span{
        font-size: 12px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-exemplo-fechar{
        width: 100% !important;
        min-height: 46px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-exemplo-fechar small{
        font-size: 11px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-exemplo-lancamento{
        grid-template-columns:
            62px
            minmax(0, 1fr) !important;

        gap: 8px 10px !important;

        padding: 11px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-exemplo-lancamento > *:nth-child(n/**/+3){
        grid-column: 2 !important;
    }

    body.fin-app.pagina-dashboard .dashboard-exemplo-badge{
        top: 8px !important;
        right: 8px !important;
    }
}


/* --- bloco 10 originalmente inline em dashboard.php --- */


body.fin-app.pagina-dashboard #dashboardGraficos{
    margin-top: 18px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
}

body.fin-app.pagina-dashboard .dashboard-graficos-topo{
    margin-bottom: 16px;
}

body.fin-app.pagina-dashboard .dashboard-graficos-topo h2{
    margin: 0 0 4px;
    color: var(--text);
    font-size: 17px;
}

body.fin-app.pagina-dashboard .dashboard-graficos-topo p{
    margin: 0;
    color: var(--text-light);
    font-size: 10px;
    line-height: 1.45;
}

body.fin-app.pagina-dashboard .dashboard-graficos-grade{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.fin-app.pagina-dashboard .dashboard-grafico-card{
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(255,255,255,.015);
}

body.fin-app.pagina-dashboard .dashboard-grafico-card h3{
    margin: 0;
    color: var(--text);
    font-size: 12px;
}

body.fin-app.pagina-dashboard .dashboard-grafico-card > p{
    margin: 4px 0 13px;
    color: var(--text-light);
    font-size: 9px;
    line-height: 1.4;
}

body.fin-app.pagina-dashboard .dashboard-grafico-corpo{
    display: flex;
    align-items: center;
    gap: 15px;
}

body.fin-app.pagina-dashboard .dashboard-donut{
    width: 132px;
    height: 132px;
    flex: 0 0 132px;
    position: relative;
    border-radius: 50%;
    background: var(--grafico);
}

body.fin-app.pagina-dashboard .dashboard-donut::after{
    content: "";
    position: absolute;
    inset: 26px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,.04);
}

body.fin-app.pagina-dashboard .dashboard-donut-centro{
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}

body.fin-app.pagina-dashboard .dashboard-donut-centro small{
    color: var(--text-light);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

body.fin-app.pagina-dashboard .dashboard-donut-centro strong{
    margin-top: 3px;
    color: var(--text);
    font-size: 13px;
}

body.fin-app.pagina-dashboard .dashboard-grafico-legenda{
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

body.fin-app.pagina-dashboard .dashboard-legenda-item{
    display: grid;
    grid-template-columns: 9px minmax(0,1fr) auto;
    align-items: center;
    gap: 6px;
}

body.fin-app.pagina-dashboard .dashboard-legenda-cor{
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

body.fin-app.pagina-dashboard .dashboard-legenda-nome{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-light);
    font-size: 9px;
}

body.fin-app.pagina-dashboard .dashboard-legenda-valor{
    color: var(--text);
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

body.fin-app.pagina-dashboard .dashboard-grafico-vazio{
    min-height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 10px;
    text-align: center;
}

body.fin-app.pagina-dashboard .dashboard-donut-geral{
    width: 154px;
    height: 154px;
    flex-basis: 154px;
}

body.fin-app.pagina-dashboard .dashboard-donut-geral::after{
    inset: 31px;
}

body.fin-app.pagina-dashboard .dashboard-comparacao{
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.fin-app.pagina-dashboard .dashboard-comparacao-item{
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

body.fin-app.pagina-dashboard .dashboard-comparacao-item span,
body.fin-app.pagina-dashboard .dashboard-comparacao-item strong,
body.fin-app.pagina-dashboard .dashboard-comparacao-item small{
    display: block;
}

body.fin-app.pagina-dashboard .dashboard-comparacao-item span{
    color: var(--text-light);
    font-size: 8px;
    text-transform: uppercase;
}

body.fin-app.pagina-dashboard .dashboard-comparacao-item strong{
    margin-top: 3px;
    font-size: 12px;
}

body.fin-app.pagina-dashboard .dashboard-comparacao-item small{
    margin-top: 2px;
    color: var(--text-light);
    font-size: 8px;
}

@media (max-width: 1050px) {
    body.fin-app.pagina-dashboard .dashboard-graficos-grade{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {

    body.fin-app.pagina-dashboard #dashboardGraficos{
        margin-top: 12px;
        padding: 12px;
        border-radius: 10px;
    }

    body.fin-app.pagina-dashboard .dashboard-grafico-card{
        padding: 12px;
    }

    body.fin-app.pagina-dashboard .dashboard-grafico-corpo{
        gap: 11px;
    }

    body.fin-app.pagina-dashboard .dashboard-donut{
        width: 112px;
        height: 112px;
        flex-basis: 112px;
    }

    body.fin-app.pagina-dashboard .dashboard-donut::after{
        inset: 22px;
    }

    body.fin-app.pagina-dashboard .dashboard-donut-geral{
        width: 122px;
        height: 122px;
        flex-basis: 122px;
    }

    body.fin-app.pagina-dashboard .dashboard-donut-geral::after{
        inset: 24px;
    }

    body.fin-app.pagina-dashboard .dashboard-legenda-nome,
body.fin-app.pagina-dashboard .dashboard-legenda-valor{
        font-size: 8px;
    }
}



/* --- bloco 11 originalmente inline em dashboard.php --- */

/* =========================================================
   FINCONTROLE - ANÁLISE VISUAL V6
========================================================= */

body.fin-app.pagina-dashboard #dashboardGraficos{
    padding:18px!important;
    overflow:visible!important;
}

body.fin-app.pagina-dashboard .dashboard-graficos-grade{
    grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr) minmax(280px,.9fr)!important;
    gap:12px!important;
}

body.fin-app.pagina-dashboard .dashboard-grafico-card{
    overflow:visible!important;
}

body.fin-app.pagina-dashboard .dashboard-grafico-categorias .dashboard-grafico-corpo{
    display:grid!important;
    grid-template-columns:minmax(125px,145px) minmax(0,1fr)!important;
    align-items:center!important;
    gap:14px!important;
}

body.fin-app.pagina-dashboard .dashboard-grafico-categorias .dashboard-donut{
    width:145px!important;
    height:145px!important;
    flex-basis:145px!important;
    justify-self:center;
}

body.fin-app.pagina-dashboard .dashboard-grafico-categorias .dashboard-donut::after{
    inset:29px!important;
}

body.fin-app.pagina-dashboard .dashboard-grafico-legenda{
    gap:2px!important;
}

body.fin-app.pagina-dashboard .dashboard-legenda-item{
    grid-template-columns:9px minmax(0,1fr) auto auto!important;
    gap:6px!important;
    min-height:30px;
    padding:5px 4px!important;
    border-bottom:1px solid rgba(53,57,92,.48);
    border-radius:5px;
    cursor:pointer;
}

body.fin-app.pagina-dashboard .dashboard-legenda-item:last-child{
    border-bottom:0;
}

body.fin-app.pagina-dashboard .dashboard-legenda-item:hover,
body.fin-app.pagina-dashboard .dashboard-legenda-item:focus-visible{
    background:rgba(0,229,255,.045);
    outline:none;
}

body.fin-app.pagina-dashboard .dashboard-legenda-nome{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.18!important;
    font-size:9px!important;
}

body.fin-app.pagina-dashboard .dashboard-legenda-valor{
    font-size:9px!important;
}

body.fin-app.pagina-dashboard .dashboard-legenda-percentual{
    min-width:37px;
    text-align:right;
    font-size:9px;
    font-weight:900;
    color:var(--primary);
}

body.fin-app.pagina-dashboard .dashboard-grafico-comparativo .dashboard-grafico-corpo{
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center;
    gap:12px!important;
}

body.fin-app.pagina-dashboard .dashboard-grafico-comparativo .dashboard-comparacao{
    width:100%;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
}

body.fin-app.pagina-dashboard .dashboard-grafico-comparativo .dashboard-comparacao-item{
    min-width:0;
}

body.fin-app.pagina-dashboard .dashboard-donut{
    cursor:crosshair;
    transition:transform .16s ease,filter .16s ease;
}

body.fin-app.pagina-dashboard .dashboard-donut:hover{
    transform:scale(1.015);
    filter:brightness(1.04);
}

body.fin-app.pagina-dashboard .dashboard-donut-subtexto{
    width:78px;
    margin-top:2px!important;
    font-size:7px!important;
    line-height:1.25!important;
    text-transform:none!important;
}

body.fin-app.pagina-dashboard .dashboard-graficos-explicacao{
    margin-top:12px;
    padding:10px 12px;
    display:flex;
    align-items:flex-start;
    gap:9px;
    border:1px solid rgba(0,229,255,.24);
    border-radius:9px;
    background:rgba(0,229,255,.035);
}

body.fin-app.pagina-dashboard .dashboard-graficos-explicacao-icone{
    width:24px;
    height:24px;
    flex:0 0 24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(0,229,255,.36);
    border-radius:50%;
    color:var(--primary);
    font-size:11px;
    font-weight:900;
}

body.fin-app.pagina-dashboard .dashboard-graficos-explicacao p{
    margin:0;
    color:var(--text-light);
    font-size:9px;
    line-height:1.55;
}

body.fin-app.pagina-dashboard .dashboard-graficos-explicacao strong{
    font-weight:900;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6{
    position:fixed;
    z-index:30000;
    min-width:165px;
    max-width:min(260px,calc(100vw - 18px));
    padding:10px 12px;
    border:1px solid rgba(0,229,255,.45);
    border-radius:9px;
    background:#101426;
    box-shadow:0 14px 34px rgba(0,0,0,.42);
    color:var(--text);
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transform:translateY(4px);
    transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6.ativo{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6 .tip-topo{
    display:flex;
    align-items:center;
    gap:7px;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6 .tip-cor{
    width:9px;
    height:9px;
    flex:0 0 9px;
    border-radius:50%;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6 .tip-nome{
    font-size:11px;
    font-weight:900;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6 .tip-valor{
    display:block;
    margin-top:6px;
    color:var(--primary);
    font-size:14px;
    font-weight:900;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6 .tip-pct{
    display:block;
    margin-top:3px;
    color:var(--text-light);
    font-size:9px;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6.tem-detalhes{
    width:min(340px,calc(100vw - 18px));
    max-width:min(340px,calc(100vw - 18px));
    max-height:min(70vh,460px);
    overflow:auto;
    pointer-events:auto;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6 .tip-detalhes{
    margin-top:9px;
    padding-top:8px;
    border-top:1px solid rgba(53,57,92,.82);
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6 .tip-detalhes-titulo{
    display:block;
    margin-bottom:4px;
    color:var(--text);
    font-size:9px;
    text-transform:uppercase;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6 .tip-detalhe-item{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:2px 9px;
    padding:6px 0;
    border-bottom:1px solid rgba(53,57,92,.48);
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6 .tip-detalhe-item:last-child{
    border-bottom:0;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6 .tip-detalhe-nome{
    min-width:0;
    overflow-wrap:anywhere;
    color:var(--text-light);
    font-size:9px;
    line-height:1.25;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6 .tip-detalhe-valor{
    color:var(--text);
    font-size:9px;
    white-space:nowrap;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6 .tip-detalhe-pct{
    grid-column:1/-1;
    color:var(--primary);
    font-size:8px;
}

/* =========================================================
   V76.38 - DETALHAMENTO INTERATIVO DE OUTRAS
========================================================= */

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v8 .tip-detalhes-instrucao{
    display:block;
    margin:0 0 5px;
    color:var(--text-light);
    font-size:8px;
    line-height:1.35;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v8 .tip-detalhe-item{
    appearance:none;
    width:100%;
    margin:0;
    border:0;
    border-bottom:1px solid rgba(53,57,92,.48);
    border-radius:0;
    background:transparent;
    color:inherit;
    font-family:inherit;
    text-align:left;
    cursor:pointer;
    touch-action:manipulation;
    transition:opacity .16s ease,background-color .16s ease;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v8 .tip-detalhe-item:hover,
body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v8 .tip-detalhe-item:focus-visible{
    background:rgba(0,229,255,.07);
    outline:none;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v8 .tip-detalhe-item.categoria-oculta{
    opacity:.43;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v8 .tip-detalhe-item.categoria-oculta .tip-detalhe-nome{
    text-decoration:line-through;
    text-decoration-thickness:1px;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v8 .tip-detalhe-acao{
    grid-column:1/-1;
    justify-self:end;
    color:var(--text-light);
    font-size:7px;
    font-weight:900;
    letter-spacing:.25px;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item.categoria-parcial{
    opacity:.78!important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item.categoria-parcial .dashboard-legenda-nome::after{
    content:'PARCIAL';
    display:inline-block;
    margin-left:5px;
    color:#ffcf5a;
    font-size:7px;
    font-weight:900;
    text-decoration:none;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item{
    cursor:pointer;
    user-select:none;
    touch-action:manipulation;
    transition:opacity .18s ease,background-color .18s ease;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item:hover,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item:focus-visible{
    background:rgba(0,229,255,.06);
    outline:none;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item.categoria-oculta{
    opacity:.43;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item.categoria-oculta > span{
    text-decoration:line-through;
    text-decoration-thickness:1px;
}

@media(max-width:1180px){
    body.fin-app.pagina-dashboard .dashboard-graficos-grade{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }

    body.fin-app.pagina-dashboard .dashboard-grafico-comparativo{
        grid-column:1/-1;
    }

    body.fin-app.pagina-dashboard .dashboard-grafico-comparativo .dashboard-grafico-corpo{
        grid-template-columns:auto minmax(260px,420px)!important;
    }
}

@media(max-width:760px){
    body.fin-app.pagina-dashboard #dashboardGraficos{
        padding:12px!important;
    }

    body.fin-app.pagina-dashboard .dashboard-graficos-grade{
        grid-template-columns:1fr!important;
    }

    body.fin-app.pagina-dashboard .dashboard-grafico-comparativo{
        grid-column:auto;
    }

    body.fin-app.pagina-dashboard .dashboard-grafico-categorias .dashboard-grafico-corpo,
body.fin-app.pagina-dashboard .dashboard-grafico-comparativo .dashboard-grafico-corpo{
        grid-template-columns:1fr!important;
    }

    body.fin-app.pagina-dashboard .dashboard-grafico-categorias .dashboard-donut{
        width:128px!important;
        height:128px!important;
        flex-basis:128px!important;
    }

    body.fin-app.pagina-dashboard .dashboard-grafico-categorias .dashboard-donut::after{
        inset:25px!important;
    }

    body.fin-app.pagina-dashboard .dashboard-legenda-item{
        grid-template-columns:9px minmax(0,1fr) auto auto!important;
    }

    body.fin-app.pagina-dashboard .dashboard-graficos-explicacao{
        flex-direction:row;
    }
}


/* --- bloco 12 originalmente inline em dashboard.php --- */

/* =========================================================
   FINCONTROLE - ANALISE VISUAL V6.2
   Correção definitiva de sobreposição das legendas
========================================================= */

/* Em larguras comuns de desktop/notebook, usa 2 colunas.
   O comparativo ocupa a largura inteira na linha seguinte. */
@media (min-width: 761px) and (max-width: 1399px) {

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-graficos-grade{
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo{
        grid-column: 1 / -1 !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-grafico-corpo{
        display: grid !important;
        grid-template-columns: auto minmax(280px, 420px) !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 24px !important;
    }
}

/* Só em telas realmente largas ficam 3 cards lado a lado. */
@media (min-width: 1400px) {

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-graficos-grade{
        display: grid !important;
        grid-template-columns:
            minmax(0, 1.12fr)
            minmax(0, 1.12fr)
            minmax(300px, .90fr) !important;
        gap: 12px !important;
    }
}

/* Cards de categoria */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias{
    min-width: 0 !important;
    overflow: visible !important;
}

/* Dentro de cada card, reserva largura real para gráfico e tabela. */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias .dashboard-grafico-corpo{
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    min-width: 0 !important;
}

/* Donut menor e estável */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias .dashboard-donut{
    width: 145px !important;
    height: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
    flex: 0 0 145px !important;
    justify-self: center !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias .dashboard-donut::after{
    inset: 29px !important;
}

/* Legenda vira uma mini tabela limpa */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-legenda{
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item{
    display: grid !important;
    grid-template-columns:
        9px
        minmax(88px, 1fr)
        minmax(70px, auto)
        42px !important;

    align-items: center !important;
    gap: 7px !important;

    min-width: 0 !important;
    min-height: 31px !important;

    padding: 5px 3px !important;

    border-bottom:
        1px solid
        rgba(53,57,92,.48) !important;

    border-radius: 0 !important;

    cursor: pointer !important;
    user-select: none !important;
    touch-action: manipulation !important;
    transition:
        opacity .18s ease,
        background-color .18s ease !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item:hover,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item:focus-visible{
    background: rgba(0,229,255,.045) !important;
    outline: none !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item:focus-visible{
    box-shadow: inset 0 0 0 1px rgba(0,229,255,.32) !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item.categoria-oculta{
    opacity: .43 !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item.categoria-oculta .dashboard-legenda-nome{
    text-decoration: line-through !important;
    text-decoration-thickness: 1px !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item.categoria-oculta .dashboard-legenda-percentual{
    color: var(--text-light) !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-donut{
    transition: opacity .18s ease !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .grafico-sem-categorias .dashboard-donut{
    opacity: .62 !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item:last-child{
    border-bottom: 0 !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-cor{
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
}

/* Categoria pode quebrar linha, mas nunca invade valor/percentual */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-nome{
    display: block !important;

    min-width: 0 !important;
    max-width: 100% !important;

    overflow: hidden !important;

    color: var(--text-light) !important;

    font-size: 9px !important;
    line-height: 1.18 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

body.fin-app.pagina-dashboard
#dashboardGraficos
.dashboard-legenda-detalhes-botao{
    width:18px !important;
    min-width:18px !important;
    height:18px !important;
    min-height:18px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    vertical-align:middle !important;
    margin:0 0 0 4px !important;
    padding:0 !important;
    border:1px solid rgba(0,229,255,.52) !important;
    border-radius:50% !important;
    background:rgba(0,229,255,.10) !important;
    color:var(--primary) !important;
    font-size:10px !important;
    font-weight:900 !important;
    line-height:1 !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
}

body.fin-app.pagina-dashboard
#dashboardGraficos
.dashboard-legenda-detalhes-botao:hover,
body.fin-app.pagina-dashboard
#dashboardGraficos
.dashboard-legenda-detalhes-botao:focus-visible{
    background:rgba(0,229,255,.22) !important;
    outline:none !important;
    box-shadow:0 0 0 2px rgba(0,229,255,.13) !important;
}

/* Valor e percentual ficam em colunas próprias */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-valor{
    display: block !important;

    min-width: 70px !important;

    color: var(--text) !important;

    font-size: 9px !important;
    font-weight: 900 !important;

    text-align: right !important;
    white-space: nowrap !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-percentual{
    display: block !important;

    min-width: 42px !important;

    color: var(--primary) !important;

    font-size: 9px !important;
    font-weight: 900 !important;

    text-align: right !important;
    white-space: nowrap !important;
}

/* Comparativo */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao{
    width: 100% !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-donut-subtexto{
    width: 80px !important;
    margin-top: 2px !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

/* Faixa explicativa */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-graficos-explicacao{
    position: relative !important;
    z-index: 1 !important;

    margin-top: 12px !important;

    clear: both !important;
}

/* Em telas menores, tudo fica em 1 coluna e a legenda abaixo do gráfico. */
@media (max-width: 760px) {

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-graficos-grade{
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo{
        grid-column: auto !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias .dashboard-grafico-corpo,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-grafico-corpo{
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 11px !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias .dashboard-donut{
        width: 128px !important;
        height: 128px !important;
        min-width: 128px !important;
        max-width: 128px !important;
        flex-basis: 128px !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias .dashboard-donut::after{
        inset: 25px !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item{
        grid-template-columns:
            9px
            minmax(0,1fr)
            auto
            40px !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-valor{
        min-width: 0 !important;
    }

    body.fin-app.pagina-dashboard
    #dashboardGraficos
    .dashboard-legenda-detalhes-botao{
        width:22px !important;
        min-width:22px !important;
        height:22px !important;
        min-height:22px !important;
        font-size:11px !important;
    }
}

/* Em notebooks muito estreitos, não força gráfico e tabela lado a lado. */
@media (min-width: 761px) and (max-width: 1050px) {

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias .dashboard-grafico-corpo{
        grid-template-columns: 1fr !important;
        gap: 11px !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias .dashboard-donut{
        justify-self: center !important;
    }
}


/* --- bloco 13 originalmente inline em dashboard.php --- */

body.fin-app.pagina-dashboard .fatura-dashboard-identidade{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
body.fin-app.pagina-dashboard .fatura-dashboard-marca{
    width:72px;
    height:32px;
    flex:0 0 72px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4px;
    border:1px solid var(--border);
    border-radius:7px;
    background:rgba(255,255,255,.025);
}
body.fin-app.pagina-dashboard .fatura-dashboard-marca{
    gap:5px;
}
body.fin-app.pagina-dashboard .fatura-dashboard-marca img{
    display:block;
    width:auto;
    height:auto;
    object-fit:contain;
}
body.fin-app.pagina-dashboard .fatura-dashboard-marca .fatura-logo-instituicao{
    max-width:38px;
    max-height:23px;
}
body.fin-app.pagina-dashboard .fatura-dashboard-marca .fatura-logo-bandeira{
    max-width:25px;
    max-height:17px;
}
body.fin-app.pagina-dashboard .fatura-dashboard-marca span{
    font-size:21px;
    line-height:1;
}
@media(max-width:620px){
    body.fin-app.pagina-dashboard .fatura-dashboard-marca{
        width:64px;
        height:29px;
        flex-basis:64px;
    }
    body.fin-app.pagina-dashboard .fatura-dashboard-marca .fatura-logo-instituicao{
        max-width:34px;
        max-height:21px;
    }
    body.fin-app.pagina-dashboard .fatura-dashboard-marca .fatura-logo-bandeira{
        max-width:22px;
        max-height:15px;
    }
}


/* --- bloco 14 originalmente inline em dashboard.php --- */


/* =========================================================
   FINCONTROLE - LOGOS DASHBOARD V2.2
========================================================= */

body.fin-app.pagina-dashboard .conta-dashboard-icone{
    width: 58px !important;
    height: 42px !important;
    min-width: 58px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 5px !important;

    background: #ffffff !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    border-radius: 8px !important;

    overflow: hidden !important;
}

body.fin-app.pagina-dashboard .conta-dashboard-icone img{
    display: block !important;

    max-width: 48px !important;
    max-height: 30px !important;

    width: auto !important;
    height: auto !important;

    object-fit: contain !important;
}

body.fin-app.pagina-dashboard .conta-dashboard-icone span{
    font-size: 21px !important;
    line-height: 1 !important;
}


/*
 * Fundo branco também nos logos do cartão.
 * Melhora bastante a leitura de logos escuros/coloridos.
 */
body.fin-app.pagina-dashboard .fatura-dashboard-marca{
    background: #ffffff !important;
    border-color: rgba(255,255,255,.78) !important;
}

body.fin-app.pagina-dashboard .fatura-dashboard-marca img{
    object-fit: contain !important;
}


/*
 * Mantém o texto do cartão fora da caixa branca.
 */
body.fin-app.pagina-dashboard .fatura-dashboard-identidade{
    align-items: center !important;
}


/* Mobile */
@media(max-width:620px) {

    body.fin-app.pagina-dashboard .conta-dashboard-icone{
        width: 54px !important;
        height: 39px !important;
        min-width: 54px !important;
    }

    body.fin-app.pagina-dashboard .conta-dashboard-icone img{
        max-width: 44px !important;
        max-height: 27px !important;
    }
}



/* --- bloco 15 originalmente inline em dashboard.php --- */

/* Logos quadrados 120x120 no Dashboard */
body.fin-app.pagina-dashboard .conta-dashboard-icone,
body.fin-app.pagina-dashboard .fatura-dashboard-marca{
    width:120px !important;
    height:120px !important;
    min-width:120px !important;
    flex:0 0 120px !important;
    box-sizing:border-box !important;
    padding:10px !important;
    background:#fff !important;
    border-radius:10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    overflow:hidden !important;
}
body.fin-app.pagina-dashboard .conta-dashboard-icone img{
    max-width:100px !important;
    max-height:100px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
}
body.fin-app.pagina-dashboard .fatura-dashboard-marca .fatura-logo-instituicao{
    max-width:68px !important;
    max-height:92px !important;
    width:auto !important;
    height:auto !important;
}
body.fin-app.pagina-dashboard .fatura-dashboard-marca .fatura-logo-bandeira{
    max-width:32px !important;
    max-height:52px !important;
    width:auto !important;
    height:auto !important;
}
body.fin-app.pagina-dashboard .fatura-dashboard-identidade{
    display:grid !important;
    grid-template-columns:120px minmax(0,1fr) !important;
    gap:14px !important;
    align-items:start !important;
}
body.fin-app.pagina-dashboard .fatura-dashboard-texto{
    min-width:0 !important;
}
body.fin-app.pagina-dashboard .fatura-dashboard-topo,
body.fin-app.pagina-dashboard .fatura-dashboard-cabecalho{
    min-width:0 !important;
}
@media(max-width:620px){
    body.fin-app.pagina-dashboard .conta-dashboard-icone,
body.fin-app.pagina-dashboard .fatura-dashboard-marca{
        width:96px !important;
        height:96px !important;
        min-width:96px !important;
        flex-basis:96px !important;
        padding:8px !important;
    }
    body.fin-app.pagina-dashboard .conta-dashboard-icone img{
        max-width:80px !important;
        max-height:80px !important;
    }
    body.fin-app.pagina-dashboard .fatura-dashboard-identidade{
        grid-template-columns:96px minmax(0,1fr) !important;
        gap:10px !important;
    }
}


/* --- bloco 16 originalmente inline em dashboard.php --- */

/* V2.4 - logos 85x85 e cabeçalho da fatura sem sobreposição */

body.fin-app.pagina-dashboard .conta-dashboard-icone,
body.fin-app.pagina-dashboard .fatura-dashboard-marca{
    width:85px !important;
    height:85px !important;
    min-width:85px !important;
    flex:0 0 85px !important;
    box-sizing:border-box !important;
    padding:7px !important;
    background:#fff !important;
    border-radius:9px !important;
    overflow:hidden !important;
}

/* Banco em cima e bandeira embaixo */
body.fin-app.pagina-dashboard .fatura-dashboard-marca{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
}

body.fin-app.pagina-dashboard .conta-dashboard-icone img{
    max-width:69px !important;
    max-height:69px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
}

body.fin-app.pagina-dashboard .fatura-dashboard-marca .fatura-logo-instituicao{
    display:block !important;
    max-width:68px !important;
    max-height:37px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
}

body.fin-app.pagina-dashboard .fatura-dashboard-marca .fatura-logo-bandeira{
    display:block !important;
    max-width:58px !important;
    max-height:27px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
}

/*
 * A imagem ocupa uma coluna própria.
 * Os textos ficam na segunda coluna e não entram na área do logo.
 */
body.fin-app.pagina-dashboard .fatura-dashboard-identidade{
    display:grid !important;
    grid-template-columns:85px minmax(0,1fr) !important;
    column-gap:12px !important;
    align-items:start !important;
    width:100% !important;
    min-width:0 !important;
}

body.fin-app.pagina-dashboard .fatura-dashboard-texto{
    min-width:0 !important;
    width:100% !important;
}

/*
 * Linha superior: instituição/bandeira à esquerda e status à direita.
 */
body.fin-app.pagina-dashboard .fatura-dashboard-topo,
body.fin-app.pagina-dashboard .fatura-dashboard-cabecalho{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:8px !important;
    min-width:0 !important;
    width:100% !important;
}

body.fin-app.pagina-dashboard .fatura-dashboard-bandeira,
body.fin-app.pagina-dashboard .fatura-dashboard-subtitulo{
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    line-height:1.25 !important;
}

body.fin-app.pagina-dashboard .fatura-dashboard-status,
body.fin-app.pagina-dashboard .status-fatura{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    position:static !important;
    transform:none !important;
}

/* Nome do cartão sempre em linha própria */
body.fin-app.pagina-dashboard .fatura-dashboard-nome{
    display:block !important;
    clear:both !important;
    margin-top:4px !important;
    line-height:1.15 !important;
    overflow-wrap:anywhere !important;
}

/* Mobile: mantém 85px; o card reorganiza sem esmagar os textos. */
@media(max-width:620px){
    body.fin-app.pagina-dashboard .conta-dashboard-icone,
body.fin-app.pagina-dashboard .fatura-dashboard-marca{
        width:85px !important;
        height:85px !important;
        min-width:85px !important;
        flex-basis:85px !important;
    }

    body.fin-app.pagina-dashboard .fatura-dashboard-identidade{
        grid-template-columns:85px minmax(0,1fr) !important;
        column-gap:10px !important;
    }
}


/* =========================================================
   ASSISTENTE FINCONTROLE — RESTAURADO V3.1
   Interface funcional recuperada; backend preservado.
========================================================= */
.fin-app .assistente-ia-botao {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2800;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--primary, #00e5ff);
    border-radius: 50%;

    background: var(--bg-card, #1a1d33);
    color: var(--primary, #00e5ff);

    box-shadow: 0 12px 32px rgba(0,0,0,.35);

    cursor: pointer;

    font-size: 25px;
    font-weight: 900;
}

.fin-app .assistente-ia-painel {
    position: fixed;
    right: 22px;
    bottom: 92px;
    z-index: 3200;

    width: min(430px, calc(100vw - 28px));
    max-height: min(650px, 76vh);

    display: none;
    flex-direction: column;

    overflow: hidden;

    background: var(--bg-card, #1a1d33);
    border: 1px solid var(--border, #35395c);
    border-radius: 16px;

    box-shadow: 0 20px 55px rgba(0,0,0,.48);
}

.fin-app .assistente-ia-painel.aberto {
    display: flex;
}

.fin-app .assistente-ia-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px;

    border-bottom: 1px solid var(--border, #35395c);
}

.fin-app .assistente-ia-topo strong {
    color: var(--primary, #00e5ff);
    font-size: 15px;
}

.fin-app .assistente-ia-topo small {
    display: block;
    margin-top: 4px;

    color: var(--text-light, #bfc6ff);
    font-size: 11px;
}

.fin-app .assistente-ia-fechar {
    width: 38px;
    height: 38px;

    border: 0;
    background: transparent;

    color: var(--text-light, #bfc6ff);

    font-size: 25px;
    cursor: pointer;
}

.fin-app .assistente-ia-mensagens {
    min-height: 210px;

    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 16px;

    overflow-y: auto;
}

.fin-app .assistente-msg {
    max-width: 88%;

    padding: 12px 13px;

    border-radius: 12px;

    font-size: 13px;
    line-height: 1.5;

    white-space: pre-wrap;
}

.fin-app .assistente-msg.ia {
    align-self: flex-start;

    background: var(--bg-main, #0f1120);
    color: var(--text-light, #bfc6ff);

    border: 1px solid var(--border, #35395c);
}

.fin-app .assistente-msg.usuario {
    align-self: flex-end;

    background: rgba(0,229,255,.08);
    color: var(--text, #fff);

    border: 1px solid rgba(0,229,255,.35);
}

.fin-app .assistente-ia-acoes {
    display: none;
    gap: 9px;

    padding: 0 16px 12px;
}

.fin-app .assistente-ia-acoes.visivel {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.fin-app .assistente-ia-acoes button {
    min-height: 43px;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

.fin-app .assistente-confirmar {
    border: 1px solid var(--primary, #00e5ff);

    background: rgba(0,229,255,.07);
    color: var(--primary, #00e5ff);
}

.fin-app .assistente-cancelar {
    border: 1px solid var(--border, #35395c);

    background: transparent;
    color: var(--text-light, #bfc6ff);
}

.fin-app .assistente-ia-form {
    display: grid;
    grid-template-columns: minmax(0,1fr) 48px 48px 48px;
    gap: 9px;

    padding: 13px 16px 16px;

    border-top: 1px solid var(--border, #35395c);
}

.fin-app .assistente-ia-form input {
    width: 100%;
    min-width: 0;
    min-height: 48px;

    padding: 0 13px;

    box-sizing: border-box;

    background: var(--bg-main, #0f1120);
    border: 1px solid var(--border, #35395c);
    border-radius: 9px;

    color: var(--text, #fff);

    font-size: 13px;

    outline: none;
}

.fin-app .assistente-ia-form input:focus {
    border-color: var(--primary, #00e5ff);
}

.fin-app .assistente-ia-voz,
.fin-app .assistente-ia-audio,
.fin-app .assistente-ia-enviar {
    min-width: 0;
    min-height: 48px;

    border: 1px solid var(--primary, #00e5ff);
    border-radius: 9px;

    background: rgba(0,229,255,.07);
    color: var(--primary, #00e5ff);

    cursor: pointer;

    font-size: 20px;
}

.fin-app .assistente-ia-voz.ouvindo {
    border-color: #ff6b6b;
    color: #ff6b6b;
    background: rgba(255,107,107,.10);
    animation: assistenteIaPulsoVoz 1s ease-in-out infinite;
}

.fin-app .assistente-ia-voz.indisponivel,
.fin-app .assistente-ia-audio.indisponivel {
    opacity: .45;
    cursor: not-allowed;
}

@keyframes assistenteIaPulsoVoz {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255,107,107,.25);
    }

    50% {
        transform: scale(1.04);
        box-shadow: 0 0 0 5px rgba(255,107,107,0);
    }
}

.fin-app .assistente-ia-enviar {
    border: 1px solid var(--primary, #00e5ff);
    border-radius: 9px;

    background: rgba(0,229,255,.07);
    color: var(--primary, #00e5ff);

    cursor: pointer;

    font-size: 20px;
}

@media (max-width: 900px) {

    .fin-app .assistente-ia-botao {
        right: 14px;
        bottom: 18px;

        width: 58px;
        height: 58px;
    }

    .fin-app .assistente-ia-painel {
        left: 7px;
        right: 7px;
        bottom: 84px;

        width: auto;
        max-height: 78vh;

        border-radius: 15px;
    }

    .fin-app .assistente-ia-topo {
        padding: 15px 16px;
    }

    .fin-app .assistente-ia-topo strong {
        font-size: 17px;
    }

    .fin-app .assistente-ia-topo small {
        font-size: 12px;
    }

    .fin-app .assistente-ia-mensagens {
        min-height: 220px;

        padding: 15px;

        gap: 12px;
    }

    .fin-app .assistente-msg {
        max-width: 91%;

        padding: 12px 14px;

        font-size: 15px;
        line-height: 1.48;
    }

    .fin-app .assistente-ia-form {
        grid-template-columns:
            minmax(0,1fr)
            48px
            48px
            52px;

        padding: 12px 14px 15px;
    }

    .fin-app .assistente-ia-form input {
        min-height: 52px;

        font-size: 16px;
    }

    .fin-app .assistente-ia-voz,
    .fin-app .assistente-ia-audio,
    .fin-app .assistente-ia-enviar {
        min-height: 52px;
        font-size: 21px;
    }

    .fin-app .assistente-ia-enviar {
        font-size: 22px;
    }

    .fin-app .assistente-ia-acoes {
        padding: 0 14px 12px;
    }

    .fin-app .assistente-ia-acoes button {
        min-height: 46px;

        font-size: 13px;
    }
}

/* =========================================================
   ASSISTENTE FINCONTROLE V3.3
   Hierarquia de ações + controles de voz no mesmo layout.
========================================================= */
.fin-app .assistente-ia-acoes.visivel {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.fin-app .assistente-executar {
    width: 100%;
    min-height: 52px !important;

    border: 1px solid #00d990;
    border-radius: 10px;

    background: #00c982;
    color: #06150f;

    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .2px;

    box-shadow: 0 8px 22px rgba(0, 201, 130, .18);
}

.fin-app .assistente-executar:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.fin-app .assistente-executar:disabled,
.fin-app .assistente-confirmar:disabled,
.fin-app .assistente-cancelar:disabled {
    opacity: .55;
    cursor: wait;
    transform: none;
}

.fin-app .assistente-ia-acoes-secundarias {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.fin-app .assistente-confirmar,
.fin-app .assistente-cancelar {
    min-height: 39px !important;
    background: transparent;
    box-shadow: none;
}

.fin-app .assistente-confirmar {
    border-color: rgba(0, 229, 255, .36);
    color: var(--text-light, #bfc6ff);
}

.fin-app .assistente-cancelar {
    border-color: rgba(191, 198, 255, .16);
    color: rgba(191, 198, 255, .72);
}

.fin-app .assistente-ia-voz,
.fin-app .assistente-ia-audio,
.fin-app .assistente-ia-enviar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--border, #35395c);
    border-radius: 10px;

    background: var(--bg-main, #0f1120);
    color: var(--primary, #00e5ff);

    box-shadow: inset 0 0 0 1px rgba(255,255,255,.012);
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.fin-app .assistente-ia-voz:hover,
.fin-app .assistente-ia-audio:hover,
.fin-app .assistente-ia-enviar:hover {
    border-color: var(--primary, #00e5ff);
    background: rgba(0,229,255,.06);
    transform: translateY(-1px);
}

.fin-app .assistente-ia-audio[aria-pressed="true"] {
    border-color: rgba(0,229,255,.52);
    background: rgba(0,229,255,.07);
}

.fin-app .assistente-ia-voz.ouvindo {
    border-color: #ff6b6b;
    color: #ff6b6b;
    background: rgba(255,107,107,.10);
}

@media (max-width: 900px) {
    .fin-app .assistente-executar {
        min-height: 54px !important;
        font-size: 14px !important;
    }

    .fin-app .assistente-confirmar,
    .fin-app .assistente-cancelar {
        min-height: 42px !important;
        font-size: 12px !important;
    }
}


/* =========================================================
   ASSISTENTE FINCONTROLE V3.4
   Controles de voz alinhados à paleta do Assistente.
   Override final para evitar aparência cinza/nativa.
========================================================= */
.fin-app .assistente-ia-form .assistente-ia-voz,
.fin-app .assistente-ia-form .assistente-ia-audio,
.fin-app .assistente-ia-form .assistente-ia-enviar {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #07101f !important;
    color: #00e5ff !important;
    border: 1px solid #00e5ff !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    opacity: 1 !important;
}

.fin-app .assistente-ia-form .assistente-ia-voz:hover,
.fin-app .assistente-ia-form .assistente-ia-audio:hover,
.fin-app .assistente-ia-form .assistente-ia-enviar:hover {
    background: #10233a !important;
    color: #ffffff !important;
    border-color: #00e5ff !important;
}

.fin-app .assistente-ia-form .assistente-ia-audio[aria-pressed="true"] {
    background: #10233a !important;
    color: #00e5ff !important;
    border-color: #00e5ff !important;
}

.fin-app .assistente-ia-form .assistente-ia-voz.ouvindo {
    background: #10233a !important;
    color: #ffffff !important;
    border-color: #00e5ff !important;
}

.fin-app .assistente-ia-form .assistente-ia-voz:disabled,
.fin-app .assistente-ia-form .assistente-ia-audio:disabled {
    background: #0b1628 !important;
    color: #68758b !important;
    border-color: #26364d !important;
    opacity: .75 !important;
}


/* ===== FATURA DETALHES - MIGRADO V32 ===== */
/* =========================================================
   DETALHE DA FATURA
   Sem data de vencimento e sem "Venceu há X dias"
========================================================= */

.cabecalho-fatura-final,
.linha-fatura-final {
    display: grid !important;
    grid-template-columns:
        minmax(180px, 1.35fr)
        minmax(150px, 1fr)
        80px
        110px
        90px !important;

    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
}

.acao-fatura-final {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.acao-fatura-final .botao-editar-final,
.acao-fatura-final .botao-excluir-final {
    width: 100% !important;
    min-width: 70px !important;
    box-sizing: border-box !important;
}

.botao-excluir-final {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 5px 8px;

    background: transparent;

    border: 1px solid #ff4d4d;
    border-radius: 7px;

    color: #ff4d4d;

    font-family: inherit;
    font-size: 11px;
    font-weight: bold;

    cursor: pointer;
}

@media (max-width: 620px) {

    .cabecalho-fatura-final {
        display: none !important;
    }

    .linha-fatura-final {
        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        gap: 9px 12px !important;
    }

    .descricao-fatura-final,
    .categoria-fatura-final {
        min-width: 0;
    }

    .descricao-fatura-final {
        grid-column: 1 / 2;
    }

    .categoria-fatura-final {
        grid-column: 1 / 2;
    }

    .parcela-fatura-final {
        grid-column: 2;
        grid-row: 1;
    }

    .valor-fatura-final {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
    }

    .acao-fatura-final {
        grid-column: 1 / -1;
        grid-row: auto;

        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 7px;
    }
}


/* ===== REVISAR IA - MIGRADO V32 ===== */
.ia-revisao-card {
            max-width: 720px;

            padding: 22px;

            background:
                var(--bg-card, #1a1d33);

            border:
                1px solid
                var(--border, #35395c);

            border-radius: 12px;
        }

        .ia-revisao-titulo {
            margin-bottom: 18px;
        }

        .ia-revisao-titulo span {
            color:
                var(--primary, #00e5ff);

            font-size: 11px;
            font-weight: 800;
        }

        .ia-revisao-titulo h2 {
            margin: 6px 0;

            color:
                var(--text, #fff);
        }

        .ia-revisao-titulo p {
            color:
                var(--text-light, #bfc6ff);

            font-size: 13px;
            line-height: 1.5;

            white-space: pre-line;
        }

        .ia-revisao-dados {
            display: grid;
            grid-template-columns:
                repeat(2, minmax(0, 1fr));

            gap: 9px;
        }

        .ia-revisao-campo {
            padding: 12px;

            background:
                var(--bg-main, #0f1120);

            border:
                1px solid
                var(--border, #35395c);

            border-radius: 8px;
        }

        .ia-revisao-campo small,
        .ia-revisao-campo strong {
            display: block;
        }

        .ia-revisao-campo small {
            margin-bottom: 5px;

            color:
                var(--text-light, #bfc6ff);

            font-size: 10px;
        }

        .ia-revisao-campo strong {
            color:
                var(--text, #fff);

            font-size: 13px;

            overflow-wrap: anywhere;
        }

        .ia-revisao-acoes {
            display: grid;
            grid-template-columns:
                repeat(2, minmax(0, 1fr));

            gap: 9px;

            margin-top: 18px;
        }

        .ia-revisao-acoes button,
        .ia-revisao-acoes a {
            min-height: 44px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 8px;

            font-family: inherit;
            font-size: 12px;
            font-weight: 800;

            text-decoration: none;

            cursor: pointer;

            box-sizing: border-box;
        }

        .ia-confirmar-revisao {
            background:
                rgba(0, 229, 255, .07);

            border:
                1px solid
                var(--primary, #00e5ff);

            color:
                var(--primary, #00e5ff);
        }

        .ia-cancelar-revisao {
            background:
                transparent;

            border:
                1px solid
                var(--border, #35395c);

            color:
                var(--text-light, #bfc6ff);
        }

        .ia-revisao-status {
            margin-top: 15px;

            padding: 12px;

            border-radius: 8px;

            display: none;

            font-size: 12px;
        }

        .ia-revisao-status.sucesso {
            display: block;

            color:
                var(--success, #00ffb3);

            border:
                1px solid
                rgba(0, 255, 179, .35);

            background:
                rgba(0, 255, 179, .05);
        }

        .ia-revisao-status.erro {
            display: block;

            color: #ff7777;

            border:
                1px solid
                rgba(255, 77, 77, .35);

            background:
                rgba(255, 77, 77, .05);
        }

        @media (
            max-width: 620px
        ) {

            .ia-revisao-dados,
            .ia-revisao-acoes {
                grid-template-columns:
                    1fr;
            }

            .ia-revisao-card {
                padding: 16px;
            }
        }


/* ===== MODAL EXCLUSÃO - MIGRADO V32 ===== */
/* =========================================================
   MODAL EXCLUSÃO DE LANÇAMENTO / PARCELAS
========================================================= */

.modal-exclusao-lancamento {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 16px;

    background: rgba(5, 7, 15, .82);
    backdrop-filter: blur(4px);
}

.modal-exclusao-lancamento.aberto {
    display: flex;
}

.modal-exclusao-card {
    width: min(500px, 100%);

    padding: 22px;

    background: var(--bg-card, #1a1d33);
    border: 1px solid var(--border, #35395c);
    border-radius: 13px;

    box-shadow: 0 22px 60px rgba(0,0,0,.48);
}

.modal-exclusao-card h3 {
    margin: 0 0 8px;

    color: #ff6666;
    font-size: 20px;
}

.modal-exclusao-card p {
    margin: 0;

    color: var(--text-light, #bfc6ff);

    font-size: 13px;
    line-height: 1.55;
}

.modal-exclusao-descricao {
    margin-top: 14px;
    padding: 12px;

    background: var(--bg-main, #0f1120);
    border: 1px solid var(--border, #35395c);
    border-radius: 9px;
}

.modal-exclusao-descricao small {
    display: block;
    margin-bottom: 5px;

    color: var(--text-light, #bfc6ff);
    font-size: 10px;
}

.modal-exclusao-descricao strong {
    color: var(--text, #fff);
    font-size: 13px;
}

.modal-exclusao-parcela-info {
    display: none;

    margin-top: 12px;
    padding: 11px 12px;

    border: 1px solid rgba(255, 200, 87, .35);
    border-radius: 9px;

    background: rgba(255, 200, 87, .04);
    color: #ffd36b;

    font-size: 12px;
    line-height: 1.5;
}

.modal-exclusao-parcela-info.visivel {
    display: block;
}

.modal-exclusao-acoes {
    display: grid;
    gap: 8px;

    margin-top: 16px;
}

.modal-exclusao-acoes.duas {
    grid-template-columns: repeat(2, minmax(0,1fr));
}

.modal-exclusao-acoes.tres {
    grid-template-columns: repeat(3, minmax(0,1fr));
}

.modal-exclusao-acoes button {
    min-height: 44px;

    border-radius: 8px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

.botao-exclusao-cancelar {
    border: 1px solid var(--border, #35395c);
    background: transparent;
    color: var(--text-light, #bfc6ff);
}

.botao-exclusao-atual {
    border: 1px solid #ff6666;
    background: rgba(255, 77, 77, .06);
    color: #ff6666;
}

.botao-exclusao-proximas {
    border: 1px solid #ffc857;
    background: rgba(255, 200, 87, .06);
    color: #ffc857;
}

.modal-exclusao-status {
    display: none;

    margin-top: 12px;
    padding: 11px 12px;

    border-radius: 8px;

    font-size: 12px;
    line-height: 1.45;
}

.modal-exclusao-status.erro {
    display: block;

    color: #ff7777;

    border: 1px solid rgba(255, 77, 77, .35);
    background: rgba(255, 77, 77, .04);
}

.modal-exclusao-status.sucesso {
    display: block;

    color: var(--success, #00ffb3);

    border: 1px solid rgba(0, 255, 179, .35);
    background: rgba(0, 255, 179, .04);
}

@media (max-width: 620px) {

    .modal-exclusao-card {
        padding: 18px;
    }

    .modal-exclusao-card h3 {
        font-size: 21px;
    }

    .modal-exclusao-card p {
        font-size: 14px;
    }

    .modal-exclusao-acoes.duas,
    .modal-exclusao-acoes.tres {
        grid-template-columns: 1fr;
    }

    .modal-exclusao-acoes button {
        min-height: 52px;
        font-size: 13px;
    }
}


/* =========================================================
   FEEDBACK / ERROS PADRONIZADOS V32
========================================================= */
.fin-app .mensagem-erro,
.fin-app .mensagem-sucesso,
.fin-app .mensagem-aviso {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.5;
}
.fin-app .mensagem-erro {
    color: #ff8585;
    background: rgba(255, 77, 77, .06);
    border: 1px solid rgba(255, 77, 77, .34);
}
.fin-app .mensagem-sucesso {
    color: var(--success, #00ffb3);
    background: rgba(0, 255, 179, .05);
    border: 1px solid rgba(0, 255, 179, .30);
}
.fin-app .mensagem-aviso {
    color: #ffd36b;
    background: rgba(255, 200, 87, .05);
    border: 1px solid rgba(255, 200, 87, .30);
}

/* edição simples de categoria */
.fin-app .cadastro-formulario form { max-width: 720px; }
.fin-app .cadastro-formulario input,
.fin-app .cadastro-formulario select { width: 100%; box-sizing: border-box; }


/* =========================================================
   FEEDBACK FLUTUANTE DO DASHBOARD V32
========================================================= */
.fin-app .feedback-dashboard {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 100500;
    width: min(420px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 13px 15px;
    border-radius: 10px;
    background: #0b1425;
    box-shadow: 0 18px 45px rgba(0,0,0,.40);
    font-size: 12px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.fin-app .feedback-dashboard.visivel { opacity: 1; transform: translateY(0); }
.fin-app .feedback-dashboard.erro { color:#ff8585; border:1px solid rgba(255,77,77,.42); }
.fin-app .feedback-dashboard.sucesso { color:var(--success,#00ffb3); border:1px solid rgba(0,255,179,.38); }
@media (max-width:620px){
    .fin-app .feedback-dashboard { left:16px; right:16px; bottom:16px; width:auto; }
}

/* =========================================================
   FINCONTROLE V33 - SELETOR DE ORIGEM MOBILE
   Evita o seletor nativo em tela cheia do Android e mantém
   o <select> original como fonte de dados/POST.
========================================================= */
.fin-app .fc-origem-mobile-trigger,
.fin-app .fc-origem-mobile-overlay {
    display: none;
}

@media (max-width: 760px) {
    body.fin-app.fc-modal-mobile-aberto {
        overflow: hidden !important;
    }

    .fin-app #tourCampoOrigem {
        position: relative;
    }

    .fin-app #origem {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        min-height: 1px !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        clip-path: inset(50%) !important;
        overflow: hidden !important;
    }

    .fin-app .fc-origem-mobile-trigger {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 14px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: var(--bg-main);
        color: var(--text-light);
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        text-align: left;
        cursor: pointer;
        box-sizing: border-box;
    }

    .fin-app .fc-origem-mobile-trigger:focus,
    .fin-app .fc-origem-mobile-trigger:active {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(0,229,255,.10);
    }

    .fin-app .fc-origem-mobile-trigger.preenchido { color: var(--text); }

    .fin-app .fc-origem-mobile-trigger-icone {
        flex: 0 0 auto;
        color: var(--primary);
        font-size: 20px;
        line-height: 1;
        transform: translateY(-2px);
    }

    .fin-app .fc-origem-mobile-overlay {
        position: fixed;
        inset: 0;
        z-index: 40000;
        padding: max(12px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
        align-items: flex-end;
        justify-content: center;
        background: rgba(3,7,16,.78);
        backdrop-filter: blur(4px);
    }

    .fin-app .fc-origem-mobile-overlay.ativo { display: flex; }

    .fin-app .fc-origem-mobile-painel {
        width: min(100%, 560px);
        max-height: min(82dvh, 720px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: var(--bg-card);
        box-shadow: 0 24px 80px rgba(0,0,0,.46);
        animation: fcOrigemMobileEntrar .18s ease-out;
    }

    @keyframes fcOrigemMobileEntrar {
        from { transform: translateY(18px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .fin-app .fc-origem-mobile-topo {
        flex: 0 0 auto;
        min-height: 68px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 14px 12px 16px;
        border-bottom: 1px solid var(--border);
    }

    .fin-app .fc-origem-mobile-topo strong,
    .fin-app .fc-origem-mobile-topo small { display: block; }

    .fin-app .fc-origem-mobile-topo strong {
        color: var(--primary);
        font-size: 15px;
        font-weight: 900;
    }

    .fin-app .fc-origem-mobile-topo small {
        margin-top: 4px;
        color: var(--text-light);
        font-size: 10px;
        line-height: 1.35;
    }

    .fin-app .fc-origem-mobile-fechar {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: rgba(255,255,255,.025);
        color: var(--text-light);
        font: inherit;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }

    .fin-app .fc-origem-mobile-fechar:focus,
    .fin-app .fc-origem-mobile-fechar:active {
        outline: none;
        border-color: var(--primary);
        color: var(--primary);
    }

    .fin-app .fc-origem-mobile-lista {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 8px 10px 14px;
        scrollbar-width: thin;
    }

    .fin-app .fc-origem-mobile-grupo + .fc-origem-mobile-grupo { margin-top: 9px; }

    .fin-app .fc-origem-mobile-grupo-titulo {
        padding: 10px 8px 7px;
        color: var(--text-light);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .fin-app .fc-origem-mobile-item {
        width: 100%;
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 13px;
        border: 1px solid transparent;
        border-bottom-color: var(--border);
        background: transparent;
        color: var(--text);
        font: inherit;
        font-size: 13px;
        font-weight: 800;
        text-align: left;
        cursor: pointer;
    }

    .fin-app .fc-origem-mobile-item:hover,
    .fin-app .fc-origem-mobile-item:focus {
        outline: none;
        border-color: var(--primary);
        background: rgba(0,229,255,.055);
        color: var(--primary);
    }

    .fin-app .fc-origem-mobile-item.selecionado {
        border-color: rgba(0,229,255,.34);
        background: rgba(0,229,255,.075);
        color: var(--primary);
        border-radius: 9px;
    }

    .fin-app .fc-origem-mobile-item.acao {
        margin-top: 6px;
        border: 1px solid rgba(0,229,255,.28);
        border-radius: 9px;
        background: rgba(0,229,255,.045);
        color: var(--primary);
    }

    .fin-app .fc-origem-mobile-item-texto {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fin-app .fc-origem-mobile-item-marca {
        min-width: 24px;
        flex: 0 0 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        font-size: 17px;
        font-weight: 900;
    }
}

/* =========================================================
   ADMIN V35 - LOCALIZAÇÃO APROXIMADA
========================================================= */
.pagina-admin .admin-online-localizacao {
    margin-top: 3px;
    color: var(--primary, #00e5ff);
    opacity: .82;
}

.pagina-admin .admin-localizacao {
    white-space: nowrap;
    color: var(--text-light, #bfc6ff);
    font-size: 10px;
    font-weight: 700;
}



/* =========================================================
   FATURA DETALHADA V44
   Layout consolidado no fincontrole.css.
   Topo fixo + lista compacta responsiva.
========================================================= */

.fin-app #modalFatura .modal-fatura-conteudo {
    width: min(920px, calc(100vw - 28px));
    max-height: min(88vh, 820px);
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

.fin-app #modalFatura .modal-fatura-topo {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    min-height: 62px;
    display: flex;
    align-items: center;
    padding: 14px 58px 14px 18px;
    background: #141729;
    border-bottom: 1px solid var(--border);
}

.fin-app #modalFatura .modal-fatura-topo h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--text);
    font-size: 19px;
    line-height: 1.2;
}

.fin-app #modalFatura .fechar-modal-fatura {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    margin: 0;
}

.fin-app #modalFatura .conteudo-fatura-dashboard {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 14px 0;
    scrollbar-gutter: stable;
}

.fin-app #modalFatura .tabela-fatura-dashboard.fatura-detalhes-final {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin: 0;
}

.fin-app #modalFatura .cabecalho-fatura-final,
.fin-app #modalFatura .linha-fatura-final {
    width: 100% !important;
    display: grid !important;
    grid-template-columns:
        minmax(220px, 1.35fr)
        minmax(170px, 1fr)
        72px
        105px
        86px !important;
    gap: 12px !important;
    align-items: center !important;
}

.fin-app #modalFatura .cabecalho-fatura-final {
    padding: 9px 10px;
    color: var(--primary);
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 8px 8px 0 0;
    font-size: 10px;
    font-weight: 800;
}

.fin-app #modalFatura .cabecalho-fatura-final small {
    display: block;
    margin-top: 2px;
    color: var(--text-light);
    font-size: 8px;
}

.fin-app #modalFatura .linha-fatura-final {
    padding: 10px;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.fin-app #modalFatura .descricao-fatura-final,
.fin-app #modalFatura .categoria-fatura-final {
    min-width: 0;
}

.fin-app #modalFatura .descricao-fatura-final strong,
.fin-app #modalFatura .categoria-fatura-final strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fin-app #modalFatura .descricao-fatura-final strong {
    color: var(--primary);
}

.fin-app #modalFatura .descricao-fatura-final span,
.fin-app #modalFatura .categoria-fatura-final span {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--text-light);
    font-size: 9px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fin-app #modalFatura .parcela-fatura-final {
    color: var(--text-light);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.fin-app #modalFatura .valor-fatura-final {
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.fin-app #modalFatura .acao-fatura-final {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fin-app #modalFatura .botao-editar-final,
.fin-app #modalFatura .botao-excluir-final {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 4px 7px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer;
}

.fin-app #modalFatura .botao-editar-final {
    border: 1px solid var(--primary) !important;
    color: var(--primary) !important;
}

.fin-app #modalFatura .botao-excluir-final {
    border: 1px solid #ff4d4d !important;
    color: #ff6b6b !important;
}

.fin-app #modalFatura .rodape-fatura-dashboard {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 -14px;
    padding: 12px 18px;
    background: #0f1120;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: 0 -8px 18px rgba(0,0,0,.24);
}

.fin-app #modalFatura .rodape-fatura-dashboard span {
    color: var(--text-light);
    font-size: 10px;
    font-weight: 700;
}

.fin-app #modalFatura .rodape-fatura-dashboard strong {
    color: var(--primary);
    font-size: 15px;
}

@media (max-width: 620px) {

    .fin-app #modalFatura {
        align-items: flex-end;
        padding: 0;
    }

    .fin-app #modalFatura .modal-fatura-conteudo {
        width: 100%;
        max-width: none;
        max-height: 92dvh;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        border-radius: 14px 14px 0 0;
    }

    .fin-app #modalFatura .modal-fatura-topo {
        min-height: 56px;
        padding: 12px 54px 12px 14px;
    }

    .fin-app #modalFatura .modal-fatura-topo h2 {
        max-width: 100%;
        overflow: hidden;
        font-size: 15px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fin-app #modalFatura .fechar-modal-fatura {
        right: 12px;
        width: 32px;
        height: 32px;
    }

    .fin-app #modalFatura .conteudo-fatura-dashboard {
        padding: 8px 10px 0;
    }

    .fin-app #modalFatura .cabecalho-fatura-final {
        display: none !important;
    }

    .fin-app #modalFatura .linha-fatura-final {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "descricao parcela"
            "categoria valor"
            "acao acao";
        gap: 5px 10px !important;
        padding: 9px 4px 8px !important;
        background: transparent;
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .fin-app #modalFatura .descricao-fatura-final {
        grid-area: descricao;
    }

    .fin-app #modalFatura .categoria-fatura-final {
        grid-area: categoria;
    }

    .fin-app #modalFatura .parcela-fatura-final {
        grid-area: parcela;
        align-self: start;
        padding-top: 1px;
        text-align: right;
    }

    .fin-app #modalFatura .valor-fatura-final {
        grid-area: valor;
        align-self: start;
        text-align: right;
    }

    .fin-app #modalFatura .acao-fatura-final {
        grid-area: acao;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin-top: 2px;
    }

    .fin-app #modalFatura .descricao-fatura-final strong {
        font-size: 11px;
    }

    .fin-app #modalFatura .categoria-fatura-final strong {
        font-size: 9px;
    }

    .fin-app #modalFatura .descricao-fatura-final span,
    .fin-app #modalFatura .categoria-fatura-final span,
    .fin-app #modalFatura .parcela-fatura-final {
        font-size: 8px;
    }

    .fin-app #modalFatura .valor-fatura-final {
        font-size: 10px;
    }

    .fin-app #modalFatura .botao-editar-final,
    .fin-app #modalFatura .botao-excluir-final {
        min-height: 26px !important;
        padding: 3px 6px !important;
        font-size: 8px !important;
    }

    .fin-app #modalFatura .rodape-fatura-dashboard {
        margin: 0 -10px;
        padding: 10px 14px;
    }
}

@media (max-width: 380px) {

    .fin-app #modalFatura .linha-fatura-final {
        gap: 4px 8px !important;
        padding-top: 8px !important;
        padding-bottom: 7px !important;
    }

    .fin-app #modalFatura .modal-fatura-topo h2 {
        font-size: 14px;
    }
}



/* =========================================================
   EDITAR LANÇAMENTO - ERRO / CANCELAMENTO V45
========================================================= */

.fin-app .erro-edicao-fincontrole {
    width: min(720px, 100%);
    padding: 22px;
    background: var(--bg-card, #1a1d33);
    border: 1px solid var(--border, #35395c);
    border-radius: 12px;
    box-sizing: border-box;
}

.fin-app .erro-edicao-fincontrole h2 {
    margin: 0 0 9px;
    color: var(--text, #fff);
    font-size: 20px;
}

.fin-app .erro-edicao-fincontrole > p {
    margin: 0;
    color: var(--text-light, #bfc6ff);
    font-size: 13px;
    line-height: 1.55;
}

.fin-app .erro-edicao-acoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 18px;
}

.fin-app .erro-edicao-acoes a,
.fin-app .erro-edicao-acoes button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.fin-app .erro-edicao-voltar {
    border: 1px solid var(--primary, #00e5ff);
    color: var(--primary, #00e5ff);
}

.fin-app .erro-edicao-cancelar {
    border: 1px solid #ffb74d;
    color: #ffb74d;
}

.fin-app #erroEdicaoStatus {
    display: none;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 10px;
    line-height: 1.4;
}

.fin-app #erroEdicaoStatus.ok {
    display: block;
    background: rgba(0,255,179,.05);
    border: 1px solid rgba(0,255,179,.35);
    color: var(--success,#00ffb3);
}

.fin-app #erroEdicaoStatus.erro {
    display: block;
    background: rgba(255,77,77,.05);
    border: 1px solid rgba(255,77,77,.35);
    color: #ff7777;
}

.modal-confirmacao-fincontrole {
    position: fixed;
    inset: 0;
    z-index: 32000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(3, 6, 14, .82);
    backdrop-filter: blur(4px);
}

.modal-confirmacao-fincontrole.ativo {
    display: flex;
}

.modal-confirmacao-fincontrole-card {
    width: min(430px, 100%);
    padding: 22px;
    background: #141729;
    border: 1px solid var(--border, #35395c);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

.modal-confirmacao-fincontrole-icone {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,183,77,.55);
    border-radius: 50%;
    background: rgba(255,183,77,.08);
    color: #ffb74d;
    font-size: 17px;
    font-weight: 900;
}

.modal-confirmacao-fincontrole-card h2 {
    margin: 0 0 8px !important;
    color: var(--text, #fff);
    font-size: 18px;
}

.modal-confirmacao-fincontrole-card p {
    margin: 0;
    color: var(--text-light, #bfc6ff);
    font-size: 11px;
    line-height: 1.55;
}

.modal-confirmacao-fincontrole-acoes {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 8px;
    margin-top: 18px;
}

.modal-confirmacao-fincontrole-acoes button {
    min-height: 40px;
    padding: 6px 10px;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}

.modal-confirmacao-secundario {
    border: 1px solid var(--border, #35395c);
    color: var(--text-light, #bfc6ff);
}

.modal-confirmacao-perigo {
    border: 1px solid #ff6b6b;
    color: #ff6b6b;
}

.modal-confirmacao-fincontrole-acoes button:disabled {
    opacity: .55;
    cursor: wait;
}

.fc-meta-confirmacao-resumo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.fc-meta-confirmacao-resumo > div {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--border, #35395c);
    border-radius: 9px;
    background: rgba(7, 19, 38, .72);
}

.fc-meta-confirmacao-resumo span,
.fc-meta-confirmacao-resumo strong {
    display: block;
}

.fc-meta-confirmacao-resumo span {
    margin-bottom: 5px;
    color: var(--text-light, #bfc6ff);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.fc-meta-confirmacao-resumo strong {
    color: var(--text, #fff);
    font-size: 14px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.fc-meta-confirmacao-resultado {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 183, 77, .42);
    border-radius: 9px;
    background: rgba(255, 183, 77, .07);
    color: #ffc46b;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.4;
}

.fc-meta-confirmacao-modal.meta-excedida
.modal-confirmacao-fincontrole-icone,
.fc-meta-confirmacao-modal.meta-excedida
.fc-meta-confirmacao-resultado {
    border-color: rgba(255, 91, 104, .48);
    background: rgba(255, 91, 104, .08);
    color: #ff7380;
}

.fc-meta-confirmacao-continuar {
    border: 1px solid #ffb74d;
    color: #ffbd59;
}

.fc-meta-confirmacao-modal.meta-excedida
.fc-meta-confirmacao-continuar {
    border-color: #ff6b6b;
    color: #ff7373;
}

.fc-meta-confirmacao-continuar:hover,
.fc-meta-confirmacao-continuar:focus-visible,
.modal-confirmacao-secundario:hover,
.modal-confirmacao-secundario:focus-visible {
    background: rgba(255, 255, 255, .045);
    outline: none;
}

body.modal-fincontrole-aberto {
    overflow: hidden;
}

@media (max-width: 620px) {
    .fin-app .erro-edicao-fincontrole {
        padding: 16px;
        border-radius: 10px;
    }

    .fin-app .erro-edicao-fincontrole h2 {
        font-size: 17px;
    }

    .fin-app .erro-edicao-fincontrole > p {
        font-size: 11px;
    }

    .fin-app .erro-edicao-acoes {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .fin-app .erro-edicao-acoes a,
    .fin-app .erro-edicao-acoes button {
        min-height: 38px;
        font-size: 9px;
    }

    .modal-confirmacao-fincontrole {
        align-items: flex-end;
        padding: 0;
    }

    .modal-confirmacao-fincontrole-card {
        width: 100%;
        padding: 18px 16px max(18px, env(safe-area-inset-bottom));
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        border-radius: 16px 16px 0 0;
    }

    .modal-confirmacao-fincontrole-acoes {
        grid-template-columns: 1fr;
    }

    .modal-confirmacao-fincontrole-acoes button {
        min-height: 42px;
    }

    .fc-meta-confirmacao-resumo {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   EDIÇÃO DE LANÇAMENTO MOBILE V46
========================================================= */

.fin-app .seletor-escopo-edicao {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
}

.fin-app .opcao-escopo-edicao {
    min-height: 40px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-main, #0f1120);
    border: 1px solid var(--border, #35395c);
    border-radius: 8px;
    color: var(--text-light, #bfc6ff);
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

.fin-app .opcao-escopo-edicao.ativo {
    border-color: var(--primary, #00e5ff);
    background: rgba(0,229,255,.06);
    color: var(--primary, #00e5ff);
}

.fin-app .acoes-lancamento .botao-limpar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media (max-width: 768px) {

    .fin-app .lancamento-formulario {
        padding: 16px;
    }

    .fin-app .lancamento-formulario .grade-lancamento.grade-2 {
        grid-template-columns: minmax(0, 1.2fr) minmax(110px, .8fr);
        gap: 10px;
        margin-bottom: 14px;
    }

    .fin-app .lancamento-formulario .grade-lancamento.grade-2:nth-of-type(2) {
        grid-template-columns: minmax(0, 1fr) minmax(100px, .65fr);
    }

    .fin-app .lancamento-formulario .campo-lancamento > label {
        margin-bottom: 6px;
        font-size: 12px;
    }

    .fin-app .lancamento-formulario .campo-lancamento input,
    .fin-app .lancamento-formulario .campo-lancamento select {
        height: 42px;
        font-size: 12px;
    }

    .fin-app .campo-escopo-edicao {
        margin-top: 4px;
    }

    .fin-app .seletor-escopo-edicao {
        grid-template-columns: 1fr 1fr;
    }

    .fin-app .opcao-escopo-edicao {
        min-height: 38px;
        font-size: 8px;
        padding: 6px 7px;
    }

    .fin-app .ajuda-campo {
        display: block;
        margin-top: 6px;
        font-size: 9px;
    }

    .fin-app .acoes-lancamento {
        margin-top: 16px !important;
        gap: 8px;
    }

    .fin-app .acoes-lancamento .botao-salvar-lancamento,
    .fin-app .acoes-lancamento .botao-limpar {
        min-height: 42px;
        height: auto;
        width: 100%;
        margin: 0;
    }

    .fin-app .acoes-lancamento .botao-limpar {
        order: 2;
    }

    .fin-app .acoes-lancamento .botao-salvar-lancamento {
        order: 1;
    }
}

@media (max-width: 430px) {

    .fin-app .lancamento-formulario .grade-lancamento.grade-2,
    .fin-app .lancamento-formulario .grade-lancamento.grade-2:nth-of-type(2) {
        grid-template-columns: minmax(0, 1fr) minmax(92px, .72fr);
        gap: 8px;
    }

    .fin-app .lancamento-formulario .campo-lancamento > label {
        font-size: 11px;
    }

    .fin-app .opcao-escopo-edicao {
        font-size: 7.5px;
    }
}

   CANCELAMENTO - STATUS DO MODAL V47
========================================================= */
.modal-confirmacao-status {
    display: none;
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: 7px;
    font-size: 9px;
    line-height: 1.35;
}

.modal-confirmacao-status.processando,
.modal-confirmacao-status.erro,
.modal-confirmacao-status.sucesso {
    display: block;
}

.modal-confirmacao-status.processando {
    border: 1px solid rgba(0,229,255,.28);
    background: rgba(0,229,255,.05);
    color: var(--primary, #00e5ff);
}

.modal-confirmacao-status.erro {
    border: 1px solid rgba(255,77,77,.35);
    background: rgba(255,77,77,.05);
    color: #ff7777;
}

.modal-confirmacao-status.sucesso {
    border: 1px solid rgba(0,255,179,.35);
    background: rgba(0,255,179,.05);
    color: var(--success, #00ffb3);
}


/* =========================================================
   CANCELAMENTO DE DESPESA - POST DIRETO V48
========================================================= */
.modal-confirmacao-fincontrole-card form {
    margin: 0;
}

.modal-confirmacao-fincontrole-card form
.modal-confirmacao-fincontrole-acoes {
    margin-top: 18px;
}

.modal-confirmacao-fincontrole-card
.modal-confirmacao-perigo:disabled {
    opacity: .62;
    cursor: wait;
}


/* =========================================================
   TRAVA DE OPERAÇÕES FINANCEIRAS V49
========================================================= */
.operacao-financeira-bloqueada,
.operacao-financeira-bloqueada:hover {
    opacity: .58 !important;
    cursor: wait !important;
    pointer-events: none !important;
}

#botaoConfirmarPagamento.operacao-financeira-bloqueada,
#confirmarCancelarPagamentoDashboard.operacao-financeira-bloqueada,
#confirmarCancelarFaturaDashboard.operacao-financeira-bloqueada {
    opacity: .72 !important;
}


/* =========================================================
   V50 - SUBMIT FINANCEIRO
   Mantém o primeiro POST válido e bloqueia somente repetição.
========================================================= */
#botaoConfirmarPagamento.operacao-financeira-bloqueada {
    pointer-events: none !important;
}



/* =========================================================
   MOBILE V51 - AÇÕES DOS LANÇAMENTOS
   Pendente: Pagar | Editar | Excluir
   Pago:     Editar | Excluir | Cancelar Pag
========================================================= */
@media (max-width: 800px) {

    .fin-app .linha-lancamento-final .acoes-final {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .fin-app .linha-lancamento-final .acoes-final
    .botao-pagar-final,
    .fin-app .linha-lancamento-final .acoes-final
    .botao-editar-final,
    .fin-app .linha-lancamento-final .acoes-final
    .botao-excluir-final,
    .fin-app .linha-lancamento-final .acoes-final
    .botao-cancelar-final {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 30px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 4px 5px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 6px !important;

        font-size: 8px !important;
        font-weight: 800 !important;
        line-height: 1.05 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 380px) {

    .fin-app .linha-lancamento-final .acoes-final {
        gap: 4px !important;
    }

    .fin-app .linha-lancamento-final .acoes-final
    .botao-pagar-final,
    .fin-app .linha-lancamento-final .acoes-final
    .botao-editar-final,
    .fin-app .linha-lancamento-final .acoes-final
    .botao-excluir-final,
    .fin-app .linha-lancamento-final .acoes-final
    .botao-cancelar-final {
        min-height: 28px !important;
        padding: 3px 3px !important;
        font-size: 7px !important;
    }
}



/* =========================================================
   MOBILE V52 - CORREÇÃO DEFINITIVA DAS 3 AÇÕES
   Sobrescreve as regras antigas específicas do dashboard.
========================================================= */
@media (max-width: 900px) {

    body.fin-app.pagina-dashboard
    .linha-lancamento-final
    .acoes-final {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        gap: 5px !important;

        width: 100% !important;
        min-width: 0 !important;

        flex-direction: unset !important;
        flex-wrap: unset !important;

        align-items: stretch !important;
        justify-content: stretch !important;
    }

    body.fin-app.pagina-dashboard
    .linha-lancamento-final
    .acoes-final > .botao-pagar-final,

    body.fin-app.pagina-dashboard
    .linha-lancamento-final
    .acoes-final > .botao-editar-final,

    body.fin-app.pagina-dashboard
    .linha-lancamento-final
    .acoes-final > .botao-excluir-final,

    body.fin-app.pagina-dashboard
    .linha-lancamento-final
    .acoes-final > .botao-cancelar-final {
        grid-column: auto !important;
        grid-row: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        min-height: 30px !important;
        height: 30px !important;

        margin: 0 !important;
        padding: 3px 4px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        font-size: 8px !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 430px) {

    body.fin-app.pagina-dashboard
    .linha-lancamento-final
    .acoes-final {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    body.fin-app.pagina-dashboard
    .linha-lancamento-final
    .acoes-final > .botao-pagar-final,

    body.fin-app.pagina-dashboard
    .linha-lancamento-final
    .acoes-final > .botao-editar-final,

    body.fin-app.pagina-dashboard
    .linha-lancamento-final
    .acoes-final > .botao-excluir-final,

    body.fin-app.pagina-dashboard
    .linha-lancamento-final
    .acoes-final > .botao-cancelar-final {
        min-height: 29px !important;
        height: 29px !important;
        min-width: 0 !important;
        padding: 3px 2px !important;
        font-size: 7.5px !important;
    }
}



/* =========================================================
   TRANSFERÊNCIAS ENTRE CONTAS V55
   Layout responsivo + exclusão sem confirm nativo
========================================================= */

body.fin-app.pagina-dashboard
.modal-transferencia-fincontrole
.modal-transferencia-conteudo {
    width: min(650px, calc(100vw - 28px));
}

body.fin-app.pagina-dashboard
.modal-transferencia-fincontrole
.grade-transferencia-contas,
body.fin-app.pagina-dashboard
.modal-transferencia-fincontrole
.grade-transferencia-dados {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.fin-app.pagina-dashboard
.modal-transferencia-fincontrole
.campo-dashboard {
    min-width: 0 !important;
}

body.fin-app.pagina-dashboard
.modal-transferencia-fincontrole
.campo-dashboard select,
body.fin-app.pagina-dashboard
.modal-transferencia-fincontrole
.campo-dashboard input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body.fin-app.pagina-dashboard
.modal-transferencia-fincontrole
.acoes-modal-transferencia {
    display: grid !important;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
    gap: 8px !important;
}

body.fin-app.pagina-dashboard
.modal-transferencia-fincontrole
.acoes-modal-transferencia
.botao-cancelar-dashboard,
body.fin-app.pagina-dashboard
.modal-transferencia-fincontrole
.acoes-modal-transferencia
.botao-confirmar-dashboard {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}


/* LISTA DE TRANSFERÊNCIAS */
@media (max-width: 620px) {

    body.fin-app.pagina-dashboard
    .linha-transferencia-dashboard {
        grid-template-columns: 50px minmax(0, 1fr) !important;
        grid-template-areas:
            "data origem"
            "data destino"
            "data valor"
            "acoes acoes" !important;

        gap: 5px 9px !important;

        min-height: 0 !important;
        padding: 9px !important;
    }

    body.fin-app.pagina-dashboard
    .data-transferencia-dashboard {
        width: 48px !important;
        height: 48px !important;
        align-self: start !important;
    }

    body.fin-app.pagina-dashboard
    .data-transferencia-dashboard strong {
        font-size: 17px !important;
    }

    body.fin-app.pagina-dashboard
    .conta-transferencia-dashboard {
        gap: 2px !important;
    }

    body.fin-app.pagina-dashboard
    .transferencia-label {
        font-size: 8px !important;
    }

    body.fin-app.pagina-dashboard
    .conta-transferencia-dashboard strong {
        font-size: 11px !important;
    }

    body.fin-app.pagina-dashboard
    .valor-transferencia-dashboard {
        text-align: left !important;
    }

    body.fin-app.pagina-dashboard
    .valor-transferencia-dashboard strong {
        font-size: 12px !important;
    }

    body.fin-app.pagina-dashboard
    .acoes-transferencia-dashboard {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
        width: 100% !important;
    }

    body.fin-app.pagina-dashboard
    .acoes-transferencia-dashboard
    .botao-editar-final,
    body.fin-app.pagina-dashboard
    .acoes-transferencia-dashboard
    .botao-excluir-final {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 29px !important;
        height: 29px !important;
        margin: 0 !important;
        padding: 3px 5px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 8px !important;
        line-height: 1 !important;
        text-align: center !important;
    }


    /* MODAL DE TRANSFERÊNCIA */
    body.fin-app.pagina-dashboard
    .modal-transferencia-fincontrole {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    body.fin-app.pagina-dashboard
    .modal-transferencia-fincontrole
    .modal-transferencia-conteudo {
        width: 100% !important;
        max-width: none !important;

        padding: 18px 14px max(16px, env(safe-area-inset-bottom)) !important;

        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;

        border-radius: 14px 14px 0 0 !important;
    }

    body.fin-app.pagina-dashboard
    .modal-transferencia-fincontrole
    .modal-transferencia-conteudo h2 {
        margin-right: 38px !important;
        margin-bottom: 5px !important;
        font-size: 17px !important;
    }

    body.fin-app.pagina-dashboard
    .modal-transferencia-fincontrole
    .descricao-modal-dashboard {
        margin-bottom: 12px !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
    }

    body.fin-app.pagina-dashboard
    .modal-transferencia-fincontrole
    .grade-transferencia-contas {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    body.fin-app.pagina-dashboard
    .modal-transferencia-fincontrole
    .grade-transferencia-dados {
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
        gap: 7px !important;
    }

    body.fin-app.pagina-dashboard
    .modal-transferencia-fincontrole
    .campo-dashboard label {
        margin-bottom: 5px !important;
        font-size: 9px !important;
    }

    body.fin-app.pagina-dashboard
    .modal-transferencia-fincontrole
    .campo-dashboard select,
    body.fin-app.pagina-dashboard
    .modal-transferencia-fincontrole
    .campo-dashboard input {
        height: 40px !important;
        min-height: 40px !important;
        padding: 5px 7px !important;
        font-size: 10px !important;
    }

    body.fin-app.pagina-dashboard
    .modal-transferencia-fincontrole
    .acoes-modal-transferencia {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
        gap: 7px !important;
        margin-top: 13px !important;
    }

    body.fin-app.pagina-dashboard
    .modal-transferencia-fincontrole
    .acoes-modal-transferencia
    .botao-cancelar-dashboard,
    body.fin-app.pagina-dashboard
    .modal-transferencia-fincontrole
    .acoes-modal-transferencia
    .botao-confirmar-dashboard {
        min-height: 40px !important;
        height: 40px !important;
        padding: 5px 7px !important;
        font-size: 9px !important;
    }
}


/* MODAL DE EXCLUSÃO DE TRANSFERÊNCIA */
.modal-excluir-transferencia-card {
    width: min(440px, 100%) !important;
}

.resumo-excluir-transferencia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    gap: 7px;
    align-items: center;

    margin-top: 14px;
    padding: 10px;

    background: var(--bg-main, #0f1120);
    border: 1px solid var(--border, #35395c);
    border-radius: 9px;
}

.resumo-excluir-transferencia > div {
    min-width: 0;
}

.resumo-excluir-transferencia span:not(.seta-excluir-transferencia) {
    display: block;

    color: var(--text-light, #bfc6ff);

    font-size: 8px;
    font-weight: 800;
}

.resumo-excluir-transferencia strong {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color: var(--text, #fff);

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.resumo-excluir-transferencia > div:first-child strong {
    color: #ffb74d;
}

.resumo-excluir-transferencia > div:last-child strong {
    color: var(--success, #00ffb3);
}

.seta-excluir-transferencia {
    color: var(--primary, #00e5ff);
    font-size: 16px;
    font-weight: 900;
    text-align: center;
}

@media (max-width: 430px) {

    .modal-excluir-transferencia-card {
        width: 100% !important;
    }

    .resumo-excluir-transferencia {
        grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
        gap: 5px;
        padding: 8px;
    }

    .resumo-excluir-transferencia strong {
        font-size: 9px;
    }
}



/* =========================================================
   V56 - PADRONIZAÇÃO MOBILE: LANÇAMENTOS x CADASTROS
   Somente telas até 620px.
========================================================= */
@media (max-width: 620px) {

    /* Mantém o mesmo peso visual dos cadastros no mobile */
    body.fin-app .lancamento-formulario
    .campo-lancamento > label,
    body.fin-app .lancamento-formulario
    .campo-lancamento label {
        font-size: 13px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
    }

    body.fin-app .lancamento-formulario
    .campo-lancamento input,
    body.fin-app .lancamento-formulario
    .campo-lancamento select,
    body.fin-app .lancamento-formulario
    .campo-moeda {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    body.fin-app .lancamento-formulario
    .tipo-opcao,
    body.fin-app .lancamento-formulario
    .tipo-opcao span {
        font-size: 12px !important;
    }

    body.fin-app .lancamento-formulario
    .ajuda-campo,
    body.fin-app .lancamento-formulario
    small,
    body.fin-app .lancamento-formulario
    .habito-aplicado,
    body.fin-app .lancamento-formulario
    .sugestao-descricao-meta {
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    body.fin-app .lancamento-formulario
    .sugestao-descricao-nome {
        font-size: 13px !important;
    }

    body.fin-app .lancamento-formulario
    .botao-salvar-lancamento,
    body.fin-app .lancamento-formulario
    .botao-limpar,
    body.fin-app .lancamento-formulario
    button {
        font-size: 11px;
    }

    /*
     * Regra antiga abaixo de 430px reduzia o label para 11px.
     * Esta regra fica por último e mantém a leitura igual
     * em celulares estreitos.
     */
    body.fin-app .lancamento-formulario
    .campo-lancamento > label {
        font-size: 13px !important;
    }
}


/* =========================================================
   V56 - PLACEHOLDER DE IMAGEM DOS CADASTROS
   Reserva o espaço sem parecer imagem quebrada.
========================================================= */

.fc-imagem-reservada {
    position: relative;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    background:
        linear-gradient(
            135deg,
            rgba(0,229,255,.035),
            rgba(185,200,223,.025)
        );

    border: 1px dashed rgba(141,165,196,.26);
    border-radius: 8px;

    color: rgba(185,200,223,.34);
}

.fc-imagem-reservada::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 25%,
            rgba(255,255,255,.025) 50%,
            transparent 75%
        );

    pointer-events: none;
}

.fc-imagem-reservada-icone {
    position: relative;
    z-index: 1;

    opacity: .42;

    font-size: 16px;
    line-height: 1;

    filter: grayscale(1);
}

.fc-imagem-reservada-texto {
    position: relative;
    z-index: 1;

    margin-left: 6px;

    color: rgba(185,200,223,.42);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .2px;
    text-transform: uppercase;
}


/* Cadastro de conta */
body.fin-app .icone-banco.fc-imagem-reservada,
body.fin-app .fc-placeholder-banco {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
}


/* Cadastro de cartão: instituição + bandeira */
body.fin-app .cartao-logos-duplos
.fc-placeholder-instituicao {
    width: 42px;
    height: 32px;
}

body.fin-app .cartao-logos-duplos
.fc-placeholder-bandeira {
    width: 58px;
    height: 34px;
}


/* Preview no formulário de cartão */
body.fin-app .fc-preview-imagem-placeholder {
    display: none;
    width: 86px;
    height: 42px;
    margin-top: 9px;
}

body.fin-app .fc-preview-imagem-placeholder.ativo {
    display: inline-flex;
}


/*
 * Uma imagem que falhou é escondida pelo JS/onerror.
 * O espaço reservado aparece no lugar.
 */
body.fin-app img.fc-imagem-com-fallback.fc-imagem-falhou {
    display: none !important;
}


@media (max-width: 620px) {

    body.fin-app .fc-imagem-reservada {
        border-color: rgba(141,165,196,.22);
        background:
            linear-gradient(
                135deg,
                rgba(0,229,255,.03),
                rgba(185,200,223,.018)
            );
    }

    body.fin-app .fc-imagem-reservada-texto {
        font-size: 7px;
    }
}



/* =========================================================
   V57 - CORREÇÃO DO FALLBACK DE LOGOS DO CARTÃO
========================================================= */

/*
 * O atributo hidden precisa vencer regras antigas que usam
 * display:flex/block !important nos previews e containers.
 */
body.fin-app .fc-imagem-reservada[hidden],
body.fin-app #previewInstituicaoCartao[hidden],
body.fin-app #previewBandeira[hidden] {
    display: none !important;
}


/* Placeholder usado SOMENTE quando a prévia falhar */
body.fin-app .fc-preview-cartao-placeholder {
    width: 85px;
    height: 85px;
    min-width: 85px;
    min-height: 85px;

    margin-top: 0;

    box-sizing: border-box;
}


/*
 * Na lista de cartões, se a imagem real carregou,
 * qualquer reserva marcada hidden permanece invisível.
 */
body.fin-app .cartao-logos-duplos
.fc-imagem-reservada[hidden] {
    display: none !important;
}


/*
 * Evita o quadro branco com ícone de imagem quebrada no formulário.
 */
body.fin-app #previewInstituicaoCartao,
body.fin-app #previewBandeira {
    font-size: 0;
}

@media (max-width: 620px) {

    body.fin-app .fc-preview-cartao-placeholder {
        width: 76px;
        height: 76px;
        min-width: 76px;
        min-height: 76px;
    }
}



/* =========================================================
   V58 - CORREÇÃO DO FALLBACK DE LOGOS DA CONTA
========================================================= */

/*
 * Algumas regras antigas do cadastro de conta usam
 * display:block !important na prévia. O hidden precisa vencer.
 */
body.fin-app #preview_icone[hidden],
body.fin-app #placeholder_icone[hidden],
body.fin-app .lista-contas .fc-imagem-reservada[hidden] {
    display: none !important;
}


/* Placeholder do preview do formulário */
body.fin-app .fc-preview-conta-placeholder {
    width: 85px;
    height: 85px;
    min-width: 85px;
    min-height: 85px;

    padding: 7px;

    box-sizing: border-box;
}


/*
 * Se a logo real carregar, o placeholder da lista fica
 * totalmente oculto e não ocupa espaço.
 */
body.fin-app .lista-contas
img.icone-banco:not(.fc-imagem-falhou)
+
.fc-imagem-reservada[hidden] {
    display: none !important;
}


/* Nunca deixa o ícone quebrado do navegador visível */
body.fin-app #preview_icone {
    font-size: 0;
}

@media (max-width: 620px) {

    body.fin-app .fc-preview-conta-placeholder {
        width: 76px;
        height: 76px;
        min-width: 76px;
        min-height: 76px;
    }
}



/* =========================================================
   V59 - CABEÇALHO UNIFICADO + TUTORIAL
   Título à esquerda / Tutorial à direita.
========================================================= */

body.fin-app .fc-pagina-cabecalho {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    margin: 0 0 18px;
}

body.fin-app .fc-pagina-cabecalho-texto {
    min-width: 0;
    flex: 1 1 auto;
}

body.fin-app .fc-pagina-cabecalho h1 {
    margin: 0 0 5px !important;
}

body.fin-app .fc-pagina-cabecalho .descricao-pagina {
    margin: 0 !important;
}

/* O Tutorial ocupa sempre o lado oposto ao título. */
body.fin-app .fc-pagina-cabecalho
.botao-aprender-modulo {
    flex: 0 0 auto !important;
    margin: 0 0 0 auto !important;
    align-self: flex-start !important;
}

/*
 * Dashboard: primeira linha = título + Tutorial.
 * Período continua disponível logo abaixo, alinhado à direita.
 */
body.fin-app.pagina-dashboard
.dashboard-cabecalho {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
}

body.fin-app.pagina-dashboard
.dashboard-cabecalho
.fc-pagina-cabecalho {
    margin-bottom: 0 !important;
}

body.fin-app.pagina-dashboard
.dashboard-cabecalho
.seletor-periodo-dashboard {
    align-self: flex-end !important;
    margin-left: 0 !important;
}

/*
 * Regras antigas do Aprender não podem reposicionar o botão
 * quando ele estiver dentro do cabeçalho V59.
 */
body.fin-app .fc-pagina-cabecalho
.botao-aprender-modulo {
    order: initial !important;
    position: static !important;
    width: auto !important;
}


/* Badges antigos do topo deixam de fazer parte do padrão. */
body.fin-app .fc-cadastro-badge,
body.fin-app .fc-lancamento-badge {
    display: none !important;
}


@media (max-width: 620px) {

    body.fin-app .fc-pagina-cabecalho {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;

        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    body.fin-app .fc-pagina-cabecalho-texto {
        min-width: 0 !important;
    }

    body.fin-app .fc-pagina-cabecalho h1 {
        font-size: 26px !important;
        line-height: 1.08 !important;
    }

    body.fin-app .fc-pagina-cabecalho
    .descricao-pagina {
        margin-top: 4px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    body.fin-app .fc-pagina-cabecalho
    .botao-aprender-modulo {
        min-height: 34px !important;
        height: 34px !important;

        padding: 0 9px !important;
        margin: 0 !important;

        justify-self: end !important;

        font-size: 9px !important;
        gap: 5px !important;
    }

    body.fin-app .fc-pagina-cabecalho
    .botao-aprender-modulo
    .aprender-icone {
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
    }

    body.fin-app.pagina-dashboard
    .dashboard-cabecalho {
        gap: 6px !important;
    }

    body.fin-app.pagina-dashboard
    .dashboard-cabecalho
    .seletor-periodo-dashboard {
        align-self: stretch !important;
        width: 100% !important;
        margin: 0 !important;
    }
}


@media (max-width: 390px) {

    body.fin-app .fc-pagina-cabecalho {
        gap: 6px !important;
    }

    body.fin-app .fc-pagina-cabecalho h1 {
        font-size: 23px !important;
    }

    body.fin-app .fc-pagina-cabecalho
    .botao-aprender-modulo {
        padding: 0 7px !important;
        font-size: 8px !important;
    }
}


/* =========================================================
   V76.12 - QUATRO GRAFICOS DO DASHBOARD
   Ordem: compras, vencimentos, recebimentos e comparativo.
========================================================= */

@media (min-width: 761px) {

    body.fin-app.pagina-dashboard
    #dashboardGraficos
    .dashboard-graficos-grade {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    body.fin-app.pagina-dashboard
    #dashboardGraficos
    .dashboard-grafico-comparativo {
        grid-column: auto !important;
    }

    body.fin-app.pagina-dashboard
    #dashboardGraficos
    .dashboard-grafico-comparativo
    .dashboard-grafico-corpo {
        display: grid !important;
        grid-template-columns:
            auto minmax(230px, 1fr) !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 20px !important;
    }
}


@media (min-width: 761px) and (max-width: 1050px) {

    body.fin-app.pagina-dashboard
    #dashboardGraficos
    .dashboard-grafico-comparativo
    .dashboard-grafico-corpo {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   V76.11 - SETAS INTERNAS DA QUANTIDADE DE PARCELAS
========================================================= */

.fin-app .controle-parcelas-mobile {
    width: 100%;
}

.fin-app .controle-parcelas-botao {
    display: none;
}

@media (max-width: 620px) {

    /*
     * Mantém Parcelas, Categoria e Subcategoria nas três colunas
     * originais. As setas passam a fazer parte do próprio campo.
     */
    body.fin-app
    .conteudo
    .lancamento-formulario
    #formLancamento
    .grade-lancamento.grade-3.grade-lancamento-classificacao {
        grid-template-columns:
            minmax(62px, .65fr)
            minmax(0, 1.15fr)
            minmax(0, 1.15fr) !important;
    }

    body.fin-app
    .conteudo
    .lancamento-formulario
    #formLancamento
    #tourCampoParcelas {
        grid-column: auto !important;
    }

    body.fin-app
    #tourCampoParcelas
    .controle-parcelas-mobile {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 44px !important;
    }

    body.fin-app
    #tourCampoParcelas
    .controle-parcelas-botao {
        position: absolute !important;
        right: 1px !important;
        z-index: 3 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 28px !important;
        min-width: 28px !important;
        height: 21px !important;
        min-height: 21px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        border-left: 1px solid var(--border) !important;
        border-radius: 0 !important;

        background: rgba(0, 229, 255, .035) !important;
        color: var(--primary) !important;

        font-size: 9px !important;
        font-weight: 900 !important;
        line-height: 1 !important;

        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent;
    }

    body.fin-app
    #tourCampoParcelas
    #aumentarParcelas {
        top: 1px !important;
        border-bottom: 1px solid var(--border) !important;
        border-radius: 0 7px 0 0 !important;
    }

    body.fin-app
    #tourCampoParcelas
    #diminuirParcelas {
        bottom: 1px !important;
        border-radius: 0 0 7px 0 !important;
    }

    body.fin-app
    #tourCampoParcelas
    .controle-parcelas-botao:active {
        background: rgba(0, 229, 255, .10) !important;
    }

    body.fin-app
    #tourCampoParcelas
    #repetir {
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 32px 0 6px !important;
        text-align: center !important;
        -moz-appearance: textfield !important;
        appearance: textfield !important;
    }

    body.fin-app
    #tourCampoParcelas
    #repetir::-webkit-inner-spin-button,

    body.fin-app
    #tourCampoParcelas
    #repetir::-webkit-outer-spin-button {
        margin: 0 !important;
        -webkit-appearance: none !important;
    }
}


/* =========================================================
   APORTES FIXOS MENSAIS - V76
========================================================= */

.fin-app .aportes-fixos-investimentos,
body.fin-app.pagina-dashboard .aportes-fixos-dashboard{
    width:100%;
    max-width:100%;
    min-width:0;
    margin-top:22px;
    padding:20px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(5,14,31,.35);
    box-sizing:border-box;
    overflow:hidden;
}

.fin-app .aportes-fixos-investimentos-topo,
body.fin-app.pagina-dashboard .aportes-fixos-dashboard-topo{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.fin-app .aportes-fixos-investimentos-topo h2,
.fin-app .aportes-fixos-investimentos-topo p{
    margin:0;
}

.fin-app .aportes-fixos-investimentos-topo p,
body.fin-app.pagina-dashboard .aportes-fixos-dashboard-topo span{
    display:block;
    margin-top:6px;
    color:var(--text-light);
    font-size:12px;
    line-height:1.5;
}

.fin-app .grade-aportes-fixos-investimentos{
    display:grid;
    grid-template-columns:minmax(260px,300px) minmax(0,1fr);
    gap:18px;
}

.fin-app .aporte-fixo-formulario{
    min-width:0;
}

.fin-app .aporte-fixo-formulario h3,
.fin-app .aportes-fixos-pendencias h3{
    margin:0 0 12px;
}

.fin-app .aportes-fixos-pendencias{
    min-width:0;
}

.fin-app .lista-aportes-fixos-investimentos,
.fin-app .lista-planos-aportes-fixos,
body.fin-app.pagina-dashboard .lista-aportes-fixos-dashboard{
    display:grid;
    gap:10px;
}

.fin-app .lista-planos-aportes-fixos{
    margin-top:18px;
}

.fin-app .aporte-fixo-investimento-item,
.fin-app .plano-aporte-fixo-item{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:
        "descricao status valor"
        "confirmar confirmar confirmar";
    align-items:center;
    gap:12px;
    padding:13px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--bg-card);
}

.fin-app .plano-aporte-fixo-item{
    grid-template-columns:minmax(220px,1fr) auto auto;
    grid-template-areas:none;
}

.fin-app .aporte-fixo-investimento-item>div:first-child{
    min-width:0;
    grid-area:descricao;
}

.fin-app .aporte-fixo-investimento-item>.aporte-fixo-status{
    grid-area:status;
}

.fin-app .aporte-fixo-investimento-item>.aporte-fixo-investimento-valor{
    grid-area:valor;
}

.fin-app .aporte-fixo-investimento-item>div:first-child span,
.fin-app .plano-aporte-fixo-item>div:first-child span{
    display:block;
    margin-top:4px;
    color:var(--text-light);
    font-size:10px;
}

.fin-app .aporte-fixo-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:26px;
    padding:0 9px;
    border:1px solid var(--border);
    border-radius:999px;
    font-size:9px;
    font-weight:800;
}

.fin-app .aporte-fixo-status-vencido{
    border-color:#ff5c70;
    color:#ff5c70;
}

.fin-app .aporte-fixo-status-hoje{
    border-color:#ffbd4a;
    color:#ffbd4a;
}

.fin-app .aporte-fixo-status-pendente{
    border-color:var(--primary);
    color:var(--primary);
}

.fin-app .aporte-fixo-status-encerrado{
    color:var(--text-light);
}

.fin-app .aporte-fixo-investimento-valor,
body.fin-app.pagina-dashboard .aporte-fixo-dashboard-valor,
body.fin-app.pagina-dashboard .aportes-fixos-dashboard-total{
    color:var(--primary);
    white-space:nowrap;
}

.fin-app .aporte-fixo-confirmar-form{
    display:grid;
    grid-template-columns:118px minmax(120px,1fr) auto;
    grid-area:confirmar;
    width:min(100%,370px);
    justify-self:end;
    gap:7px;
    margin:0;
}

.fin-app .aporte-fixo-confirmar-form input,
.fin-app .aporte-fixo-confirmar-form button,
body.fin-app.pagina-dashboard .aporte-fixo-dashboard-confirmar input,
body.fin-app.pagina-dashboard .aporte-fixo-dashboard-confirmar button{
    min-height:34px;
    border:1px solid var(--border);
    border-radius:7px;
    background:transparent;
    color:var(--text);
    font-family:inherit;
    font-size:10px;
}

.fin-app .aporte-fixo-confirmar-form button,
body.fin-app.pagina-dashboard .aporte-fixo-dashboard-confirmar button{
    border-color:var(--primary);
    color:var(--primary);
    font-weight:800;
    cursor:pointer;
}

.fin-app .aporte-fixo-confirmar-form .botao-excluir-aporte-pendente,
body.fin-app.pagina-dashboard .aporte-fixo-dashboard-confirmar .botao-excluir-aporte-pendente{
    padding:0 10px;
    border-color:#ff5c70;
    color:#ff5c70;
}

.fin-app .movimento-aporte-fixo-badge{
    display:inline-flex;
    margin-top:6px;
    padding:3px 7px;
    border:1px solid var(--primary);
    border-radius:999px;
    color:var(--primary);
    font-size:8px;
    font-weight:800;
}

body.fin-app.pagina-dashboard .aporte-dashboard-mensagem{
    margin:0 0 12px;
}

body.fin-app.pagina-dashboard .aporte-fixo-dashboard-item{
    display:grid;
    grid-template-columns:52px minmax(180px,1fr) auto 120px minmax(235px,auto);
    align-items:center;
    gap:12px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--bg-card);
}

body.fin-app.pagina-dashboard .aporte-fixo-dashboard-data{
    display:grid;
    text-align:center;
}

body.fin-app.pagina-dashboard .aporte-fixo-dashboard-data strong{
    color:var(--primary);
    font-size:20px;
}

body.fin-app.pagina-dashboard .aporte-fixo-dashboard-data span,
body.fin-app.pagina-dashboard .aporte-fixo-dashboard-descricao span{
    color:var(--text-light);
    font-size:9px;
}

body.fin-app.pagina-dashboard .aporte-fixo-dashboard-descricao{
    display:grid;
    min-width:0;
    gap:4px;
}

body.fin-app.pagina-dashboard .aporte-fixo-dashboard-confirmar{
    display:grid;
    grid-template-columns:118px 90px auto;
    gap:7px;
    margin:0;
}

@media(max-width:980px){
    .fin-app .grade-aportes-fixos-investimentos{
        grid-template-columns:1fr;
    }

    .fin-app .aporte-fixo-investimento-item,
    .fin-app .plano-aporte-fixo-item,
    body.fin-app.pagina-dashboard .aporte-fixo-dashboard-item{
        grid-template-columns:1fr;
        grid-template-areas:none;
    }

    .fin-app .aporte-fixo-investimento-item>div:first-child,
    .fin-app .aporte-fixo-investimento-item>.aporte-fixo-status,
    .fin-app .aporte-fixo-investimento-item>.aporte-fixo-investimento-valor,
    .fin-app .aporte-fixo-confirmar-form{
        grid-area:auto;
    }

    .fin-app .aporte-fixo-confirmar-form,
    body.fin-app.pagina-dashboard .aporte-fixo-dashboard-confirmar{
        grid-template-columns:1fr 1fr;
        width:100%;
        justify-self:stretch;
    }

    body.fin-app.pagina-dashboard .aporte-fixo-dashboard-data{
        display:flex;
        align-items:baseline;
        gap:5px;
        text-align:left;
    }
}

@media(max-width:560px){
    .fin-app .aportes-fixos-investimentos,
    body.fin-app.pagina-dashboard .aportes-fixos-dashboard{
        padding:14px;
    }

    .fin-app .aporte-fixo-confirmar-form,
    body.fin-app.pagina-dashboard .aporte-fixo-dashboard-confirmar{
        grid-template-columns:1fr;
    }
}



/* =========================================================
   V60 - MODAL GLOBAL / BALÕES DO FINCONTROLE
========================================================= */

#modalGlobalFinControle
.modal-confirmacao-fincontrole-card {
    width: min(430px, 100%);
}

#modalGlobalFinControleMensagem {
    white-space: pre-line;
}

#modalGlobalFinControleAcoes.somente-ok {
    grid-template-columns: 1fr !important;
}

#modalGlobalFinControleAcoes.somente-ok
#modalGlobalFinControleConfirmar {
    width: 100%;
}


/* =========================================================
   V60 - LANÇAMENTO MOBILE x ASSISTENTE IA
   Mantém Salvar/Limpar lado a lado, acima do botão flutuante.
========================================================= */
@media (max-width: 620px) {

    body.fin-app
    .lancamento-formulario
    #formLancamento
    .acoes-lancamento {
        position: relative !important;

        margin-bottom: 78px !important;

        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 0 !important;
    }

    body.fin-app
    .lancamento-formulario
    #formLancamento
    .acoes-lancamento
    .botao-salvar-lancamento,

    body.fin-app
    .lancamento-formulario
    #formLancamento
    .acoes-lancamento
    .botao-limpar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;

        position: relative !important;
        z-index: 1 !important;
    }

    /*
     * A área inferior vazia pertence visualmente ao Assistente.
     * O círculo deixa de cobrir o botão Limpar.
     */
    body.fin-app
    .lancamento-formulario {
        padding-bottom: 14px !important;
    }
}



/* =========================================================
   V65 - SELECT MOBILE PADRÃO CONTA/CARTÃO
   Reutiliza o mesmo visual do seletor de origem aprovado.
   Sem MutationObserver; somente campos marcados.
========================================================= */

@media (max-width: 760px) {

    body.fin-app
    select.fc-select-padrao-original {
        position: absolute !important;

        width: 1px !important;
        height: 1px !important;

        min-width: 1px !important;
        min-height: 1px !important;

        padding: 0 !important;
        margin: 0 !important;

        opacity: 0 !important;

        pointer-events: none !important;

        clip-path: inset(50%) !important;

        overflow: hidden !important;
    }


    body.fin-app
    .fc-select-padrao-trigger {
        display: flex !important;
    }


    body.fin-app
    .fc-select-padrao-trigger:disabled {
        opacity: .46 !important;
        cursor: not-allowed !important;
    }


    body.fin-app
    .fc-select-padrao-trigger
    .fc-origem-mobile-trigger-texto {
        min-width: 0;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;
    }


    body.fin-app
    .fc-select-padrao-overlay {
        z-index: 45000;
    }
}



/* =========================================================
   V66 - CADASTRO DE CONTA / CARDS MOBILE
   Corrige logo, textos e ações das contas cadastradas.
========================================================= */
@media (max-width: 620px) {

    body.fin-app
    .lista-contas
    .fc-lista-head {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 10px !important;

        margin-bottom: 10px !important;
    }

    body.fin-app
    .lista-contas
    .fc-lista-head h2 {
        margin: 0 !important;

        font-size: 22px !important;
        line-height: 1.08 !important;
    }

    body.fin-app
    .lista-contas
    .fc-lista-contador {
        max-width: 42% !important;

        font-size: 9px !important;
        line-height: 1.25 !important;
        text-align: right !important;
    }


    /* CARD */
    body.fin-app
    .lista-contas
    .conta-item.cartao-item {
        width: 100% !important;

        display: block !important;

        min-height: 0 !important;

        padding: 12px !important;
        margin: 0 0 10px !important;

        box-sizing: border-box !important;
    }


    /* LOGO + INFORMAÇÕES */
    body.fin-app
    .lista-contas
    .conta-info.cartao-info {
        width: 100% !important;
        min-width: 0 !important;

        display: grid !important;

        grid-template-columns:
            58px
            minmax(0, 1fr) !important;

        align-items: start !important;

        gap: 10px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body.fin-app
    .lista-contas
    .conta-info.cartao-info > div:last-child {
        min-width: 0 !important;
    }


    /* LOGO REAL OU PLACEHOLDER */
    body.fin-app
    .lista-contas
    .conta-info
    .icone-banco {
        grid-column: 1 !important;

        width: 58px !important;
        height: 58px !important;

        min-width: 58px !important;
        min-height: 58px !important;

        max-width: 58px !important;
        max-height: 58px !important;

        margin: 0 !important;
        padding: 5px !important;

        align-self: start !important;

        box-sizing: border-box !important;

        object-fit: contain !important;

        border-radius: 9px !important;
    }


    body.fin-app
    .lista-contas
    .conta-info
    img.icone-banco {
        background: #ffffff !important;
    }


    body.fin-app
    .lista-contas
    .conta-info
    .fc-placeholder-banco {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        background:
            rgba(255,255,255,.045) !important;

        border:
            1px dashed
            rgba(191,198,255,.24) !important;
    }


    body.fin-app
    .lista-contas
    .conta-info
    .fc-placeholder-banco[hidden] {
        display: none !important;
    }


    /* NOME */
    body.fin-app
    .lista-contas
    .conta-nome {
        width: 100% !important;

        margin: 1px 0 5px !important;

        color:
            var(--text, #ffffff) !important;

        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }


    /* DETALHES EM LINHAS PRÓPRIAS */
    body.fin-app
    .lista-contas
    .conta-detalhes {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 3px !important;

        margin: 0 !important;

        color:
            var(--text-light, #bfc6ff) !important;

        font-size: 10px !important;
        line-height: 1.35 !important;

        white-space: normal !important;
    }


    body.fin-app
    .lista-contas
    .conta-detalhes > span {
        display: block !important;

        min-width: 0 !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }


    body.fin-app
    .lista-contas
    .conta-detalhe-rotulo {
        color:
            var(--text-light, #bfc6ff) !important;
    }


    body.fin-app
    .lista-contas
    .conta-detalhe-saldo strong {
        margin-left: 3px !important;

        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;

        white-space: normal !important;
    }


    body.fin-app
    .lista-contas
    .conta-detalhe-ate {
        opacity: .82 !important;
    }


    /* EDITAR + EXCLUIR IGUAIS */
    body.fin-app
    .lista-contas
    .acoes-conta.cartao-info {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 7px !important;

        margin-top: 11px !important;
        padding: 0 !important;

        align-items: stretch !important;
    }


    body.fin-app
    .lista-contas
    .acoes-conta.cartao-info
    > form {
        width: 100% !important;

        display: block !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body.fin-app
    .lista-contas
    .botao-editar-conta,

    body.fin-app
    .lista-contas
    .acoes-conta
    .botao-excluir {
        width: 100% !important;

        min-width: 0 !important;
        max-width: none !important;

        min-height: 36px !important;
        height: 36px !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 8px !important;

        box-sizing: border-box !important;

        border-radius: 7px !important;

        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1 !important;

        text-align: center !important;
        text-decoration: none !important;
    }


    /*
     * Reserva espaço para o Assistente no final da lista,
     * sem cobrir a última conta.
     */
    body.fin-app
    .lista-contas {
        padding-bottom: 68px !important;
    }
}


/* Celulares bem estreitos */
@media (max-width: 390px) {

    body.fin-app
    .lista-contas
    .conta-info.cartao-info {
        grid-template-columns:
            52px
            minmax(0, 1fr) !important;

        gap: 9px !important;
    }

    body.fin-app
    .lista-contas
    .conta-info
    .icone-banco {
        width: 52px !important;
        height: 52px !important;

        min-width: 52px !important;
        min-height: 52px !important;

        max-width: 52px !important;
        max-height: 52px !important;
    }
}


/* V76.16 - prioridades finais da tabela expansível */
body.fin-app .relatorios-fincontrole .tabela-relatorio-fixa tbody .linha-categoria-relatorio td,
body.fin-app .relatorios-fincontrole .tabela-relatorio-meses tbody .linha-categoria-relatorio td{
    background: rgba(0, 229, 255, .045) !important;
    border-top-color: rgba(0, 229, 255, .22) !important;
}

body.fin-app .relatorios-fincontrole .tabela-relatorio-fixa tbody .linha-categoria-relatorio.linha-relatorio-impar td,
body.fin-app .relatorios-fincontrole .tabela-relatorio-meses tbody .linha-categoria-relatorio.linha-relatorio-impar td{
    background: rgba(24, 33, 57, .9) !important;
}

body.fin-app .relatorios-fincontrole .tabela-relatorio-fixa tbody .linha-categoria-relatorio:hover td,
body.fin-app .relatorios-fincontrole .tabela-relatorio-meses tbody .linha-categoria-relatorio:hover td,
body.fin-app .relatorios-fincontrole .tabela-relatorio-fixa tbody .linha-categoria-relatorio.aberta td,
body.fin-app .relatorios-fincontrole .tabela-relatorio-meses tbody .linha-categoria-relatorio.aberta td{
    background: rgba(0, 229, 255, .095) !important;
}

body.fin-app .relatorios-fincontrole .tabela-relatorio-fixa tbody .linha-subcategoria-relatorio td,
body.fin-app .relatorios-fincontrole .tabela-relatorio-meses tbody .linha-subcategoria-relatorio td{
    background: rgba(7, 12, 28, .58) !important;
    color: var(--text-light) !important;
    font-weight: 500 !important;
}

body.fin-app .relatorios-fincontrole .tabela-relatorio-fixa tbody .linha-subcategoria-relatorio.linha-relatorio-impar td,
body.fin-app .relatorios-fincontrole .tabela-relatorio-meses tbody .linha-subcategoria-relatorio.linha-relatorio-impar td{
    background: rgba(13, 20, 38, .78) !important;
}

body.fin-app .relatorios-fincontrole .tabela-relatorio-fixa tbody .linha-subcategoria-relatorio:hover td,
body.fin-app .relatorios-fincontrole .tabela-relatorio-meses tbody .linha-subcategoria-relatorio:hover td{
    background: rgba(0, 229, 255, .045) !important;
}


/* V76.17 - destaque do total geral no rodapé */
body.fin-app .relatorios-fincontrole .tabela-relatorio-fixa tfoot td,
body.fin-app .relatorios-fincontrole .tabela-relatorio-meses tfoot td{
    height: 46px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    background: linear-gradient(
        180deg,
        rgba(0, 229, 255, .12),
        rgba(0, 229, 255, .055)
    ) !important;
    border-top: 2px solid var(--primary) !important;
    border-bottom: 0 !important;
    color: var(--text) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    vertical-align: middle !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

body.fin-app .relatorios-fincontrole .tabela-relatorio-fixa tfoot td{
    color: var(--primary) !important;
    text-align: left !important;
    letter-spacing: .45px;
}

body.fin-app .relatorios-fincontrole .tabela-relatorio-meses tfoot td{
    text-align: right !important;
}

body.fin-app .relatorios-fincontrole .tabela-relatorio-meses tfoot .coluna-total-meses{
    background: linear-gradient(
        180deg,
        rgba(0, 240, 181, .16),
        rgba(0, 240, 181, .07)
    ) !important;
    border-left: 1px solid rgba(0, 240, 181, .28) !important;
    color: var(--success) !important;
    font-size: 12px !important;
}

@media (max-width: 620px){
    body.fin-app .relatorios-fincontrole .tabela-relatorio-fixa tfoot td,
    body.fin-app .relatorios-fincontrole .tabela-relatorio-meses tfoot td{
        height: 44px !important;
        padding: 0 9px !important;
        font-size: 10px !important;
    }

    body.fin-app .relatorios-fincontrole .tabela-relatorio-meses tfoot .coluna-total-meses{
        font-size: 11px !important;
    }
}


/* =========================================================
   V76.20 - AGRUPAMENTO DO DASHBOARD POR MÊS E DATA
========================================================= */

body.fin-app.pagina-dashboard .separador-mes-dashboard,
body.fin-app.pagina-dashboard .separador-data-dashboard{
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-sizing: border-box;
}

body.fin-app.pagina-dashboard .separador-mes-dashboard{
    min-height: 48px;
    margin: 16px 0 8px;
    padding: 9px 13px;
    background: linear-gradient(
        90deg,
        rgba(0, 229, 255, .105),
        rgba(0, 229, 255, .025)
    );
    border: 1px solid rgba(0, 229, 255, .28);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
}

body.fin-app.pagina-dashboard .separador-mes-dashboard.mes-anterior{
    background: linear-gradient(
        90deg,
        rgba(255, 91, 104, .105),
        rgba(255, 91, 104, .02)
    );
    border-color: rgba(255, 91, 104, .28);
    border-left-color: var(--danger);
}

body.fin-app.pagina-dashboard .separador-mes-dashboard > div:first-child,
body.fin-app.pagina-dashboard .separador-data-dashboard > div:first-child{
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

body.fin-app.pagina-dashboard .separador-mes-dashboard > div:first-child{
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

body.fin-app.pagina-dashboard .separador-mes-dashboard > div:first-child strong{
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .35px;
}

body.fin-app.pagina-dashboard .separador-mes-dashboard > div:first-child span{
    color: var(--primary);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .45px;
}

body.fin-app.pagina-dashboard .separador-mes-dashboard.mes-anterior > div:first-child span{
    color: #ff7d89;
}

body.fin-app.pagina-dashboard .separador-data-dashboard{
    min-height: 34px;
    margin: 8px 0 0;
    padding: 6px 12px;
    background: rgba(7, 18, 37, .72);
    border-top: 1px solid rgba(0, 229, 255, .2);
    border-bottom: 1px solid rgba(0, 229, 255, .11);
}

body.fin-app.pagina-dashboard .separador-data-dashboard > div:first-child strong{
    color: var(--primary);
    font-size: 10px;
    font-weight: 900;
}

body.fin-app.pagina-dashboard .separador-data-dashboard > div:first-child span{
    color: var(--text-light);
    font-size: 8px;
    font-weight: 700;
}

body.fin-app.pagina-dashboard .separador-dashboard-resumo{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
    text-align: right;
    white-space: nowrap;
}

body.fin-app.pagina-dashboard .separador-dashboard-resumo span{
    color: var(--text-light);
    font-size: 9px;
}

body.fin-app.pagina-dashboard .separador-dashboard-resumo strong{
    color: var(--primary);
    font-size: 10px;
    font-weight: 900;
}

body.fin-app.pagina-dashboard .separador-mes-dashboard .separador-dashboard-resumo strong{
    font-size: 12px;
}

body.fin-app.pagina-dashboard .lista-vencimentos-dashboard > .separador-data-dashboard + .linha-lancamento-final{
    border-top-color: rgba(0, 229, 255, .2) !important;
}

body.fin-app.pagina-dashboard .lista-aportes-fixos-dashboard .separador-mes-dashboard,
body.fin-app.pagina-dashboard .lista-aportes-fixos-dashboard .separador-data-dashboard{
    margin-top: 2px;
}

@media (max-width: 620px){
    body.fin-app.pagina-dashboard .separador-mes-dashboard{
        min-height: 44px;
        margin-top: 12px;
        padding: 8px 10px;
    }

    body.fin-app.pagina-dashboard .separador-data-dashboard{
        min-height: 32px;
        padding: 6px 9px;
    }

    body.fin-app.pagina-dashboard .separador-mes-dashboard > div:first-child strong{
        font-size: 11px;
    }

    body.fin-app.pagina-dashboard .separador-dashboard-resumo{
        gap: 7px;
    }

    body.fin-app.pagina-dashboard .separador-dashboard-resumo span{
        font-size: 8px;
    }

    body.fin-app.pagina-dashboard .separador-dashboard-resumo strong,
    body.fin-app.pagina-dashboard .separador-mes-dashboard .separador-dashboard-resumo strong{
        font-size: 10px;
    }
}

@media (max-width: 390px){
    body.fin-app.pagina-dashboard .separador-mes-dashboard,
    body.fin-app.pagina-dashboard .separador-data-dashboard{
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    body.fin-app.pagina-dashboard .separador-dashboard-resumo{
        width: 100%;
        justify-content: space-between;
        text-align: left;
    }
}


/* =========================================================
   V76.21 - LANÇAMENTOS COMUNS COM CARTÃO COMPACTO NO DESKTOP
   Replica o padrão visual dos aportes sem alterar o mobile.
========================================================= */

@media (min-width: 901px){
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final{
        min-height: 72px !important;
        margin: 0 0 9px !important;
        padding: 8px 12px !important;
        border: 1px solid var(--border) !important;
        border-radius: 10px !important;
        background: var(--bg-card) !important;
        box-sizing: border-box !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final{
        width: 52px !important;
        min-height: 48px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final strong{
        font-size: 20px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final span{
        margin-top: 2px !important;
        font-size: 8px !important;
        font-weight: 800 !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .coluna-principal-final{
        gap: 4px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .coluna-principal-final strong{
        font-size: 12px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .coluna-principal-final span{
        color: var(--text-light) !important;
        font-size: 9px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .status-final .badge-status{
        min-width: 76px !important;
        min-height: 26px !important;
        padding: 4px 7px !important;
        font-size: 9px !important;
        box-sizing: border-box !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .valor-final{
        color: var(--primary) !important;
        text-align: right !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .valor-final strong{
        color: var(--primary) !important;
        font-size: 13px !important;
        font-weight: 900 !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final{
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        flex-direction: unset !important;
        flex-wrap: unset !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-pagar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-editar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-excluir-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-cancelar-final{
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 3px 5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 7px !important;
        box-sizing: border-box !important;
        font-size: 8px !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-final{
        min-width: 0 !important;
        line-height: 1 !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-vencido-numero,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-falta-numero{
        margin: 2px 0 !important;
        font-size: 17px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-vencido-texto,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-falta-texto,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-hoje-final{
        font-size: 8px !important;
    }
}

/* Desktop intermediário: duas linhas compactas, sem perder dados. */
@media (min-width: 1101px) and (max-width: 1450px){
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard{
        display: none !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final{
        grid-template-columns:
            58px
            minmax(160px, 1.15fr)
            minmax(145px, .95fr)
            minmax(88px, .55fr)
            minmax(215px, 1.15fr) !important;
        grid-template-areas:
            "data lancamento categoria status valor"
            "data lancamento dias acoes acoes" !important;
        column-gap: 9px !important;
        row-gap: 6px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final{ grid-area: data !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .coluna-principal-final:not(.categoria-final){ grid-area: lancamento !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .categoria-final{ grid-area: categoria !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .status-final{ grid-area: status !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .valor-final{ grid-area: valor !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final{ grid-area: acoes !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-final{ grid-area: dias !important; }
}

/* Desktop amplo: uma única linha, como nos aportes fixos. */
@media (min-width: 1451px){
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final{
        grid-template-columns:
            62px
            minmax(165px, 1.25fr)
            minmax(150px, 1fr)
            86px
            105px
            minmax(255px, 1.25fr)
            78px !important;
        gap: 10px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard{
        display: grid !important;
        min-height: 36px !important;
        margin-bottom: 8px !important;
        padding: 7px 12px !important;
        border: 1px solid var(--border) !important;
        border-radius: 8px !important;
        background: rgba(7, 18, 37, .72) !important;
        font-size: 9px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard small{
        margin-top: 2px !important;
        font-size: 8px !important;
    }
}


/* =========================================================
   V76.23 - ALINHAMENTO FINAL DOS LANÇAMENTOS NO DESKTOP
   Pontas simétricas, status antes do valor e valor branco.
========================================================= */

@media (min-width: 901px){
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-final{
        width: 72px !important;
        min-height: 58px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        justify-self: center !important;
        padding: 0 !important;
        text-align: center !important;
        line-height: 1 !important;
    }

    /* SET / 08 / TER: o mesmo desenho vertical da coluna final. */
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final strong{
        order: 2 !important;
        margin: 3px 0 !important;
        font-size: 28px !important;
        line-height: .9 !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final span:first-of-type{
        order: 1 !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final span:last-of-type{
        order: 3 !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final span,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-vencido-texto,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-falta-texto,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-hoje-final{
        margin: 0 !important;
        font-size: 9px !important;
        line-height: 1 !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-vencido-numero,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-falta-numero{
        margin: 3px 0 !important;
        font-size: 28px !important;
        line-height: .9 !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .coluna-principal-final{
        align-self: center !important;
        justify-content: center !important;
        padding-top: 0 !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .status-final{
        justify-self: end !important;
        justify-content: flex-end !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .valor-final{
        color: var(--text) !important;
        justify-self: end !important;
        text-align: right !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .valor-final strong{
        color: var(--text) !important;
    }
}

/* Desktop menor: duas linhas, mantendo STATUS -> VALOR -> AÇÕES. */
@media (min-width: 901px) and (max-width: 1250px){
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final{
        grid-template-columns:
            72px
            minmax(110px, 1fr)
            76px
            90px
            minmax(150px, 1fr) !important;
        grid-template-areas:
            "data lancamento categoria categoria dias"
            "data lancamento status valor acoes" !important;
        column-gap: 8px !important;
        row-gap: 6px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final{ grid-area: data !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .coluna-principal-final:not(.categoria-final){ grid-area: lancamento !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .categoria-final{ grid-area: categoria !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .status-final{ grid-area: status !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .valor-final{ grid-area: valor !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final{
        grid-area: acoes !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: none !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-pagar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-editar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-excluir-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-cancelar-final{
        width: 100% !important;
        font-size: 7px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-final{ grid-area: dias !important; }
}

/* Notebook e desktop: uma linha totalmente alinhada. */
@media (min-width: 1251px){
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final{
        grid-template-areas:
            "data lancamento categoria status valor acoes dias" !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final{ grid-area: data !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .coluna-principal-final:not(.categoria-final){ grid-area: lancamento !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .categoria-final{ grid-area: categoria !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .status-final{ grid-area: status !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .valor-final{ grid-area: valor !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final{ grid-area: acoes !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-final{ grid-area: dias !important; }
}

@media (min-width: 1251px) and (max-width: 1450px){
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final{
        grid-template-columns:
            72px
            minmax(135px, 1.1fr)
            minmax(115px, .9fr)
            76px
            90px
            180px
            74px !important;
        gap: 8px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final{
        grid-template-columns: repeat(3, 56px) !important;
        max-width: 178px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-pagar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-editar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-excluir-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-cancelar-final{
        width: 56px !important;
        padding-right: 2px !important;
        padding-left: 2px !important;
        font-size: 7px !important;
    }
}

@media (min-width: 1451px){
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final{
        grid-template-columns:
            72px
            minmax(150px, 1.2fr)
            minmax(135px, 1fr)
            80px
            95px
            210px
            74px !important;
        grid-template-areas:
            "data lancamento categoria status valor acoes dias" !important;
        gap: 10px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final{
        grid-template-columns: repeat(3, 66px) !important;
        max-width: 208px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-pagar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-editar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-excluir-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-cancelar-final{
        width: 66px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard > div:nth-child(1){ grid-area: data !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard > div:nth-child(2){ grid-area: lancamento !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard > div:nth-child(3){ grid-area: categoria !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard > div:nth-child(4){ grid-area: status !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard > div:nth-child(5){ grid-area: valor !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard > div:nth-child(6){ grid-area: acoes !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard > div:nth-child(7){ grid-area: dias !important; }
}


/* =========================================================
   V76.24 - PRIORIDADE FINAL DO CARTÃO DE LANÇAMENTO
   Mantido obrigatoriamente após todas as regras anteriores.
========================================================= */

@media (min-width: 901px){
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .data-lancamento-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .dias-final{
        width: 72px !important;
        min-height: 58px !important;
        align-self: center !important;
        justify-self: center !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .data-lancamento-final strong{
        order: 2 !important;
        margin: 3px 0 !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .data-lancamento-final span:first-of-type{ order: 1 !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .data-lancamento-final span:last-of-type{ order: 3 !important; }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .coluna-principal-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .coluna-principal-final.categoria-final{
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        display: grid !important;
        grid-template-rows: 15px 12px !important;
        align-content: center !important;
        align-items: start !important;
        align-self: center !important;
        justify-content: stretch !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .coluna-principal-final strong,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .coluna-principal-final span{
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.1 !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .status-final{
        align-self: center !important;
        justify-self: end !important;
        justify-content: flex-end !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .valor-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .valor-final strong{
        color: var(--text) !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final{
        display: grid !important;
        grid-template-columns: repeat(3, 50px) !important;
        gap: 5px !important;
        width: auto !important;
        max-width: 160px !important;
        align-self: center !important;
        justify-self: start !important;
        justify-content: start !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-pagar-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-editar-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-excluir-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-cancelar-final{
        grid-column: auto !important;
        grid-row: auto !important;
        width: 50px !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 29px !important;
        height: 29px !important;
        margin: 0 !important;
        padding: 2px !important;
        font-size: 7px !important;
        line-height: 1 !important;
        white-space: normal !important;
    }
}

@media (min-width: 901px) and (max-width: 1250px){
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .linha-lancamento-final{
        grid-template-columns: 72px minmax(110px, 1fr) 76px 90px minmax(150px, 1fr) !important;
        grid-template-areas:
            "data lancamento categoria categoria dias"
            "data lancamento status valor acoes" !important;
        column-gap: 8px !important;
        row-gap: 6px !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .data-lancamento-final{ grid-area: data !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .coluna-principal-final:not(.categoria-final){ grid-area: lancamento !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .categoria-final{ grid-area: categoria !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .status-final{ grid-area: status !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .valor-final{ grid-area: valor !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final{ grid-area: acoes !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .dias-final{ grid-area: dias !important; }
}

@media (min-width: 1251px){
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .linha-lancamento-final{
        grid-template-areas: "data lancamento categoria status valor acoes dias" !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .data-lancamento-final{ grid-area: data !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .coluna-principal-final:not(.categoria-final){ grid-area: lancamento !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .categoria-final{ grid-area: categoria !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .status-final{ grid-area: status !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .valor-final{ grid-area: valor !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final{ grid-area: acoes !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .dias-final{ grid-area: dias !important; }
}

@media (min-width: 1251px) and (max-width: 1450px){
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .linha-lancamento-final{
        grid-template-columns: 72px minmax(145px, 1.15fr) minmax(125px, .95fr) 76px 90px 160px 74px !important;
        gap: 8px !important;
    }
}

@media (min-width: 1451px){
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .linha-lancamento-final{
        grid-template-columns: 72px minmax(160px, 1.25fr) minmax(145px, 1fr) 80px 95px 160px 74px !important;
        grid-template-areas: "data lancamento categoria status valor acoes dias" !important;
        gap: 10px !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(1){ grid-area: data !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(2){ grid-area: lancamento !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(3){ grid-area: categoria !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(4){ grid-area: status !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(5){ grid-area: valor !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(6){ grid-area: acoes !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(7){ grid-area: dias !important; }
}


/* =========================================================
   V76.24 - CORREÇÃO DEFINITIVA DO ALINHAMENTO DOS CARTÕES
   Esta regra fica no final do arquivo para não ser anulada.
========================================================= */

@media (min-width: 901px){
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final{
        min-height: 76px !important;
        align-items: center !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-final{
        width: 72px !important;
        min-height: 58px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        justify-self: center !important;
        padding: 0 !important;
        text-align: center !important;
        line-height: 1 !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final strong{
        order: 2 !important;
        margin: 3px 0 !important;
        font-size: 28px !important;
        line-height: .9 !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final span:first-of-type{ order: 1 !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final span:last-of-type{ order: 3 !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final span,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-vencido-texto,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-falta-texto,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-hoje-final{
        margin: 0 !important;
        font-size: 9px !important;
        line-height: 1 !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-vencido-numero,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-falta-numero{
        margin: 3px 0 !important;
        font-size: 28px !important;
        line-height: .9 !important;
    }

    /* Os dois blocos passam a usar exatamente a mesma grade interna. */
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .coluna-principal-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .coluna-principal-final.categoria-final{
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        display: grid !important;
        grid-template-rows: 15px 12px !important;
        align-content: center !important;
        align-items: start !important;
        align-self: center !important;
        justify-content: stretch !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .coluna-principal-final strong,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .coluna-principal-final span{
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.1 !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .status-final{
        align-self: center !important;
        justify-self: end !important;
        justify-content: flex-end !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .valor-final{
        align-self: center !important;
        justify-self: end !important;
        color: var(--text) !important;
        text-align: right !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .valor-final strong{
        color: var(--text) !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final{
        display: grid !important;
        grid-template-columns: repeat(3, 50px) !important;
        gap: 5px !important;
        width: auto !important;
        max-width: 160px !important;
        align-self: center !important;
        justify-self: start !important;
        justify-content: start !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-pagar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-editar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-excluir-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-cancelar-final{
        grid-column: auto !important;
        grid-row: auto !important;
        width: 50px !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 29px !important;
        height: 29px !important;
        margin: 0 !important;
        padding: 2px !important;
        font-size: 7px !important;
        line-height: 1 !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 901px) and (max-width: 1250px){
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final{
        grid-template-columns:
            72px
            minmax(110px, 1fr)
            76px
            90px
            minmax(150px, 1fr) !important;
        grid-template-areas:
            "data lancamento categoria categoria dias"
            "data lancamento status valor acoes" !important;
        column-gap: 8px !important;
        row-gap: 6px !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .data-lancamento-final{ grid-area: data !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .coluna-principal-final:not(.categoria-final){ grid-area: lancamento !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .categoria-final{ grid-area: categoria !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .status-final{ grid-area: status !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .valor-final{ grid-area: valor !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final{ grid-area: acoes !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .dias-final{ grid-area: dias !important; }
}

@media (min-width: 1251px){
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final{
        grid-template-areas:
            "data lancamento categoria status valor acoes dias" !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .data-lancamento-final{ grid-area: data !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .coluna-principal-final:not(.categoria-final){ grid-area: lancamento !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .categoria-final{ grid-area: categoria !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .status-final{ grid-area: status !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .valor-final{ grid-area: valor !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final{ grid-area: acoes !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .dias-final{ grid-area: dias !important; }
}

@media (min-width: 1251px) and (max-width: 1450px){
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final{
        grid-template-columns:
            72px
            minmax(145px, 1.15fr)
            minmax(125px, .95fr)
            76px
            90px
            160px
            74px !important;
        gap: 8px !important;
    }
}

@media (min-width: 1451px){
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final{
        grid-template-columns:
            72px
            minmax(160px, 1.25fr)
            minmax(145px, 1fr)
            80px
            95px
            160px
            74px !important;
        grid-template-areas:
            "data lancamento categoria status valor acoes dias" !important;
        gap: 10px !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(1){ grid-area: data !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(2){ grid-area: lancamento !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(3){ grid-area: categoria !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(4){ grid-area: status !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(5){ grid-area: valor !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(6){ grid-area: acoes !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(7){ grid-area: dias !important; }
}


/* =========================================================
   V76.22 - REFINAMENTO DOS LANÇAMENTOS COMUNS NO DESKTOP
   Data maior, colunas alinhadas, status junto das ações e
   contagem de dias na última coluna.
========================================================= */

@media (min-width: 901px){
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final{
        min-height: 76px !important;
        align-items: center !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final{
        width: 68px !important;
        min-height: 56px !important;
        align-self: center !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final strong{
        font-size: 28px !important;
        line-height: .95 !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final span{
        margin-top: 3px !important;
        font-size: 9px !important;
        line-height: 1 !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .coluna-principal-final{
        align-self: start !important;
        justify-content: flex-start !important;
        padding-top: 3px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .status-final{
        justify-content: flex-end !important;
        align-self: center !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .valor-final{
        align-self: center !important;
        justify-self: end !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final{
        grid-template-columns: repeat(3, 76px) !important;
        gap: 5px !important;
        width: auto !important;
        max-width: 238px !important;
        justify-self: start !important;
        justify-content: start !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-pagar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-editar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-excluir-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-cancelar-final{
        width: 76px !important;
        min-height: 30px !important;
        height: 30px !important;
        padding: 3px 4px !important;
        font-size: 8px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-cancelar-final{
        white-space: normal !important;
        line-height: 1.05 !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-final{
        width: 74px !important;
        justify-self: end !important;
        align-self: center !important;
        overflow: visible !important;
    }
}

/* Desktop menor: mantém tudo compacto em duas linhas. */
@media (min-width: 901px) and (max-width: 1100px){
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final{
        grid-template-columns:
            72px
            minmax(125px, 1fr)
            80px
            minmax(220px, 1.15fr) !important;
        grid-template-areas:
            "data lancamento valor dias"
            "data categoria status acoes" !important;
        column-gap: 8px !important;
        row-gap: 6px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final{ grid-area: data !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .coluna-principal-final:not(.categoria-final){ grid-area: lancamento !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .categoria-final{ grid-area: categoria !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .status-final{ grid-area: status !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .valor-final{ grid-area: valor !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final{
        grid-area: acoes !important;
        grid-template-columns: repeat(3, 68px) !important;
        max-width: 214px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-pagar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-editar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-excluir-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-cancelar-final{
        width: 68px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-final{ grid-area: dias !important; }
}

/* Desktop intermediário: descrição e categoria começam na mesma altura. */
@media (min-width: 1101px) and (max-width: 1450px){
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final{
        grid-template-columns:
            72px
            minmax(150px, 1.1fr)
            minmax(130px, .9fr)
            104px
            minmax(248px, 1.15fr) !important;
        grid-template-areas:
            "data lancamento categoria valor dias"
            "data lancamento status acoes acoes" !important;
        column-gap: 9px !important;
        row-gap: 6px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final{ grid-area: data !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .coluna-principal-final:not(.categoria-final){ grid-area: lancamento !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .categoria-final{ grid-area: categoria !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .status-final{ grid-area: status !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .valor-final{ grid-area: valor !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final{ grid-area: acoes !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-final{ grid-area: dias !important; }
}

/* Desktop amplo: status imediatamente antes dos botões e prazo no final. */
@media (min-width: 1451px){
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final{
        grid-template-columns:
            72px
            minmax(150px, 1.2fr)
            minmax(135px, 1fr)
            105px
            80px
            240px
            74px !important;
        grid-template-areas:
            "data lancamento categoria valor status acoes dias" !important;
        gap: 10px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .data-lancamento-final{ grid-area: data !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .coluna-principal-final:not(.categoria-final){ grid-area: lancamento !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .categoria-final{ grid-area: categoria !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .status-final{ grid-area: status !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .valor-final{ grid-area: valor !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final{ grid-area: acoes !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .dias-final{ grid-area: dias !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard > div:nth-child(1){ grid-area: data !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard > div:nth-child(2){ grid-area: lancamento !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard > div:nth-child(3){ grid-area: categoria !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard > div:nth-child(4){ grid-area: status !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard > div:nth-child(5){ grid-area: valor !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard > div:nth-child(6){ grid-area: acoes !important; }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .cabecalho-lancamentos-dashboard > div:nth-child(7){ grid-area: dias !important; }
}


/* =========================================================
   V76.24 - ÚLTIMA REGRA DO ARQUIVO
   Centraliza descrição/categoria e compacta as ações.
========================================================= */

@media (min-width: 901px){
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .data-lancamento-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .dias-final{
        width: 72px !important;
        min-height: 58px !important;
        align-self: center !important;
        justify-self: center !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .data-lancamento-final strong{
        order: 2 !important;
        margin: 3px 0 !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .data-lancamento-final span:first-of-type{ order: 1 !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .data-lancamento-final span:last-of-type{ order: 3 !important; }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .coluna-principal-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .coluna-principal-final.categoria-final{
        width: 100% !important;
        height: 36px !important;
        min-height: 36px !important;
        display: grid !important;
        grid-template-rows: 15px 12px !important;
        align-content: center !important;
        align-items: start !important;
        align-self: center !important;
        justify-content: stretch !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .coluna-principal-final strong,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .coluna-principal-final span{
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.1 !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .status-final{
        align-self: center !important;
        justify-self: end !important;
        justify-content: flex-end !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .valor-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .valor-final strong{
        color: var(--text) !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final{
        display: grid !important;
        grid-template-columns: repeat(3, 50px) !important;
        gap: 5px !important;
        width: auto !important;
        max-width: 160px !important;
        align-self: center !important;
        justify-self: start !important;
        justify-content: start !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-pagar-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-editar-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-excluir-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-cancelar-final{
        grid-column: auto !important;
        grid-row: auto !important;
        width: 50px !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 29px !important;
        height: 29px !important;
        margin: 0 !important;
        padding: 2px !important;
        font-size: 7px !important;
        line-height: 1 !important;
        white-space: normal !important;
    }
}

@media (min-width: 901px) and (max-width: 1250px){
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .linha-lancamento-final{
        grid-template-columns: 72px minmax(110px, 1fr) 76px 90px minmax(150px, 1fr) !important;
        grid-template-areas:
            "data lancamento categoria categoria dias"
            "data lancamento status valor acoes" !important;
        column-gap: 8px !important;
        row-gap: 6px !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .data-lancamento-final{ grid-area: data !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .coluna-principal-final:not(.categoria-final){ grid-area: lancamento !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .categoria-final{ grid-area: categoria !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .status-final{ grid-area: status !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .valor-final{ grid-area: valor !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final{ grid-area: acoes !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .dias-final{ grid-area: dias !important; }
}

@media (min-width: 1251px){
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .linha-lancamento-final{
        grid-template-areas: "data lancamento categoria status valor acoes dias" !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .data-lancamento-final{ grid-area: data !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .coluna-principal-final:not(.categoria-final){ grid-area: lancamento !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .categoria-final{ grid-area: categoria !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .status-final{ grid-area: status !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .valor-final{ grid-area: valor !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final{ grid-area: acoes !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .dias-final{ grid-area: dias !important; }
}

@media (min-width: 1251px) and (max-width: 1450px){
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .linha-lancamento-final{
        grid-template-columns: 72px minmax(145px, 1.15fr) minmax(125px, .95fr) 76px 90px 160px 74px !important;
        gap: 8px !important;
    }
}

@media (min-width: 1451px){
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .linha-lancamento-final{
        grid-template-columns: 72px minmax(160px, 1.25fr) minmax(145px, 1fr) 80px 95px 160px 74px !important;
        grid-template-areas: "data lancamento categoria status valor acoes dias" !important;
        gap: 10px !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(1){ grid-area: data !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(2){ grid-area: lancamento !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(3){ grid-area: categoria !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(4){ grid-area: status !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(5){ grid-area: valor !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(6){ grid-area: acoes !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(7){ grid-area: dias !important; }
}


/* =========================================================
   V94 - GRÁFICOS COMPACTOS + DETALHE EM TELA CHEIA
========================================================= */
body.fin-app.pagina-dashboard .dashboard-grafico-acoes-compacto{display:flex;justify-content:flex-end;margin:10px 0 2px}
body.fin-app.pagina-dashboard .dashboard-grafico-expandir{min-height:40px;border:1px solid #00d9f5;border-radius:999px;background:rgba(0,229,255,.07);color:#00e5ff;padding:8px 16px;font-weight:800;cursor:pointer}
body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-legenda{display:none!important}
body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{grid-template-columns:1fr;justify-items:center}
body.fin-app.pagina-dashboard .dashboard-legenda-icone{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,229,255,.09);border:1px solid rgba(0,229,255,.22);font-size:17px;flex:0 0 auto;margin-right:7px}
body.dashboard-grafico-modal-aberto{overflow:hidden}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido{position:fixed!important;inset:0!important;z-index:10050!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;border-radius:0!important;overflow:auto!important;padding:24px!important;background:linear-gradient(180deg,#071225 0%,#08162c 100%)!important;box-shadow:none!important}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido>h3{font-size:clamp(25px,5vw,42px);padding-right:130px;margin-top:6px}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido>p{font-size:15px;max-width:800px;line-height:1.55}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-acoes-compacto{position:absolute;right:20px;top:16px;margin:0;z-index:2}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-expandir{background:#0b1830;font-size:14px}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-corpo{display:grid!important;grid-template-columns:minmax(280px,.85fr) minmax(300px,1.15fr)!important;gap:36px!important;align-items:center!important;max-width:1100px;margin:24px auto 0}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut{width:min(52vw,420px)!important;height:min(52vw,420px)!important;max-width:420px!important;max-height:420px!important;margin:auto!important}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut::after{inset:25%!important}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut-centro small{font-size:15px!important}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut-centro strong{font-size:clamp(28px,5vw,48px)!important}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-legenda{display:grid!important;gap:8px!important;width:100%!important}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-item{min-height:62px!important;padding:10px 12px!important;grid-template-columns:auto auto minmax(0,1fr) auto auto!important;border-radius:12px!important;background:rgba(10,25,49,.78)!important}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-nome{font-size:14px!important}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-valor{font-size:15px!important}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-percentual{font-size:14px!important;color:#00e5ff!important;font-weight:900}
@media(max-width:760px){
 body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido{padding:18px 14px 28px!important}
 body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido>h3{font-size:25px;padding-right:105px}
 body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido>p{font-size:13px;padding-right:6px}
 body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-acoes-compacto{right:12px;top:12px}
 body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-expandir{font-size:12px;padding:7px 11px}
 body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-corpo{grid-template-columns:1fr!important;gap:20px!important;margin-top:18px!important}
 body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut{width:min(78vw,330px)!important;height:min(78vw,330px)!important}
 body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-item{grid-template-columns:auto auto minmax(0,1fr) auto!important;gap:7px!important}
 body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-percentual{grid-column:4}
}

/* V95 - camada independente para detalhes dos graficos */
body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada{
 position:fixed; inset:0; z-index:10049; background:rgba(2,8,20,.88); backdrop-filter:blur(5px);
 display:flex; align-items:center; justify-content:center; padding:18px; overflow:auto;
}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-card.dashboard-grafico-expandido{
 position:relative!important; inset:auto!important; width:min(1180px,100%)!important; height:auto!important;
 min-height:min(760px,calc(100vh - 36px)); max-height:calc(100vh - 36px)!important; border-radius:20px!important;
 border:1px solid rgba(0,229,255,.34)!important; box-shadow:0 24px 80px rgba(0,0,0,.45)!important;
}
@media (max-width:760px){
 body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada{padding:0; align-items:stretch;}
 body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-card.dashboard-grafico-expandido{
  width:100%!important; min-height:100%!important; max-height:none!important; border-radius:0!important; border:0!important;
  padding:20px 14px 32px!important;
 }
}

/* V112 — comparativo no mesmo padrão vertical dos demais gráficos */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-grafico-corpo{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  gap:10px!important;
  align-items:start!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:center!important;
  margin:0 auto!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut::after{inset:17.5%!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut-centro small{font-size:10px!important;line-height:1!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut-centro strong{font-size:15px!important;line-height:1!important;margin-top:5px!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut-subtexto{font-size:8px!important;margin-top:4px!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao{
  grid-column:1!important;
  grid-row:2!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:0!important;
  width:100%!important;
  max-width:100%!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item{
  display:grid!important;
  grid-template-columns:10px minmax(0,1fr) auto!important;
  grid-template-areas:"cor nome valor" ". nome percentual"!important;
  column-gap:10px!important;
  row-gap:2px!important;
  align-items:center!important;
  min-height:58px!important;
  padding:8px 4px!important;
  border:0!important;
  border-radius:0!important;
  border-bottom:1px solid rgba(109,143,188,.16)!important;
  background:transparent!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item:last-child{border-bottom:0!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item::before{content:"";grid-area:cor;width:8px;height:8px;border-radius:50%;background:#00ffb3}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item:nth-child(2)::before{background:#ff5964}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item>span{grid-area:nome!important;font-size:12px!important;font-weight:700!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item>strong{grid-area:valor!important;font-size:13px!important;justify-self:end!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item>small{grid-area:percentual!important;font-size:10.5px!important;justify-self:end!important;color:#00e5ff!important}

/* V113 — reforço final do componente independente */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-modal-camada .dashboard-grafico-modal-novo{position:relative!important;display:block!important;width:min(1080px,calc(100vw - 32px))!important;max-width:1080px!important;min-width:0!important;max-height:calc(100vh - 32px)!important;overflow:auto!important;padding:28px!important;box-sizing:border-box!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-modal-novo .dashboard-grafico-modal-conteudo{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;min-width:0!important;gap:20px!important;margin:24px auto 0!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-modal-novo .dashboard-donut{position:relative!important;display:block!important;width:250px!important;height:250px!important;min-width:250px!important;min-height:250px!important;max-width:250px!important;max-height:250px!important;flex:0 0 250px!important;aspect-ratio:1/1!important;border-radius:50%!important;margin:0 auto!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-modal-novo .dashboard-donut::after{inset:17.5%!important;border-radius:50%!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-modal-novo .dashboard-grafico-modal-lista{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:none!important;min-width:0!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-modal-novo .dashboard-grafico-modal-lista .dashboard-legenda-item{display:grid!important;grid-template-columns:10px 48px minmax(0,1fr) auto!important;grid-template-areas:"cor icone nome valor" ". icone nome percentual"!important;width:100%!important;max-width:none!important;min-width:0!important;box-sizing:border-box!important}
@media(max-width:760px){body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-modal-camada .dashboard-grafico-modal-novo{width:100%!important;max-width:none!important;min-height:100%!important;max-height:none!important;padding:20px 12px 28px!important}body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-modal-novo .dashboard-donut{width:min(64vw,230px)!important;height:min(64vw,230px)!important;min-width:0!important;min-height:0!important;max-width:230px!important;max-height:230px!important;flex-basis:auto!important}}

/* =========================================================
   V113 — COMPONENTE EXCLUSIVO DO BALÃO DE DETALHES
========================================================= */
body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-modal-novo{
  position:relative!important;
  display:block!important;
  width:min(1080px,calc(100vw - 32px))!important;
  max-width:1080px!important;
  min-width:0!important;
  max-height:calc(100vh - 32px)!important;
  overflow:auto!important;
  padding:28px!important;
  border:1px solid rgba(0,229,255,.34)!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,#08162b 0%,#071225 100%)!important;
  box-shadow:0 26px 80px rgba(0,0,0,.55)!important;
  box-sizing:border-box!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo>h3{margin:2px 64px 6px!important;padding:0!important;text-align:center!important;font-size:clamp(24px,3vw,34px)!important;text-transform:uppercase!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo>p{margin:0 auto!important;padding:0 54px!important;max-width:760px!important;text-align:center!important;font-size:14px!important;color:var(--text-light)!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo>.dashboard-grafico-fechar-modal{position:absolute!important;top:18px!important;right:18px!important;width:46px!important;height:46px!important;min-height:46px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center!important;font-size:28px!important;line-height:1!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-conteudo{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;min-width:0!important;gap:20px!important;margin:24px auto 0!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-donut{position:relative!important;display:block!important;width:250px!important;height:250px!important;min-width:250px!important;min-height:250px!important;max-width:250px!important;max-height:250px!important;flex:0 0 250px!important;aspect-ratio:1/1!important;border-radius:50%!important;margin:0 auto!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-donut::after{inset:17.5%!important;border-radius:50%!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-donut-centro{display:flex!important;padding:0 28px!important;box-sizing:border-box!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-donut-centro small{font-size:12px!important;line-height:1!important;color:#fff!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-donut-centro strong{margin-top:8px!important;font-size:22px!important;line-height:1!important;white-space:nowrap!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-grafico-modal-lista{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;width:100%!important;max-width:none!important;min-width:0!important;border:1px solid rgba(72,111,158,.22)!important;border-radius:16px!important;overflow:hidden!important;background:rgba(5,17,35,.42)!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-grafico-modal-lista .dashboard-legenda-item{display:grid!important;grid-template-columns:10px 48px minmax(0,1fr) auto!important;grid-template-areas:"cor icone nome valor" ". icone nome percentual"!important;column-gap:11px!important;row-gap:2px!important;align-items:center!important;width:100%!important;max-width:none!important;min-height:66px!important;padding:9px 14px!important;box-sizing:border-box!important;border:0!important;border-radius:0!important;border-bottom:1px solid rgba(109,143,188,.17)!important;background:transparent!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-grafico-modal-lista .dashboard-legenda-item:last-child{border-bottom:0!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-legenda-cor{grid-area:cor!important;width:10px!important;height:10px!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-legenda-icone{grid-area:icone!important;width:44px!important;height:44px!important;min-width:44px!important;font-size:21px!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-legenda-nome{grid-area:nome!important;min-width:0!important;font-size:14px!important;font-weight:700!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-legenda-valor{grid-area:valor!important;min-width:0!important;font-size:14px!important;white-space:nowrap!important;text-align:right!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-legenda-percentual{grid-area:percentual!important;justify-self:end!important;min-width:0!important;font-size:11px!important;color:#00e5ff!important}
@media(max-width:760px){
  body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-modal-novo{width:100%!important;max-width:none!important;min-height:100%!important;max-height:none!important;padding:20px 12px 28px!important;border:0!important;border-radius:0!important}
  body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo>h3{margin:4px 52px 6px!important;font-size:22px!important}
  body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo>p{padding:0 28px!important;font-size:13px!important}
  body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo>.dashboard-grafico-fechar-modal{top:12px!important;right:10px!important;width:44px!important;height:44px!important;min-height:44px!important}
  body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-donut{width:min(64vw,230px)!important;height:min(64vw,230px)!important;min-width:0!important;min-height:0!important;max-width:230px!important;max-height:230px!important;flex-basis:auto!important}
  body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-grafico-modal-lista .dashboard-legenda-item{grid-template-columns:8px 42px minmax(0,1fr) auto!important;column-gap:8px!important;min-height:62px!important;padding:8px!important}
  body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-legenda-icone{width:38px!important;height:38px!important;min-width:38px!important;font-size:19px!important}
  body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-legenda-nome{font-size:13px!important}
  body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-legenda-valor{font-size:13px!important}
  body.fin-app.pagina-dashboard .dashboard-grafico-modal-novo .dashboard-legenda-percentual{font-size:10.5px!important}
}

/* =========================================================
   V104 — CONTENCAO RESPONSIVA DOS GRAFICOS 40/60
   Impede que a legenda e os valores ultrapassem o card em
   telas com menor largura util, mantendo a composicao 40/60.
========================================================= */
body.fin-app.pagina-dashboard #dashboardGraficos,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-card,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-corpo,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-legenda,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-nome,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-valor,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-percentual{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-card{
  overflow:hidden!important;
}
@media (min-width:761px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-item{
    grid-template-columns:8px clamp(34px,3vw,42px) minmax(0,1fr) minmax(0,auto)!important;
    column-gap:clamp(6px,1vw,10px)!important;
    width:100%!important;
    overflow:hidden!important;
  }
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-icone{
    width:clamp(34px,3vw,42px)!important;
    height:clamp(34px,3vw,42px)!important;
    min-width:0!important;
  }
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-nome{
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-valor,
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-percentual{
    min-width:0!important;
    text-align:right!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

/* V109 — reforco final: titulo e valor dentro do donut */
@media (min-width:761px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{grid-template-rows:auto auto!important;row-gap:10px!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut::after{inset:17.5%!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro{display:flex!important;padding:0 20px!important;box-sizing:border-box!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro small{font-size:8px!important;line-height:1!important;color:#fff!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro strong{margin-top:5px!important;font-size:12px!important;line-height:1!important;letter-spacing:-.25px!important;white-space:nowrap!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-resumo{display:none!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-legenda{grid-row:2!important}
}

/* V109 — titulo e total dentro do donut na visao desktop */
@media (min-width:761px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{grid-template-rows:auto auto!important;row-gap:10px!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut::after{inset:17.5%!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro{display:flex!important;padding:0 20px!important;box-sizing:border-box!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro small{font-size:8px!important;line-height:1!important;color:#fff!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro strong{margin-top:5px!important;font-size:12px!important;line-height:1!important;letter-spacing:-.25px!important;white-space:nowrap!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-resumo{display:none!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-legenda{grid-row:2!important}
}

/* V105 — tipografia das categorias alinhada ao menu lateral */
@media (min-width:761px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-nome{
    font-size:13px!important;
    line-height:1.12!important;
    font-weight:700!important;
    letter-spacing:0!important;
  }
}

/* =========================================================
   V96 - ANALISE VISUAL LIMPA + MODAL INTERATIVO
========================================================= */
body.fin-app.pagina-dashboard .dashboard-grafico-card{
    overflow:hidden;
}

body.fin-app.pagina-dashboard .dashboard-grafico-acoes-compacto{
    justify-content:flex-start;
    margin:8px 0 12px;
}

body.fin-app.pagina-dashboard .dashboard-grafico-expandir{
    min-height:38px;
    border-radius:12px;
    padding:8px 13px;
    font-size:13px;
    letter-spacing:.01em;
    background:rgba(0,229,255,.055);
}

/* No cartão normal a legenda volta a aparecer de forma organizada. */
body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-legenda{
    display:grid!important;
    gap:0!important;
    width:100%!important;
    min-width:0;
}
body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{
    display:grid!important;
    grid-template-columns:minmax(170px,.72fr) minmax(250px,1.28fr)!important;
    gap:22px!important;
    align-items:center!important;
    justify-items:stretch!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{
    width:min(100%,250px)!important;
    height:auto!important;
    aspect-ratio:1/1;
    margin:auto!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-item{
    min-height:48px!important;
    display:grid!important;
    grid-template-columns:10px 38px minmax(0,1fr) auto!important;
    grid-template-areas:
        "cor icone nome valor"
        ". icone percentual percentual"!important;
    gap:2px 9px!important;
    align-items:center!important;
    padding:7px 4px!important;
    border-radius:0!important;
    background:transparent!important;
    border-bottom:1px solid rgba(109,143,188,.16)!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-item:last-child{
    border-bottom:0!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-cor{grid-area:cor;width:9px;height:9px}
body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-icone{
    grid-area:icone;
    width:34px!important;height:34px!important;margin:0!important;border-radius:10px!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-nome{
    grid-area:nome;
    min-width:0;
    font-size:13px!important;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-valor{
    grid-area:valor;
    font-size:13px!important;
    white-space:nowrap;
}
body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-percentual{
    grid-area:percentual!important;
    justify-self:start;
    font-size:12px!important;
    line-height:1;
    color:#00e5ff!important;
    font-weight:900!important;
}

body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada{
    padding:24px!important;
    align-items:center!important;
    justify-content:center!important;
    background:rgba(1,6,17,.90)!important;
    backdrop-filter:blur(8px)!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-card.dashboard-grafico-expandido{
    position:relative!important;
    inset:auto!important;
    width:min(1080px,100%)!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100vh - 48px)!important;
    overflow:auto!important;
    padding:28px!important;
    border-radius:24px!important;
    border:1px solid rgba(0,229,255,.28)!important;
    background:linear-gradient(180deg,#08162b 0%,#071225 100%)!important;
    box-shadow:0 26px 80px rgba(0,0,0,.55)!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido>h3{
    margin:2px auto 4px!important;
    padding:0 70px!important;
    text-align:center!important;
    font-size:clamp(24px,3vw,34px)!important;
    text-transform:uppercase;
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido>p{
    margin:0 auto 8px!important;
    padding:0 70px!important;
    text-align:center!important;
    font-size:14px!important;
    max-width:760px!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-acoes-compacto{
    position:absolute!important;
    top:18px!important;
    right:18px!important;
    margin:0!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-fechar-modal{
    width:46px!important;
    height:46px!important;
    min-height:46px!important;
    padding:0!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    font-size:28px!important;
    line-height:1!important;
    color:#fff!important;
    border-color:rgba(176,201,232,.55)!important;
    background:#0b1930!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-corpo{
    display:grid!important;
    grid-template-columns:minmax(300px,.9fr) minmax(360px,1.1fr)!important;
    gap:38px!important;
    align-items:center!important;
    max-width:980px!important;
    margin:24px auto 0!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut{
    width:min(36vw,390px)!important;
    height:auto!important;
    aspect-ratio:1/1;
    margin:auto!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut::after{
    inset:26%!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut-centro small{
    font-size:14px!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut-centro strong{
    font-size:clamp(25px,3.2vw,40px)!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-legenda{
    display:grid!important;
    gap:0!important;
    width:100%!important;
    border:1px solid rgba(72,111,158,.22);
    border-radius:16px;
    overflow:hidden;
    background:rgba(5,17,35,.42);
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-item{
    display:grid!important;
    grid-template-columns:10px 48px minmax(0,1fr) auto!important;
    grid-template-areas:
        "cor icone nome valor"
        ". icone percentual percentual"!important;
    gap:3px 11px!important;
    min-height:66px!important;
    padding:9px 12px!important;
    border-radius:0!important;
    background:transparent!important;
    border-bottom:1px solid rgba(109,143,188,.17)!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-item:last-child{border-bottom:0!important}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-cor{grid-area:cor;width:10px;height:10px}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-icone{
    grid-area:icone;
    width:44px!important;height:44px!important;margin:0!important;
    border-radius:13px!important;
    font-size:21px!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-nome{
    grid-area:nome;
    font-size:15px!important;
    font-weight:800!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-valor{
    grid-area:valor;
    font-size:15px!important;
    white-space:nowrap;
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-percentual{
    grid-area:percentual!important;
    justify-self:start;
    font-size:13px!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-item.categoria-oculta{
    opacity:.38!important;
    filter:saturate(.35);
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-item.categoria-oculta .dashboard-legenda-nome,
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-item.categoria-oculta .dashboard-legenda-valor{
    text-decoration:line-through;
}

@media(max-width:760px){
    body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{
        grid-template-columns:1fr!important;
        gap:12px!important;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{
        width:min(66vw,230px)!important;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-acoes-compacto{
        justify-content:flex-start;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada{
        padding:0!important;
        align-items:stretch!important;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-card.dashboard-grafico-expandido{
        width:100%!important;
        max-height:none!important;
        min-height:100%!important;
        border:0!important;
        border-radius:0!important;
        padding:20px 12px 28px!important;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido>h3{
        font-size:23px!important;
        padding:0 58px!important;
        margin-top:4px!important;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido>p{
        font-size:13px!important;
        padding:0 34px!important;
        margin-top:5px!important;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-acoes-compacto{
        top:12px!important;
        right:10px!important;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-fechar-modal{
        width:44px!important;height:44px!important;min-height:44px!important;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-corpo{
        grid-template-columns:1fr!important;
        gap:18px!important;
        margin-top:18px!important;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut{
        width:min(78vw,330px)!important;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-legenda{
        border-radius:14px;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-item{
        grid-template-columns:8px 42px minmax(0,1fr) auto!important;
        min-height:62px!important;
        padding:8px 8px!important;
        gap:2px 8px!important;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-icone{
        width:38px!important;height:38px!important;font-size:19px!important;border-radius:11px!important;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-nome{
        font-size:14px!important;
        min-width:0;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-valor{
        font-size:14px!important;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-percentual{
        font-size:12px!important;
    }
}

@media(max-width:420px){
    body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-item{
        grid-template-columns:8px 34px minmax(0,1fr) auto!important;
        gap:2px 6px!important;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-icone{
        width:30px!important;height:30px!important;font-size:15px!important;
    }
    body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-nome,
    body.fin-app.pagina-dashboard .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-valor{
        font-size:12px!important;
    }
}

/* =========================================================
   V97 — ANÁLISE VISUAL COMPACTA REEQUILIBRADA
   Somente cartões normais. O modal expandido da V96 permanece.
========================================================= */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{
    grid-template-columns:minmax(240px,.9fr) minmax(330px,1.1fr)!important;
    gap:30px!important;
    align-items:center!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{
    width:min(100%,310px)!important;
    max-width:310px!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut::after{
    inset:25%!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro small{
    font-size:13px!important;
    letter-spacing:.02em;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro strong{
    font-size:clamp(22px,2vw,31px)!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-item{
    min-height:66px!important;
    grid-template-columns:10px 50px minmax(0,1fr) auto!important;
    grid-template-areas:
        "cor icone nome valor"
        ". icone . percentual"!important;
    column-gap:12px!important;
    row-gap:2px!important;
    padding:8px 4px!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-icone{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    border-radius:12px!important;
    font-size:23px!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-nome{
    font-size:17px!important;
    line-height:1.15!important;
    font-weight:850!important;
    letter-spacing:.005em;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-valor{
    font-size:16px!important;
    line-height:1.15!important;
    font-weight:900!important;
    justify-self:end!important;
    text-align:right!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-percentual{
    grid-area:percentual!important;
    justify-self:end!important;
    text-align:right!important;
    font-size:14px!important;
    line-height:1.05!important;
    color:#00e5ff!important;
    font-weight:900!important;
}

/* O comparativo também recebe um donut maior para manter proporção visual. */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut{
    width:min(100%,300px)!important;
    max-width:300px!important;
}

@media(max-width:900px){
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{
        grid-template-columns:minmax(210px,.82fr) minmax(290px,1.18fr)!important;
        gap:22px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{
        width:min(100%,285px)!important;
    }
}

@media(max-width:760px){
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{
        grid-template-columns:1fr!important;
        gap:16px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{
        width:min(72vw,285px)!important;
        max-width:285px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-item{
        min-height:62px!important;
        grid-template-columns:8px 46px minmax(0,1fr) auto!important;
        grid-template-areas:
            "cor icone nome valor"
            ". icone . percentual"!important;
        column-gap:10px!important;
        padding:7px 2px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-icone{
        width:42px!important;
        height:42px!important;
        min-width:42px!important;
        font-size:21px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-nome{
        font-size:15px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-valor{
        font-size:14px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-percentual{
        font-size:13px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut{
        width:min(70vw,270px)!important;
        max-width:270px!important;
    }
}

@media(max-width:420px){
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-item{
        grid-template-columns:7px 42px minmax(0,1fr) auto!important;
        column-gap:8px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-icone{
        width:40px!important;
        height:40px!important;
        min-width:40px!important;
        font-size:20px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-nome{
        font-size:14px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-valor{
        font-size:13px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-percentual{
        font-size:12.5px!important;
    }
}

/* =========================================================
   V98 — AJUSTE FINO DOS GRÁFICOS COMPACTOS (DESKTOP + MOBILE)
   Mantém a hierarquia da V97, reduz levemente o conjunto no
   navegador e força proporção 1:1 para impedir donuts ovais.
========================================================= */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{
    grid-template-columns:minmax(220px,.82fr) minmax(320px,1.18fr)!important;
    gap:24px!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{
    width:270px!important;
    height:270px!important;
    min-width:270px!important;
    min-height:270px!important;
    max-width:270px!important;
    max-height:270px!important;
    aspect-ratio:1 / 1!important;
    border-radius:50%!important;
    flex:0 0 270px!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut::after{
    inset:25%!important;
    border-radius:50%!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-item{
    min-height:60px!important;
    grid-template-columns:9px 46px minmax(0,1fr) auto!important;
    grid-template-areas:
        "cor icone nome valor"
        ". icone nome percentual"!important;
    column-gap:10px!important;
    row-gap:1px!important;
    padding:6px 3px!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-icone{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    font-size:22px!important;
    border-radius:11px!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-nome{
    grid-area:nome!important;
    align-self:center!important;
    font-size:16px!important;
    line-height:1.15!important;
    font-weight:850!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-valor{
    grid-area:valor!important;
    align-self:end!important;
    justify-self:end!important;
    font-size:15px!important;
    line-height:1.08!important;
    font-weight:900!important;
    text-align:right!important;
    white-space:nowrap!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-percentual{
    grid-area:percentual!important;
    align-self:start!important;
    justify-self:end!important;
    margin-top:2px!important;
    font-size:13px!important;
    line-height:1!important;
    color:#00e5ff!important;
    font-weight:900!important;
    text-align:right!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut{
    width:250px!important;
    height:250px!important;
    min-width:250px!important;
    min-height:250px!important;
    max-width:250px!important;
    max-height:250px!important;
    aspect-ratio:1 / 1!important;
    border-radius:50%!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut::after{
    border-radius:50%!important;
}

@media(max-width:900px) and (min-width:761px){
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{
        grid-template-columns:235px minmax(0,1fr)!important;
        gap:18px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{
        width:235px!important;height:235px!important;min-width:235px!important;min-height:235px!important;max-width:235px!important;max-height:235px!important;flex-basis:235px!important;
    }
}

@media(max-width:760px){
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{
        grid-template-columns:1fr!important;
        gap:14px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{
        width:min(64vw,260px)!important;
        height:min(64vw,260px)!important;
        min-width:0!important;
        min-height:0!important;
        max-width:260px!important;
        max-height:260px!important;
        flex-basis:auto!important;
        aspect-ratio:1 / 1!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-item{
        min-height:58px!important;
        grid-template-columns:8px 44px minmax(0,1fr) auto!important;
        grid-template-areas:
            "cor icone nome valor"
            ". icone nome percentual"!important;
        column-gap:9px!important;
        padding:6px 2px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-icone{
        width:42px!important;height:42px!important;min-width:42px!important;font-size:21px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-nome{
        font-size:15px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-valor{
        font-size:14px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-percentual{
        font-size:12.5px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut{
        width:min(62vw,245px)!important;
        height:min(62vw,245px)!important;
        min-width:0!important;min-height:0!important;max-width:245px!important;max-height:245px!important;
    }
}

@media(max-width:420px){
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{
        width:min(62vw,235px)!important;
        height:min(62vw,235px)!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-item{
        grid-template-columns:7px 40px minmax(0,1fr) auto!important;
        column-gap:8px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-icone{
        width:38px!important;height:38px!important;min-width:38px!important;font-size:19px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-nome{
        font-size:14px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-valor{
        font-size:13px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-percentual{
        font-size:12px!important;
    }
}

/* =========================================================
   V99 — CORREÇÃO EFETIVA DA ANÁLISE VISUAL
   Regra final carregada por último para evitar conflitos com
   estilos legados. Donuts compactos, sempre circulares.
========================================================= */
@media (min-width: 901px){
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{
        grid-template-columns:210px minmax(0,1fr)!important;
        gap:22px!important;
        align-items:center!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{
        box-sizing:border-box!important;
        width:240px!important;
        height:240px!important;
        min-width:240px!important;
        min-height:240px!important;
        max-width:240px!important;
        max-height:240px!important;
        flex:0 0 240px!important;
        aspect-ratio:1 / 1!important;
        border-radius:50%!important;
        justify-self:center!important;
        align-self:center!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut::after{
        border-radius:50%!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut{
        box-sizing:border-box!important;
        width:220px!important;
        height:220px!important;
        min-width:220px!important;
        min-height:220px!important;
        max-width:220px!important;
        max-height:220px!important;
        aspect-ratio:1 / 1!important;
        border-radius:50%!important;
    }
}

@media (min-width:761px) and (max-width:900px){
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{
        grid-template-columns:195px minmax(0,1fr)!important;
        gap:16px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{
        width:215px!important;
        height:215px!important;
        min-width:215px!important;
        min-height:215px!important;
        max-width:215px!important;
        max-height:215px!important;
        flex:0 0 215px!important;
        aspect-ratio:1 / 1!important;
        border-radius:50%!important;
    }
}

@media (max-width:760px){
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{
        width:min(56vw,220px)!important;
        height:min(56vw,220px)!important;
        max-width:220px!important;
        max-height:220px!important;
        min-width:0!important;
        min-height:0!important;
        aspect-ratio:1 / 1!important;
        border-radius:50%!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut{
        width:min(54vw,210px)!important;
        height:min(54vw,210px)!important;
        max-width:210px!important;
        max-height:210px!important;
        aspect-ratio:1 / 1!important;
        border-radius:50%!important;
    }
}

/* =========================================================
   V100 — ANÁLISE VISUAL EQUILIBRADA
   Legenda: cor + ícone + categoria | valor e percentual.
   Mantém o donut circular e evita espalhar as informações.
========================================================= */
@media (min-width: 901px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{
    grid-template-columns:270px minmax(0,1fr)!important;
    gap:26px!important;
    align-items:center!important;
  }
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{
    width:220px!important;height:220px!important;min-width:220px!important;min-height:220px!important;max-width:220px!important;max-height:220px!important;flex:0 0 220px!important;aspect-ratio:1/1!important;border-radius:50%!important;
  }
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut::after{inset:27%!important;border-radius:50%!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-legenda{width:100%!important;max-width:none!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-item{
    display:grid!important;
    grid-template-columns:9px 46px minmax(150px,1fr) minmax(105px,auto)!important;
    grid-template-areas:"cor icone nome valor" ". icone nome percentual"!important;
    column-gap:12px!important;row-gap:1px!important;align-items:center!important;
    min-height:60px!important;padding:7px 4px!important;
  }
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-cor{grid-area:cor!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-icone{grid-area:icone!important;width:42px!important;height:42px!important;min-width:42px!important;font-size:21px!important;display:flex!important;align-items:center!important;justify-content:center!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-nome{grid-area:nome!important;font-size:15px!important;line-height:1.15!important;font-weight:800!important;overflow-wrap:normal!important;word-break:normal!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-valor{grid-area:valor!important;font-size:14px!important;line-height:1.1!important;align-self:end!important;min-width:105px!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-percentual{grid-area:percentual!important;font-size:12.5px!important;line-height:1.1!important;align-self:start!important;min-width:105px!important;color:#00e5ff!important}
}

@media (min-width:761px) and (max-width:1100px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{grid-template-columns:205px minmax(0,1fr)!important;gap:16px!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{width:190px!important;height:190px!important;min-width:190px!important;min-height:190px!important;max-width:190px!important;max-height:190px!important;flex:0 0 190px!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-item{grid-template-columns:8px 40px minmax(100px,1fr) minmax(92px,auto)!important;column-gap:9px!important;min-height:54px!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-icone{width:38px!important;height:38px!important;min-width:38px!important;font-size:19px!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-nome{font-size:13px!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-valor{font-size:12.5px!important;min-width:92px!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-percentual{font-size:11.5px!important;min-width:92px!important}
}

@media (max-width:760px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{grid-template-columns:1fr!important;gap:16px!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{width:min(52vw,205px)!important;height:min(52vw,205px)!important;max-width:205px!important;max-height:205px!important;aspect-ratio:1/1!important;border-radius:50%!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-item{grid-template-columns:8px 42px minmax(0,1fr) minmax(86px,auto)!important;grid-template-areas:"cor icone nome valor" ". icone nome percentual"!important;column-gap:9px!important;row-gap:1px!important;min-height:58px!important;padding:7px 2px!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-cor{grid-area:cor!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-icone{grid-area:icone!important;width:40px!important;height:40px!important;min-width:40px!important;font-size:20px!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-nome{grid-area:nome!important;font-size:14px!important;font-weight:800!important;line-height:1.15!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-valor{grid-area:valor!important;font-size:13px!important;min-width:86px!important;align-self:end!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-percentual{grid-area:percentual!important;font-size:12px!important;min-width:86px!important;align-self:start!important;color:#00e5ff!important}
}

/* =========================================================
   V101 — AJUSTE ISOLADO DO TAMANHO DOS DONUTS
   Somente reduz o diâmetro dos gráficos da visão normal.
   Não altera grid, legendas, ícones, textos, valores, botões
   nem o painel expandido (Ver detalhes).
========================================================= */
@media (min-width: 1101px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{
    width:170px!important;
    height:170px!important;
    min-width:170px!important;
    min-height:170px!important;
    max-width:170px!important;
    max-height:170px!important;
    flex:0 0 170px!important;
    aspect-ratio:1/1!important;
    border-radius:50%!important;
  }
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut{
    width:170px!important;
    height:170px!important;
    min-width:170px!important;
    min-height:170px!important;
    max-width:170px!important;
    max-height:170px!important;
    aspect-ratio:1/1!important;
    border-radius:50%!important;
  }
}

@media (min-width:761px) and (max-width:1100px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut,
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut{
    width:155px!important;
    height:155px!important;
    min-width:155px!important;
    min-height:155px!important;
    max-width:155px!important;
    max-height:155px!important;
    flex:0 0 155px!important;
    aspect-ratio:1/1!important;
    border-radius:50%!important;
  }
}

@media (max-width:760px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut,
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut{
    width:min(42vw,155px)!important;
    height:min(42vw,155px)!important;
    min-width:0!important;
    min-height:0!important;
    max-width:155px!important;
    max-height:155px!important;
    flex-basis:auto!important;
    aspect-ratio:1/1!important;
    border-radius:50%!important;
  }
}

/* =========================================================
   V102 — DONUTS FINOS E TEXTO CENTRAL CONTIDO
   Alteração isolada: somente donut + conteúdo central.
   Não altera grid, legenda, ícones, categorias, valores,
   percentuais, botões ou modal expandido.
========================================================= */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut::after,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo:not(.dashboard-grafico-expandido) .dashboard-donut::after{
    inset:22%!important;
    border-radius:50%!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro small,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo:not(.dashboard-grafico-expandido) .dashboard-donut-centro small{
    font-size:7px!important;
    line-height:1!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro strong,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo:not(.dashboard-grafico-expandido) .dashboard-donut-centro strong{
    margin-top:4px!important;
    font-size:12px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    letter-spacing:-.2px!important;
}
@media (min-width:1101px){
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut,
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo:not(.dashboard-grafico-expandido) .dashboard-donut{
        width:150px!important;height:150px!important;min-width:150px!important;min-height:150px!important;max-width:150px!important;max-height:150px!important;flex:0 0 150px!important;
    }
}
@media (min-width:761px) and (max-width:1100px){
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut,
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo:not(.dashboard-grafico-expandido) .dashboard-donut{
        width:145px!important;height:145px!important;min-width:145px!important;min-height:145px!important;max-width:145px!important;max-height:145px!important;flex:0 0 145px!important;
    }
}
@media (max-width:760px){
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut,
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo:not(.dashboard-grafico-expandido) .dashboard-donut{
        width:min(38vw,145px)!important;height:min(38vw,145px)!important;max-width:145px!important;max-height:145px!important;
    }
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro strong,
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo:not(.dashboard-grafico-expandido) .dashboard-donut-centro strong{font-size:11px!important}
}


/* =========================================================
   V103 — COMPOSICAO 40/60 + TOTAL ABAIXO DO DONUT
   Ajuste isolado nos cards de categoria da visao normal.
   Esquerda: 40% para donut + resumo. Direita: 60% legenda.
   O valor sai do miolo e aparece logo abaixo do circulo.
========================================================= */
@media (min-width: 761px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{
    display:grid!important;
    grid-template-columns:minmax(0,40%) minmax(0,60%)!important;
    grid-template-rows:auto auto!important;
    column-gap:0!important;
    row-gap:8px!important;
    align-items:center!important;
  }
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:center!important;
    align-self:end!important;
  }
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-legenda{
    grid-column:2!important;
    grid-row:1 / span 2!important;
    width:100%!important;
    align-self:center!important;
  }
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-resumo{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:center!important;
    text-align:center!important;
    margin:0!important;
    line-height:1.05!important;
  }
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro{
  display:none!important;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-donut-resumo{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:#fff;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-donut-resumo span{
  font-size:13px;
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.3px;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-donut-resumo strong{
  font-size:22px;
  line-height:1.05;
  font-weight:900;
  white-space:nowrap;
}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-expandido .dashboard-donut-resumo{
  display:none!important;
}
@media (max-width:760px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{
    justify-self:center!important;
  }
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-resumo{
    justify-self:center!important;
    margin:0 0 8px!important;
  }
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-resumo span{font-size:14px!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-resumo strong{font-size:24px!important}
}

/* V104 — reforco final apos as regras das versoes anteriores */
body.fin-app.pagina-dashboard #dashboardGraficos,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-card,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-corpo,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-legenda,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-nome,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-valor,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-percentual{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-card{overflow:hidden!important}
@media (min-width:761px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-item{
    grid-template-columns:8px clamp(34px,3vw,42px) minmax(0,1fr) minmax(0,auto)!important;
    column-gap:clamp(6px,1vw,10px)!important;width:100%!important;overflow:hidden!important
  }
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-icone{width:clamp(34px,3vw,42px)!important;height:clamp(34px,3vw,42px)!important;min-width:0!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-nome{overflow-wrap:anywhere!important;word-break:normal!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-valor,
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-percentual{min-width:0!important;text-align:right!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
}

/* V105 — reforco final do tamanho dos nomes das categorias */
@media (min-width:761px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-nome{font-size:13px!important;line-height:1.12!important;font-weight:700!important;letter-spacing:0!important}
}

/* V106 — desktop com 38% para donut e 62% para categorias */
@media (min-width:761px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{grid-template-columns:minmax(0,38%) minmax(0,62%)!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-nome{font-size:12px!important;line-height:1.12!important;font-weight:700!important}
}

/* V107 — total alinhado logo abaixo de todos os donuts */
@media (min-width:1101px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{grid-template-rows:150px auto!important;row-gap:7px!important;align-items:start!important}
}
@media (min-width:761px) and (max-width:1100px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{grid-template-rows:145px auto!important;row-gap:7px!important;align-items:start!important}
}
@media (min-width:761px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{align-self:start!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-resumo{align-self:start!important;margin:0!important}
}

/* V108 — donut em cima e todas as informacoes abaixo */
@media (min-width:761px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    row-gap:8px!important;
    align-items:start!important;
  }
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:center!important;
    align-self:start!important;
  }
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-resumo{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:center!important;
    align-self:start!important;
    margin:0 0 6px!important;
  }
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-legenda{
    grid-column:1!important;
    grid-row:3!important;
    justify-self:stretch!important;
    align-self:start!important;
    width:100%!important;
    max-width:100%!important;
  }
}

/* V109 — regra final após a composição vertical */
@media (min-width:761px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-corpo{grid-template-rows:auto auto!important;row-gap:10px!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut::after{inset:17.5%!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro{display:flex!important;padding:0 20px!important;box-sizing:border-box!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro small{font-size:8px!important;line-height:1!important;color:#fff!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro strong{margin-top:5px!important;font-size:12px!important;line-height:1!important;letter-spacing:-.25px!important;white-space:nowrap!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-resumo{display:none!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-grafico-legenda{grid-row:2!important}
}

/* V110 — texto central maior e mesmo layout no Ver detalhes */
@media (min-width:761px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro small{font-size:9px!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro strong{font-size:13.5px!important;margin-top:5px!important}
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-corpo{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  gap:18px!important;
  align-items:start!important;
  max-width:980px!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut{
  grid-column:1!important;
  grid-row:1!important;
  justify-self:center!important;
  width:min(30vw,280px)!important;
  height:auto!important;
  aspect-ratio:1/1!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut::after{inset:17.5%!important}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut-centro small{font-size:12px!important;line-height:1!important;color:#fff!important}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut-centro strong{font-size:22px!important;line-height:1!important;margin-top:8px!important;white-space:nowrap!important}
body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-legenda{
  grid-column:1!important;
  grid-row:2!important;
  width:100%!important;
  max-width:100%!important;
}
@media (max-width:760px){
  body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut{width:min(68vw,270px)!important}
  body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut-centro small{font-size:10px!important}
  body.fin-app.pagina-dashboard .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut-centro strong{font-size:18px!important;margin-top:7px!important}
}

/* V111 — balão em largura total e tipografia refinada */
@media (min-width:761px){
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro small{font-size:10px!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-donut-centro strong{font-size:15px!important}
  body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias:not(.dashboard-grafico-expandido) .dashboard-legenda-percentual{font-size:10.5px!important}
}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-corpo{
  display:grid!important;
  width:min(100%,980px)!important;
  max-width:980px!important;
  min-width:0!important;
  margin:24px auto 0!important;
  justify-self:stretch!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut{
  width:min(30vw,280px)!important;
  min-width:220px!important;
  max-width:280px!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut-centro small{font-size:13px!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut-centro strong{font-size:24px!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-legenda{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  justify-self:stretch!important;
}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-item{width:100%!important;max-width:none!important;box-sizing:border-box!important}
body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-percentual{font-size:11.5px!important}
@media (max-width:760px){
  body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-grafico-corpo{width:100%!important;margin-top:18px!important}
  body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut{width:min(68vw,270px)!important;min-width:0!important}
  body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut-centro small{font-size:11px!important}
  body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-donut-centro strong{font-size:20px!important}
  body.fin-app.pagina-dashboard .dashboard-grafico-modal-camada .dashboard-grafico-card.dashboard-grafico-expandido .dashboard-legenda-percentual{font-size:11px!important}
}

/* V112 — regra final do comparativo vertical */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-grafico-corpo{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;gap:10px!important;align-items:start!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut{grid-column:1!important;grid-row:1!important;justify-self:center!important;margin:0 auto!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut::after{inset:17.5%!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut-centro small{font-size:10px!important;line-height:1!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut-centro strong{font-size:15px!important;line-height:1!important;margin-top:5px!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-donut-subtexto{font-size:8px!important;margin-top:4px!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao{grid-column:1!important;grid-row:2!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;width:100%!important;max-width:100%!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item{display:grid!important;grid-template-columns:10px minmax(0,1fr) auto!important;grid-template-areas:"cor nome valor" ". nome percentual"!important;column-gap:10px!important;row-gap:2px!important;align-items:center!important;min-height:58px!important;padding:8px 4px!important;border:0!important;border-radius:0!important;border-bottom:1px solid rgba(109,143,188,.16)!important;background:transparent!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item:last-child{border-bottom:0!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item::before{content:"";grid-area:cor;width:8px;height:8px;border-radius:50%;background:#00ffb3}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item:nth-child(2)::before{background:#ff5964}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item>span{grid-area:nome!important;font-size:12px!important;font-weight:700!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item>strong{grid-area:valor!important;font-size:13px!important;justify-self:end!important}
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao-item>small{grid-area:percentual!important;font-size:10.5px!important;justify-self:end!important;color:#00e5ff!important}
/* Ações POST compactas usadas nas listas de categoria/subcategoria. */
.fc-form-acao-inline {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.fc-form-acao-inline button {
    margin: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

/* =========================================================
   V127 — HISTÓRICO / DETALHE DO EXTRATO
========================================================= */

.fin-app .link-historico-lancamento {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed rgba(0, 229, 255, .42);
}

.fin-app .link-historico-lancamento:hover,
.fin-app .link-historico-lancamento:focus-visible {
    color: var(--fc-primary);
    border-bottom-color: var(--fc-primary);
}

.fin-app .botao-historico-final {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 0 11px;
    border: 1px solid rgba(0, 229, 255, .42);
    border-radius: 7px;
    background: rgba(0, 229, 255, .08);
    color: var(--fc-primary);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.fin-app .botao-historico-final.botao-historico-icone {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border-radius: 8px;
}

.fin-app .botao-historico-icone svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fin-app .botao-historico-icone circle {
    fill: currentColor;
    stroke: none;
}

.fin-app .botao-historico-final:hover,
.fin-app .botao-historico-final:focus-visible {
    background: rgba(0, 229, 255, .16);
}

@media (min-width: 901px) {
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .acoes-final > .botao-historico-final {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        min-height: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
        justify-self: center !important;
    }
}

body.fin-app.pagina-historico-lancamento {
    --historico-cor: var(--fc-danger);
    --historico-cor-rgb: 255, 91, 104;
}

body.fin-app.pagina-historico-lancamento.historico-tipo-receita {
    --historico-cor: var(--fc-success);
    --historico-cor-rgb: 0, 240, 181;
}

.fin-app .historico-lancamento-conteudo {
    width: auto;
    max-width: 1420px;
    margin-right: auto;
    padding-bottom: 52px;
}

.fin-app .historico-lancamento-topo {
    margin-bottom: 20px;
}

.fin-app .historico-lancamento-voltar {
    display: inline-flex;
    margin-bottom: 12px;
    color: var(--fc-primary);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fin-app .historico-resumo-card,
.fin-app .historico-grafico-card,
.fin-app .historico-pagamentos-card,
.fin-app .historico-lancamento-erro {
    margin-bottom: 18px;
    padding: 22px;
    border: 1px solid var(--fc-border-soft);
    border-radius: var(--fc-radius-lg);
    background: linear-gradient(145deg, rgba(16, 28, 51, .98), rgba(8, 18, 37, .98));
    box-shadow: var(--fc-shadow);
}

.fin-app .historico-resumo-identificacao,
.fin-app .historico-secao-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.fin-app .historico-resumo-tipo {
    display: block;
    margin-bottom: 7px;
    color: var(--historico-cor);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}

.fin-app .historico-resumo-identificacao h2,
.fin-app .historico-secao-topo h2 {
    margin: 0;
    color: var(--fc-text);
}

.fin-app .historico-resumo-identificacao h2 {
    font-size: clamp(22px, 2.3vw, 32px);
}

.fin-app .historico-resumo-identificacao p,
.fin-app .historico-secao-topo p {
    margin: 7px 0 0;
    color: var(--fc-text-light);
    font-size: 13px;
}

.fin-app .historico-resumo-identificacao p span {
    margin: 0 6px;
    color: var(--fc-primary);
}

.fin-app .historico-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
}

.fin-app .historico-status.pago {
    border-color: rgba(0, 240, 181, .4);
    background: rgba(0, 240, 181, .09);
    color: var(--fc-success);
}

.fin-app .historico-status.pendente {
    border-color: rgba(255, 200, 87, .42);
    background: rgba(255, 200, 87, .09);
    color: var(--fc-warning);
}

.fin-app .historico-status.vencido {
    border-color: rgba(255, 91, 104, .42);
    background: rgba(255, 91, 104, .09);
    color: var(--fc-danger);
}

.fin-app .historico-resumo-grade {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.fin-app .historico-resumo-grade > div,
.fin-app .historico-grafico-indicadores > div {
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(23, 56, 90, .76);
    border-radius: 11px;
    background: rgba(4, 10, 22, .5);
}

.fin-app .historico-resumo-grade span,
.fin-app .historico-grafico-indicadores span {
    display: block;
    margin-bottom: 7px;
    color: var(--fc-text-muted);
    font-size: 11px;
    font-weight: 700;
}

.fin-app .historico-resumo-grade strong,
.fin-app .historico-grafico-indicadores strong {
    display: block;
    overflow: hidden;
    color: var(--fc-text);
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fin-app .historico-filtro-ano {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}

.fin-app .historico-filtro-ano label {
    color: var(--fc-text-light);
    font-size: 12px;
    font-weight: 800;
}

.fin-app .historico-filtro-ano select {
    width: 112px;
    min-height: 40px;
    margin: 0;
    padding: 0 34px 0 12px;
    border-color: var(--fc-border);
    background-color: var(--fc-bg-deep);
    color: var(--fc-text);
    font-weight: 800;
}

.fin-app .historico-grafico-indicadores {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 12px;
    margin: 20px 0 10px;
}

.fin-app .historico-grafico-indicadores strong {
    color: var(--historico-cor);
    font-size: 19px;
}

.fin-app .historico-grafico-scroll {
    width: 100%;
    overflow-x: auto;
    margin-top: 8px;
    border: 1px solid rgba(23, 56, 90, .66);
    border-radius: 12px;
    background: rgba(4, 10, 22, .55);
}

.fin-app .historico-grafico-linha {
    display: block;
    width: 100%;
    min-width: 760px;
    height: auto;
}

.fin-app .historico-grafico-grade {
    stroke: rgba(141, 165, 196, .14);
    stroke-width: 1;
}

.fin-app .historico-grafico-eixo-valor,
.fin-app .historico-grafico-eixo-mes {
    fill: var(--fc-text-muted);
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
}

.fin-app .historico-grafico-traco {
    fill: none;
    stroke: var(--historico-cor);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 5px 8px rgba(var(--historico-cor-rgb), .2));
}

.fin-app .historico-grafico-ponto {
    fill: var(--fc-card);
    stroke: var(--historico-cor);
    stroke-width: 4;
}

.fin-app .historico-grafico-rotulo-ponto {
    fill: var(--fc-text);
    stroke: var(--fc-bg-deep);
    stroke-width: 5px;
    stroke-linejoin: round;
    paint-order: stroke fill;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 900;
    pointer-events: none;
}

.fin-app .historico-grafico-vazio,
.fin-app .historico-lista-vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    margin-top: 18px;
    border: 1px dashed rgba(141, 165, 196, .3);
    border-radius: 12px;
    color: var(--fc-text-muted);
    text-align: center;
}

.fin-app .historico-tabela-cabecalho,
.fin-app .historico-pagamento-linha {
    display: grid;
    grid-template-columns: minmax(220px, 1.55fr) minmax(190px, 1.15fr) 90px 120px minmax(210px, auto);
    gap: 16px;
    align-items: center;
}

.fin-app .historico-tabela-cabecalho {
    margin-top: 20px;
    padding: 0 14px 9px;
    color: var(--fc-text-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.fin-app .historico-pagamento-linha {
    min-height: 76px;
    padding: 13px 14px;
    border-top: 1px solid rgba(23, 56, 90, .58);
}

.fin-app .historico-pagamento-linha:first-child {
    border-top-color: rgba(0, 229, 255, .24);
}

.fin-app .historico-pagamento-lancamento,
.fin-app .historico-pagamento-categoria {
    min-width: 0;
}

.fin-app .historico-pagamento-lancamento strong,
.fin-app .historico-pagamento-categoria strong,
.fin-app .historico-pagamento-valor strong {
    display: block;
    overflow: hidden;
    color: var(--fc-text);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fin-app .historico-pagamento-lancamento span,
.fin-app .historico-pagamento-categoria span {
    display: block;
    overflow: hidden;
    margin-top: 5px;
    color: var(--fc-text-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fin-app .historico-pagamento-parcela span {
    display: inline-flex;
    padding: 6px 9px;
    border: 1px solid rgba(var(--historico-cor-rgb), .34);
    border-radius: 999px;
    background: rgba(var(--historico-cor-rgb), .07);
    color: var(--historico-cor);
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.fin-app .historico-pagamento-valor strong {
    color: var(--historico-cor);
    font-size: 14px;
}

.fin-app .historico-pagamento-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.fin-app .historico-pagamento-acoes a,
.fin-app .historico-pagamento-acoes button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    margin: 0;
    padding: 0 10px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.fin-app .historico-pagamento-acoes a {
    border: 1px solid rgba(0, 229, 255, .38);
    background: rgba(0, 229, 255, .07);
    color: var(--fc-primary);
}

.fin-app .historico-pagamento-acoes button {
    border: 1px solid rgba(255, 91, 104, .4);
    background: rgba(255, 91, 104, .07);
    color: var(--fc-danger);
}

.fin-app .historico-pagamento-acoes button:disabled {
    opacity: .5;
    cursor: wait;
}

.fin-app .historico-cancelamento-status {
    min-height: 20px;
    margin: 10px 0 0;
    color: var(--fc-warning);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.fin-app .historico-lancamento-erro strong {
    color: var(--fc-danger);
    font-size: 18px;
}

.fin-app .historico-lancamento-erro p {
    color: var(--fc-text-light);
}

.fin-app .historico-lancamento-erro a {
    color: var(--fc-primary);
    font-weight: 800;
}

@media (max-width: 1050px) {
    .fin-app .historico-resumo-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fin-app .historico-tabela-cabecalho,
    .fin-app .historico-pagamento-linha {
        grid-template-columns: minmax(200px, 1.4fr) minmax(170px, 1fr) 80px 110px;
    }

    .fin-app .historico-tabela-cabecalho span:last-child {
        display: none;
    }

    .fin-app .historico-pagamento-acoes {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .fin-app .historico-lancamento-conteudo {
        padding-left: 12px;
        padding-right: 12px;
    }

    .fin-app .historico-resumo-card,
    .fin-app .historico-grafico-card,
    .fin-app .historico-pagamentos-card,
    .fin-app .historico-lancamento-erro {
        padding: 16px;
        border-radius: 13px;
    }

    .fin-app .historico-resumo-identificacao,
    .fin-app .historico-secao-topo {
        flex-direction: column;
        gap: 13px;
    }

    .fin-app .historico-resumo-grade,
    .fin-app .historico-grafico-indicadores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fin-app .historico-filtro-ano {
        width: 100%;
        justify-content: space-between;
    }

    .fin-app .historico-filtro-ano select {
        width: 130px;
    }

    .fin-app .historico-tabela-cabecalho {
        display: none;
    }

    .fin-app .historico-pagamentos-lista {
        margin-top: 14px;
    }

    .fin-app .historico-pagamento-linha {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "lancamento valor"
            "categoria parcela"
            "acoes acoes";
        gap: 11px 12px;
        padding: 15px 2px;
    }

    .fin-app .historico-pagamento-lancamento { grid-area: lancamento; }
    .fin-app .historico-pagamento-categoria { grid-area: categoria; }
    .fin-app .historico-pagamento-parcela { grid-area: parcela; justify-self: end; }
    .fin-app .historico-pagamento-valor { grid-area: valor; justify-self: end; }
    .fin-app .historico-pagamento-acoes { grid-area: acoes; }

    .fin-app .historico-pagamento-lancamento strong,
    .fin-app .historico-pagamento-categoria strong {
        white-space: normal;
    }
}

@media (max-width: 430px) {
    .fin-app .historico-resumo-grade,
    .fin-app .historico-grafico-indicadores {
        grid-template-columns: minmax(0, 1fr);
    }

    .fin-app .historico-pagamento-acoes {
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        width: 100%;
    }
}

/* V129 - prioridade final dos ajustes visuais */
.fin-app .historico-lancamento-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.fin-app .historico-lancamento-voltar {
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid rgba(0, 229, 255, .72);
    border-radius: 9px;
    background: rgba(0, 229, 255, .1);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

.fin-app .historico-lancamento-voltar svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fin-app .historico-grafico-indicadores {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.fin-app .historico-grafico-indicadores .historico-indicador-pendente strong {
    color: var(--fc-warning);
}

.fin-app .historico-grafico-indicadores .historico-indicador-quitado strong {
    color: var(--fc-success);
}

.fin-app .historico-grafico-indicadores .historico-indicador-total-quitado strong {
    color: var(--fc-success);
}

.fin-app .historico-grafico-indicadores .historico-indicador-saldo-pendente strong {
    color: var(--fc-warning);
}

.fin-app .historico-grafico-legenda {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin: 12px 2px 8px;
    color: var(--fc-text-light);
    font-size: 11px;
    font-weight: 800;
}

.fin-app .historico-grafico-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fin-app .historico-grafico-legenda i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .04);
}

.fin-app .historico-grafico-legenda .status-pago {
    color: var(--fc-success);
}

.fin-app .historico-grafico-legenda .status-pendente {
    color: var(--fc-warning);
}

.fin-app .historico-grafico-legenda .status-vencido {
    color: var(--fc-danger);
}

.fin-app .historico-grafico-divisor-mes {
    stroke: rgba(141, 165, 196, .08);
    stroke-width: 1;
}

.fin-app .historico-grafico-traco {
    stroke: rgba(141, 165, 196, .42);
    stroke-width: 2.5;
    filter: none;
}

.fin-app .historico-grafico-ponto.status-pago {
    stroke: var(--fc-success);
}

.fin-app .historico-grafico-ponto.status-pendente {
    stroke: var(--fc-warning);
}

.fin-app .historico-grafico-ponto.status-vencido {
    stroke: var(--fc-danger);
}

.fin-app .historico-grafico-rotulo-ponto.status-pago {
    fill: var(--fc-success);
}

.fin-app .historico-grafico-rotulo-ponto.status-pendente {
    fill: var(--fc-warning);
}

.fin-app .historico-grafico-rotulo-ponto.status-vencido {
    fill: var(--fc-danger);
}

@media (min-width: 1251px) {
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .linha-lancamento-final {
        grid-template-columns: 62px minmax(150px, 1.25fr) minmax(130px, 1fr) 86px 100px 226px 70px !important;
        grid-template-areas: "data lancamento categoria status valor acoes dias" !important;
        align-items: center !important;
        column-gap: 10px !important;
        row-gap: 0 !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .linha-lancamento-final {
        min-height: 80px !important;
        height: auto !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .data-lancamento-final { grid-area: data !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .coluna-principal-final:not(.categoria-final) { grid-area: lancamento !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .categoria-final { grid-area: categoria !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .status-final { grid-area: status !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .valor-final { grid-area: valor !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .dias-final {
        grid-area: dias !important;
        align-self: center !important;
        justify-self: end !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final {
        grid-area: acoes !important;
        display: grid !important;
        grid-template-rows: 30px !important;
        align-items: center !important;
        align-self: center !important;
        justify-self: stretch !important;
        gap: 5px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final.acoes-com-historico {
        grid-template-columns: 31px repeat(3, minmax(0, 1fr)) !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final.acoes-sem-historico {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-historico-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-pagar-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-editar-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-excluir-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-cancelar-final {
        grid-column: auto !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 2px 4px !important;
        font-size: 7px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-historico-final {
        width: 31px !important;
        padding: 0 !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-pagar-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-editar-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-excluir-final,
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .acoes-final > .botao-cancelar-final {
        width: 100% !important;
    }

    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(1) { grid-area: data !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(2) { grid-area: lancamento !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(3) { grid-area: categoria !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(4) { grid-area: status !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(5) { grid-area: valor !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(6) { grid-area: acoes !important; }
    body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .cabecalho-lancamentos-dashboard > div:nth-child(7) { grid-area: dias !important; }
}

@media (max-width: 1050px) {
    .fin-app .historico-grafico-indicadores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   V132 - REFINAMENTO FINAL DAS AÇÕES PAGAS NO DESKTOP
========================================================= */
@media (min-width: 1251px) {
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final.lancamento-quitado
    .acoes-final.acoes-com-historico {
        grid-template-columns: 30px minmax(52px, 1fr) minmax(52px, 1fr) minmax(82px, 1.4fr) !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final.lancamento-quitado
    .acoes-final.acoes-com-historico > .botao-historico-final {
        width: 30px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final.lancamento-quitado
    .acoes-final.acoes-com-historico > .botao-editar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final.lancamento-quitado
    .acoes-final.acoes-com-historico > .botao-excluir-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final.lancamento-quitado
    .acoes-final.acoes-com-historico > .botao-cancelar-final {
        overflow: hidden !important;
        padding-left: 3px !important;
        padding-right: 3px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   V131 - QUATRO AÇÕES NA MESMA LINHA NO MOBILE
========================================================= */
@media (max-width: 900px) {
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final
    .acoes-final.acoes-com-historico {
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr) minmax(60px, 1.35fr) !important;
        grid-template-rows: 34px !important;
        grid-auto-flow: column !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final
    .acoes-final.acoes-com-historico > .botao-historico-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final
    .acoes-final.acoes-com-historico > .botao-pagar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final
    .acoes-final.acoes-com-historico > .botao-editar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final
    .acoes-final.acoes-com-historico > .botao-excluir-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final
    .acoes-final.acoes-com-historico > .botao-cancelar-final {
        grid-column: auto !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 34px !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 2px 3px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        font-size: 7px !important;
        line-height: 1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final
    .acoes-final.acoes-com-historico > .botao-historico-final {
        width: 32px !important;
        padding: 0 !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final
    .acoes-final.acoes-com-historico > .botao-historico-final svg {
        width: 16px !important;
        height: 16px !important;
    }
}

@media (max-width: 360px) {
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final
    .acoes-final.acoes-com-historico {
        grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) minmax(58px, 1.3fr) !important;
        gap: 3px !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final
    .acoes-final.acoes-com-historico > .botao-historico-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final
    .acoes-final.acoes-com-historico > .botao-pagar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final
    .acoes-final.acoes-com-historico > .botao-editar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final
    .acoes-final.acoes-com-historico > .botao-excluir-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final
    .acoes-final.acoes-com-historico > .botao-cancelar-final {
        padding-left: 1px !important;
        padding-right: 1px !important;
        font-size: 6.5px !important;
    }
}

@media (max-width: 760px) {
    .fin-app .historico-lancamento-topo {
        align-items: stretch;
        flex-direction: column;
    }

    .fin-app .historico-lancamento-voltar {
        align-self: flex-start;
    }
}

@media (max-width: 430px) {
    .fin-app .historico-grafico-indicadores {
        grid-template-columns: minmax(0, 1fr);
    }

    .fin-app .historico-lancamento-voltar {
        width: 100%;
    }
}

/* =========================================================
   V130 - AÇÕES PAGAS OCUPAM A COLUNA DE VENCIMENTO
========================================================= */
@media (min-width: 1251px) {
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final.lancamento-quitado {
        grid-template-areas: "data lancamento categoria status valor acoes acoes" !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final.lancamento-quitado
    .acoes-final {
        justify-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final.lancamento-quitado
    .dias-final {
        display: none !important;
    }

    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final.lancamento-quitado
    .acoes-final > .botao-pagar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final.lancamento-quitado
    .acoes-final > .botao-editar-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final.lancamento-quitado
    .acoes-final > .botao-excluir-final,
    body.fin-app.pagina-dashboard
    .lista-vencimentos-dashboard
    .linha-lancamento-final.lancamento-quitado
    .acoes-final > .botao-cancelar-final {
        overflow: hidden !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        text-overflow: ellipsis !important;
    }
}

/* V131 — usa a escala de fontes, cores e botões já existente no Dashboard. */
.fin-app .fc-fatura-resumo {display:flex;flex-wrap:wrap;gap:10px 20px;margin:4px 0 16px;font-size:12px;}
.fin-app .fc-fatura-resumo span {display:flex;flex-direction:column;gap:3px;min-width:0;}
.fin-app .fc-fatura-resumo strong {font-size:14px;overflow-wrap:anywhere;}
.fc-quitado {color:var(--fc-success, #00f0b5)!important;}
.fc-pendente {color:var(--fc-warning, #ffd166)!important;}
.fc-vencido {color:var(--fc-danger, #ff5b68)!important;}
.fin-app .fc-fatura-parcelamento {border:1px solid var(--border);border-radius:8px;padding:14px;min-width:0;margin:12px 0;}
.fin-app .fc-fatura-parcelamento legend {padding:0 6px;font-size:13px;font-weight:bold;}
.fin-app .fc-fatura-parcelamento .descricao-modal-dashboard {font-size:12px;line-height:1.5;margin-bottom:12px;}
.fin-app .fc-fatura-simulacao {padding:12px;border-radius:8px;background:rgba(0,229,255,.06);border:1px solid var(--border);line-height:1.5;font-size:12px;margin:12px 0;}
.fin-app .fc-fatura-historico {margin-top:18px;border-top:1px solid var(--border);padding-top:16px;font-size:12px;}
.fin-app .fc-fatura-historico h3 {margin:0 0 12px;font-size:14px;}
.fin-app .fc-fatura-historico .descricao-modal-dashboard {font-size:12px;line-height:1.5;}
.fin-app .fc-fatura-evento {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.fin-app .fc-fatura-evento > div {min-width:0;display:grid;gap:5px;overflow-wrap:anywhere;}
.fin-app .fc-fatura-evento small {font-size:11px;color:var(--text-light);}

/* =========================================================
   V191 - FILTROS DE LANÇAMENTOS E TRANSFERÊNCIAS
========================================================= */
body.fin-app.pagina-dashboard .aportes-fixos-dashboard{display:none!important}
body.fin-app.pagina-dashboard .filtros-status-dashboard {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 430px;
    margin: -8px 0 18px;
}

body.fin-app.pagina-dashboard .filtros-status-dashboard > small {
    grid-column: 1 / -1;
    margin: 0 2px;
    color: var(--text-light);
    font-size: 10px;
    line-height: 1.3;
}

body.fin-app.pagina-dashboard .filtro-status-dashboard,
body.fin-app.pagina-dashboard .alternar-transferencias-dashboard {
    appearance: none;
    min-width: 0;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-main);
    color: var(--text-light);
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
}

body.fin-app.pagina-dashboard .filtro-status-dashboard:hover,
body.fin-app.pagina-dashboard .alternar-transferencias-dashboard:hover {
    border-color: var(--primary);
    color: var(--primary);
}

body.fin-app.pagina-dashboard .filtro-status-dashboard[aria-pressed="false"] {
    opacity: .58;
}

body.fin-app.pagina-dashboard .filtro-status-dashboard.filtro-pendente[aria-pressed="true"] {
    border-color: rgba(255, 209, 102, .56);
    background: rgba(255, 209, 102, .07);
    color: var(--fc-warning, #ffd166);
}

body.fin-app.pagina-dashboard .filtro-status-dashboard.filtro-pago[aria-pressed="true"] {
    border-color: rgba(0, 240, 181, .52);
    background: rgba(0, 240, 181, .07);
    color: var(--fc-success, #00f0b5);
}

body.fin-app.pagina-dashboard .filtro-status-dashboard.filtro-vencido[aria-pressed="true"] {
    border-color: rgba(255, 91, 104, .55);
    background: rgba(255, 91, 104, .07);
    color: var(--fc-danger, #ff5b68);
}

body.fin-app.pagina-dashboard .icone-olho {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.fin-app.pagina-dashboard [aria-pressed="true"] > .icone-olho-fechado,
body.fin-app.pagina-dashboard [aria-expanded="true"] > .icone-olho-fechado {
    display: none;
}

body.fin-app.pagina-dashboard [aria-pressed="false"] > .icone-olho-aberto,
body.fin-app.pagina-dashboard [aria-expanded="false"] > .icone-olho-aberto {
    display: none;
}

body.fin-app.pagina-dashboard .dashboard-vazio-filtros {
    margin: 0 0 12px;
}

body.fin-app.pagina-dashboard [hidden] {
    display: none !important;
}

body.fin-app.pagina-dashboard .transferencias-dashboard-controles {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

body.fin-app.pagina-dashboard .transferencias-dashboard-controles > strong {
    margin: 0;
    color: var(--text-light);
    font-size: 11px;
    white-space: nowrap;
}

body.fin-app.pagina-dashboard .alternar-transferencias-dashboard {
    min-height: 34px;
    color: var(--primary);
    border-color: rgba(0, 229, 255, .38);
    background: rgba(0, 229, 255, .05);
}

body.fin-app.pagina-dashboard .alternar-transferencias-dashboard[aria-expanded="false"] {
    color: var(--text-light);
    border-color: var(--border);
    background: var(--bg-main);
}

@media (max-width: 620px) {
    body.fin-app.pagina-dashboard .filtros-status-dashboard {
        max-width: none;
        gap: 6px;
        margin-top: -7px;
    }

    body.fin-app.pagina-dashboard .filtro-status-dashboard {
        min-height: 40px;
        gap: 5px;
        padding: 7px 5px;
        font-size: 10px;
    }

    body.fin-app.pagina-dashboard .filtros-status-dashboard > small {
        text-align: center;
    }

    body.fin-app.pagina-dashboard .transferencias-dashboard-topo {
        align-items: flex-start;
    }

    body.fin-app.pagina-dashboard .transferencias-dashboard-controles {
        align-items: flex-end;
        flex-direction: column;
        gap: 6px;
    }

    body.fin-app.pagina-dashboard .alternar-transferencias-dashboard {
        min-height: 36px;
        padding: 7px 10px;
    }
}
.fin-app .fc-fatura-evento button {flex-shrink:0;}
.fin-app .fc-fatura-acordo {padding:12px;margin:12px 0;border:1px solid var(--border);border-radius:8px;line-height:1.5;}
.fin-app .fc-fatura-acordo summary {cursor:pointer;font-weight:bold;}
.fin-app .fc-fatura-acordo ul {padding-left:20px;}
.fin-app .fc-fatura-acordo p {margin:10px 0;}
.fin-app .fc-fatura-ajuste {border-top:1px solid var(--border);padding-top:12px;}
.fin-app .fc-previa-ajuste {overflow-wrap:anywhere;}
.fin-app .fc-previa-ajuste ul {margin:12px 0;}
.fin-app .fc-fatura-bloqueado {font-size:11px;color:var(--text-light);}
#modalPagamento > .modal-dashboard-conteudo {max-height:90dvh;overflow-y:auto;}
#campoDataLancamentoAcordo[hidden],#campoVencimentoSeparado[hidden],#opcoesFatura[hidden],#camposParcelamentoFatura[hidden],#resumoOperacaoFatura[hidden],#erroOperacaoFatura[hidden] {display:none!important;}
@media(max-width:600px) {
 .fin-app .fc-fatura-resumo {gap:10px 14px;}
 .fin-app .fc-fatura-evento {align-items:flex-start;flex-wrap:wrap;}
 .fin-app .fc-fatura-parcelamento {padding:10px;}
 #modalPagamento .grade-modal-dashboard {grid-template-columns:minmax(0,1fr);}
 #modalPagamento .acoes-modal-dashboard {display:flex;gap:8px;}
 #modalPagamento .acoes-modal-dashboard button {min-width:0;white-space:normal;}
}

/* V132 — espaço apenas para as ações presentes nas parcelas de acordo. */
body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .linha-lancamento-final .acoes-final.acoes-acordo {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 5px !important;
}

body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .linha-lancamento-final .acoes-final.acoes-acordo > .botao-historico-final {
    flex: 0 0 30px;
}

body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .linha-lancamento-final .acoes-final.acoes-acordo > .botao-pagar-final {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

body.fin-app.pagina-dashboard .lista-vencimentos-dashboard .linha-lancamento-final .acoes-final.acoes-acordo > .botao-editar-final.botao-acordo-final {
    flex: 1.7 1 0;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: 3px 6px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    overflow: hidden !important;
    text-overflow: clip !important;
    line-height: 1.2 !important;
}

/* Mesmo corpo de texto dos resumos; títulos, cores e botões preservados. */
body.fin-app.pagina-dashboard #modalPagamento .descricao-modal-dashboard,
body.fin-app.pagina-dashboard .mensagem-sucesso,
body.fin-app.pagina-dashboard .feedback-dashboard,
body.fin-app.pagina-dashboard .modal-confirmacao-status.sucesso,
body.fin-app.pagina-dashboard #modalGlobalFinControleMensagem {
    font-family: inherit;
    font-size: 12px !important;
    font-weight: 400;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
}

body.fin-app.pagina-dashboard #opcoesFatura .descricao-modal-dashboard {
    margin-top: 6px;
    margin-bottom: 0;
}

/* =========================================================
   V142–V148 — DRILL-DOWN, GRÁFICOS INTERNOS E CONTORNO DE STATUS
   Verde: pago | Amarelo: pendente | Vermelho: vencido.
========================================================= */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-icone{
    position:relative!important;
    overflow:visible!important;
    border:3px solid transparent!important;
    background:
        linear-gradient(#0b1930,#0b1930) padding-box,
        var(--fc-status-anel,conic-gradient(#35405b 0 100%)) border-box!important;
    box-shadow:0 0 0 1px rgba(255,255,255,.055)!important;
    cursor:pointer!important;
    isolation:isolate;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-icone::after,
body.fin-app.pagina-dashboard .fc-drill-icone::after,
body.fin-app.pagina-dashboard .fc-lancamento-marca::after{
    content:"";
    position:absolute;
    inset:-5px;
    z-index:3;
    border-radius:inherit;
    padding:3px;
    background:
        conic-gradient(
            #00e5ff 0 var(--fc-pressao,0deg),
            rgba(0,229,255,.08) var(--fc-pressao,0deg) 360deg
        );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:0;
    pointer-events:none;
    transition:opacity .12s ease;
}

body.fin-app.pagina-dashboard .fc-segurando .dashboard-legenda-icone::after,
body.fin-app.pagina-dashboard .fc-segurando .fc-drill-icone::after,
body.fin-app.pagina-dashboard .fc-segurando .fc-lancamento-marca::after{
    opacity:1;
    filter:drop-shadow(0 0 5px rgba(0,229,255,.72));
}

body.fin-app.pagina-dashboard .fc-pressao-progresso{
    position:fixed;
    z-index:10140;
    display:grid;
    place-items:center;
    width:82px;
    height:82px;
    box-sizing:border-box;
    border-radius:50%;
    background:
        conic-gradient(
            #00e5ff 0 var(--fc-progresso-pct,0%),
            rgba(0,229,255,.13) var(--fc-progresso-pct,0%) 100%
        );
    box-shadow:
        0 0 0 1px rgba(0,229,255,.40),
        0 10px 32px rgba(0,0,0,.48),
        0 0 24px rgba(0,229,255,.20);
    opacity:0;
    visibility:hidden;
    transform:scale(.82);
    pointer-events:none;
    transition:opacity .10s ease,transform .10s ease,visibility .10s ease;
}

body.fin-app.pagina-dashboard .fc-pressao-progresso::before{
    content:"";
    position:absolute;
    inset:7px;
    border-radius:50%;
    border:1px solid rgba(0,229,255,.20);
    background:#071225;
}

body.fin-app.pagina-dashboard .fc-pressao-progresso strong{
    position:relative;
    z-index:1;
    color:#fff;
    font-size:18px;
    font-weight:950;
    line-height:1;
    text-shadow:0 0 12px rgba(0,229,255,.55);
}

body.fin-app.pagina-dashboard .fc-pressao-progresso.ativo{
    opacity:1;
    visibility:visible;
    transform:scale(1);
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item{
    -webkit-user-select:none!important;
    user-select:none!important;
}

body.fin-app.pagina-dashboard .fc-hierarquia-camada{
    position:fixed;
    inset:0;
    z-index:10080;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(1,6,17,.91);
    backdrop-filter:blur(8px);
}

body.fin-app.pagina-dashboard .fc-hierarquia-painel{
    position:relative;
    width:min(760px,100%);
    max-height:calc(100dvh - 36px);
    overflow:auto;
    padding:24px;
    border:1px solid rgba(0,229,255,.30);
    border-radius:22px;
    background:linear-gradient(180deg,#0a1930 0%,#071225 100%);
    box-shadow:0 28px 90px rgba(0,0,0,.58);
    color:var(--text,#fff);
}

body.fin-app.pagina-dashboard .fc-hierarquia-topo{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 42px;
    align-items:center;
    gap:10px;
    min-height:52px;
    margin-bottom:0;
}

body.fin-app.pagina-dashboard .fc-hierarquia-topo h3{
    display:flex;
    height:52px;
    align-items:center;
    justify-content:center;
    margin:0;
    overflow:hidden;
    color:var(--text,#fff);
    font-size:21px;
    line-height:1.2;
    text-align:center;
    text-transform:uppercase;
}

body.fin-app.pagina-dashboard .fc-hierarquia-voltar,
body.fin-app.pagina-dashboard .fc-hierarquia-fechar{
    width:42px;
    min-width:42px;
    height:42px;
    min-height:42px;
    padding:0;
    border:1px solid rgba(0,229,255,.28);
    border-radius:12px;
    background:rgba(0,229,255,.07);
    color:#00e5ff;
    font-size:21px;
    font-weight:900;
    cursor:pointer;
}

body.fin-app.pagina-dashboard .fc-hierarquia-voltar[hidden]{
    visibility:hidden;
    display:block!important;
}

body.fin-app.pagina-dashboard .fc-hierarquia-caminho,
body.fin-app.pagina-dashboard .fc-hierarquia-instrucao{
    display:block;
    margin:0 auto;
    color:var(--text-light,#aebbd0);
    text-align:center;
    overflow-wrap:anywhere;
}

body.fin-app.pagina-dashboard .fc-hierarquia-caminho{
    height:22px;
    min-height:22px;
    max-height:22px;
    overflow:hidden;
    font-size:11px;
    font-weight:800;
    color:#00e5ff;
    line-height:22px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

body.fin-app.pagina-dashboard .fc-hierarquia-instrucao{
    display:flex;
    height:42px;
    min-height:42px;
    max-height:42px;
    align-items:center;
    justify-content:center;
    margin-top:4px;
    overflow:hidden;
    font-size:12px;
    line-height:1.45;
}

body.fin-app.pagina-dashboard .fc-hierarquia-resumo{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:12px 0 8px;
}

body.fin-app.pagina-dashboard .fc-hierarquia-resumo[hidden]{
    display:none!important;
}

body.fin-app.pagina-dashboard .fc-hierarquia-donut{
    position:relative;
    --fc-hierarquia-anel-tamanho:250px;
    width:var(--fc-hierarquia-anel-tamanho);
    height:var(--fc-hierarquia-anel-tamanho);
    min-width:var(--fc-hierarquia-anel-tamanho);
    min-height:var(--fc-hierarquia-anel-tamanho);
    max-width:var(--fc-hierarquia-anel-tamanho);
    max-height:var(--fc-hierarquia-anel-tamanho);
    flex:0 0 var(--fc-hierarquia-anel-tamanho);
    aspect-ratio:1/1;
    border-radius:50%;
    background:var(--fc-hierarquia-grafico,conic-gradient(#35395c 0 100%));
    box-shadow:0 12px 32px rgba(0,0,0,.28);
}

body.fin-app.pagina-dashboard .fc-hierarquia-donut::after{
    content:"";
    position:absolute;
    inset:17.5%;
    border:1px solid rgba(255,255,255,.05);
    border-radius:50%;
    background:#08162b;
}

body.fin-app.pagina-dashboard .fc-hierarquia-donut-centro{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:0 28px;
    box-sizing:border-box;
    text-align:center;
    pointer-events:none;
}

body.fin-app.pagina-dashboard .fc-hierarquia-donut-centro small{
    color:var(--text-light,#aebbd0);
    font-size:12px;
    font-weight:900;
    line-height:1;
    text-transform:uppercase;
}

body.fin-app.pagina-dashboard .fc-hierarquia-donut-centro strong{
    margin-top:6px;
    color:#fff;
    font-size:22px;
    font-weight:950;
    line-height:1;
    white-space:nowrap;
}

body.fin-app.pagina-dashboard .fc-hierarquia-lista{
    display:grid;
    gap:8px;
    margin-top:18px;
}

body.fin-app.pagina-dashboard .fc-drill-item,
body.fin-app.pagina-dashboard .fc-status-item,
body.fin-app.pagina-dashboard .fc-lancamento-item{
    width:100%;
    min-width:0;
    box-sizing:border-box;
    border:1px solid rgba(109,143,188,.18);
    border-radius:13px;
    background:rgba(10,25,49,.78);
    color:var(--text,#fff);
}

body.fin-app.pagina-dashboard .fc-drill-item{
    position:relative;
    display:grid;
    grid-template-columns:10px 46px minmax(0,1fr) auto;
    grid-template-areas:"cor icone nome valor" "cor icone nome percentual";
    align-items:center;
    gap:2px 10px;
    min-height:62px;
    padding:8px 12px;
    text-align:left;
    cursor:pointer;
    touch-action:pan-y;
}

body.fin-app.pagina-dashboard .fc-drill-cor{
    grid-area:cor;
    display:block;
    width:9px;
    height:9px;
    border-radius:50%;
}

body.fin-app.pagina-dashboard .fc-drill-item:hover,
body.fin-app.pagina-dashboard .fc-drill-item:focus-visible{
    border-color:rgba(0,229,255,.42);
    background:rgba(0,229,255,.075);
    outline:none;
}

body.fin-app.pagina-dashboard .fc-drill-icone{
    grid-area:icone;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    box-sizing:border-box;
    border:3px solid transparent;
    border-radius:12px;
    background:
        linear-gradient(#0d203c,#0d203c) padding-box,
        var(--fc-status-anel,conic-gradient(#35405b 0 100%)) border-box;
    box-shadow:0 0 0 1px rgba(255,255,255,.055);
    color:#fff;
    font-size:20px;
    cursor:pointer;
    isolation:isolate;
}

body.fin-app.pagina-dashboard .fc-drill-nome{
    grid-area:nome;
    min-width:0;
    overflow-wrap:anywhere;
    font-size:14px;
    font-weight:850;
}

body.fin-app.pagina-dashboard .fc-drill-valor{
    grid-area:valor;
    color:#fff;
    font-size:14px;
    font-weight:900;
    white-space:nowrap;
}

body.fin-app.pagina-dashboard .fc-drill-pct{
    grid-area:percentual;
    color:#00e5ff;
    font-size:12px;
    font-weight:900;
    text-align:right;
}

body.fin-app.pagina-dashboard .fc-drill-item.fc-item-oculto,
body.fin-app.pagina-dashboard .fc-lancamento-item.fc-item-oculto{
    opacity:.48;
}

body.fin-app.pagina-dashboard .fc-drill-item.fc-item-oculto .fc-drill-nome,
body.fin-app.pagina-dashboard .fc-lancamento-item.fc-item-oculto .fc-lancamento-data,
body.fin-app.pagina-dashboard .fc-lancamento-item.fc-item-oculto .fc-lancamento-instituicao{
    text-decoration:line-through;
    text-decoration-thickness:1px;
}

body.fin-app.pagina-dashboard .fc-drill-item.fc-item-oculto .fc-drill-pct,
body.fin-app.pagina-dashboard .fc-lancamento-item.fc-item-oculto .fc-lancamento-status{
    color:var(--text-light,#aebbd0)!important;
}

body.fin-app.pagina-dashboard .fc-status-item{
    display:grid;
    grid-template-columns:12px minmax(0,1fr) auto;
    grid-template-areas:"cor nome valor" ". nome pct";
    align-items:center;
    gap:2px 10px;
    min-height:58px;
    padding:10px 13px;
}

body.fin-app.pagina-dashboard .fc-status-cor{
    grid-area:cor;
    width:11px;
    height:11px;
    border-radius:50%;
}

body.fin-app.pagina-dashboard .fc-status-nome{
    grid-area:nome;
    font-size:14px;
    font-weight:850;
}

body.fin-app.pagina-dashboard .fc-status-valor{
    grid-area:valor;
    font-size:14px;
    font-weight:900;
    white-space:nowrap;
}

body.fin-app.pagina-dashboard .fc-status-pct{
    grid-area:pct;
    color:var(--text-light,#aebbd0);
    font-size:11px;
    font-weight:800;
    text-align:right;
}

body.fin-app.pagina-dashboard .fc-lancamento-item{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:5px 12px;
    padding:12px 14px 12px 28px;
    cursor:pointer;
    transition:opacity .16s ease,border-color .16s ease,background-color .16s ease;
}

body.fin-app.pagina-dashboard .fc-lancamento-item:hover,
body.fin-app.pagina-dashboard .fc-lancamento-item:focus-visible{
    border-color:rgba(0,229,255,.42);
    background:rgba(0,229,255,.075);
    outline:none;
}

body.fin-app.pagina-dashboard .fc-lancamento-cor{
    position:absolute;
    left:10px;
    top:50%;
    display:block;
    width:9px;
    height:9px;
    border-radius:50%;
    transform:translateY(-50%);
}

body.fin-app.pagina-dashboard .fc-lancamento-identidade{
    grid-column:1;
    grid-row:1 / span 2;
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    align-items:center;
    gap:10px;
    min-width:0;
}

body.fin-app.pagina-dashboard .fc-lancamento-marca{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    box-sizing:border-box;
    padding:5px;
    border:3px solid transparent;
    border-radius:12px;
    background:
        linear-gradient(#fff,#fff) padding-box,
        var(--fc-status-anel,conic-gradient(#35405b 0 100%)) border-box;
    box-shadow:0 0 0 1px rgba(255,255,255,.055);
    color:#071225;
    font-size:21px;
    overflow:visible;
    cursor:pointer;
    isolation:isolate;
}

body.fin-app.pagina-dashboard .fc-lancamento-marca > img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:7px;
}

body.fin-app.pagina-dashboard .fc-lancamento-marca > img.fc-lancamento-marca-secundaria{
    position:absolute;
    right:-5px;
    bottom:-5px;
    width:22px;
    height:16px;
    padding:2px;
    border:1px solid rgba(0,229,255,.38);
    border-radius:5px;
    background:#fff;
    box-shadow:0 3px 9px rgba(0,0,0,.38);
    object-fit:contain;
}

body.fin-app.pagina-dashboard .fc-lancamento-textos{
    display:grid;
    gap:5px;
    min-width:0;
}

body.fin-app.pagina-dashboard .fc-lancamento-data,
body.fin-app.pagina-dashboard .fc-lancamento-instituicao,
body.fin-app.pagina-dashboard .fc-lancamento-status{
    min-width:0;
    overflow-wrap:anywhere;
}

body.fin-app.pagina-dashboard .fc-lancamento-data{
    color:#fff;
    font-size:13px;
    font-weight:900;
}

body.fin-app.pagina-dashboard .fc-lancamento-instituicao{
    color:var(--text-light,#aebbd0);
    font-size:11px;
}

body.fin-app.pagina-dashboard .fc-lancamento-valor{
    grid-column:2;
    grid-row:1;
    color:#fff;
    font-size:14px;
    font-weight:900;
    white-space:nowrap;
}

body.fin-app.pagina-dashboard .fc-lancamento-status{
    grid-column:2;
    grid-row:2;
    font-size:10px;
    font-weight:900;
    text-align:right;
}

body.fin-app.pagina-dashboard .fc-lancamento-status.pago{color:#00d9a3;}
body.fin-app.pagina-dashboard .fc-lancamento-status.pendente,
body.fin-app.pagina-dashboard .fc-lancamento-status.parcial{color:#ffc857;}
body.fin-app.pagina-dashboard .fc-lancamento-status.vencido{color:#ff5b68;}

body.fin-app.pagina-dashboard .fc-hierarquia-vazio{
    padding:24px 14px;
    color:var(--text-light,#aebbd0);
    text-align:center;
    font-size:13px;
}

body.fc-hierarquia-aberta{overflow:hidden;}

@media(max-width:600px){
    body.fin-app.pagina-dashboard .fc-hierarquia-camada{
        align-items:stretch;
        padding:0;
    }

    body.fin-app.pagina-dashboard .fc-hierarquia-painel{
        width:100%;
        max-height:none;
        min-height:100dvh;
        padding:16px 12px 28px;
        border:0;
        border-radius:0;
    }

    body.fin-app.pagina-dashboard .fc-hierarquia-topo h3{font-size:18px;}
    body.fin-app.pagina-dashboard .fc-hierarquia-donut{
        --fc-hierarquia-anel-tamanho:min(64vw,230px);
    }
    body.fin-app.pagina-dashboard .fc-hierarquia-donut-centro strong{font-size:22px;}
    body.fin-app.pagina-dashboard .fc-drill-item{padding:8px 9px;}
    body.fin-app.pagina-dashboard .fc-drill-nome{font-size:13px;}
    body.fin-app.pagina-dashboard .fc-drill-valor{font-size:13px;}
}

/* =========================================================
   V150 - PLANO DE VIDA NO DASHBOARD
========================================================= */
.dashboard-plano-vida {
    margin-top: 20px;
}

.dashboard-plano-resumo {
    display: grid;
    grid-template-columns: minmax(260px, 1.7fr) repeat(3, minmax(150px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.dashboard-plano-principal,
.dashboard-plano-dado {
    border: 1px solid var(--border, #263653);
    background: rgba(5, 14, 29, .55);
    border-radius: 14px;
    padding: 16px;
}

.dashboard-plano-principal > span,
.dashboard-plano-dado span {
    display: block;
    color: var(--text-muted, #aebbd0);
    font-size: 12px;
    margin-bottom: 6px;
}

.dashboard-plano-principal > strong {
    display: block;
    font-size: 22px;
    color: var(--text, #fff);
}

.dashboard-plano-principal small {
    display: block;
    margin-top: 6px;
    color: var(--text-muted, #aebbd0);
}

.dashboard-plano-principal b {
    color: var(--primary, #00e5ff);
    font-size: 13px;
}

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

.dashboard-plano-dado strong {
    color: var(--text, #fff);
    font-size: 19px;
}

.dashboard-plano-mensal strong {
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.4;
}

.dashboard-plano-valores {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-plano-dado .dashboard-plano-valores span {
    display: inline;
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.dashboard-plano-valor-segunda-linha {
    color: var(--primary, #00e5ff) !important;
}

.dashboard-plano-mini-barra {
    height: 7px;
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid var(--border, #263653);
    border-radius: 999px;
    background: #07101d;
}

.dashboard-plano-mini-barra span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg,#00c9ff,#00efaf);
}

.dashboard-plano-mini-barra-qualidade span {
    background: linear-gradient(90deg,#00c9ff,#9d7cff);
}

.dashboard-plano-barra {
    height: 11px;
    margin: 14px 0 7px;
    border-radius: 999px;
    overflow: hidden;
    background: #07101d;
    border: 1px solid var(--border, #263653);
}

.dashboard-plano-barra span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #00c9ff, #00efaf);
}

.dashboard-plano-vazio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 18px;
    border: 1px dashed var(--border, #263653);
    border-radius: 14px;
    color: var(--text-muted, #aebbd0);
}

.dashboard-plano-vazio strong {
    color: var(--text, #fff);
    font-size: 18px;
}

@media (max-width: 980px) {
    .dashboard-plano-resumo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-plano-principal {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .dashboard-plano-resumo {
        grid-template-columns: 1fr;
    }

    .dashboard-plano-principal {
        grid-column: auto;
    }

    .dashboard-plano-mensal {
        padding: 14px 12px;
    }

    .dashboard-plano-mensal strong {
        font-size: 13px;
        letter-spacing: -.2px;
    }

    .dashboard-plano-valores {
        display: block;
        white-space: nowrap;
    }

    .dashboard-plano-valor-segunda-linha::before {
        content: " · ";
        color: var(--text, #fff);
    }

    .dashboard-plano-sufixo-desktop {
        display: none !important;
    }
}

/* =========================================================
   V157 - META COMPACTA NA LINHA INTEIRA DA CATEGORIA
========================================================= */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-modal-camada
.dashboard-grafico-modal-lista .dashboard-legenda-item.tem-meta {
    min-height: 76px !important;
    padding: 10px 13px !important;
    border: 1px solid rgba(0, 229, 255, .42) !important;
    border-radius: 13px !important;
    background: rgba(0, 229, 255, .045) !important;
    margin-bottom: 8px !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-meta-categoria-resumo {
    display: block;
    margin-top: 6px;
    color: var(--primary, #00e5ff);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0;
    white-space: normal;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-modal-camada
.dashboard-grafico-modal-lista .dashboard-legenda-item.tem-meta > .dashboard-legenda-nome {
    color: var(--text-muted, #aebbd0) !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-modal-camada
.dashboard-grafico-modal-lista .dashboard-legenda-item.tem-meta.meta-alerta {
    border-color: rgba(255, 184, 77, .72) !important;
    background: rgba(255, 184, 77, .065) !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item.meta-alerta
.dashboard-meta-categoria-resumo {
    color: #ffbf55;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-modal-camada
.dashboard-grafico-modal-lista .dashboard-legenda-item.tem-meta.meta-excedida {
    border: 1px solid rgba(255, 91, 104, .58) !important;
    background: rgba(255, 91, 104, .045) !important;
    box-shadow: none !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item.meta-excedida
.dashboard-meta-categoria-resumo {
    color: #ff6578;
}

@media (max-width: 620px) {
    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-modal-camada
    .dashboard-grafico-modal-lista .dashboard-legenda-item.tem-meta {
        min-height: 74px !important;
        padding: 9px 10px !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-meta-categoria-resumo {
        margin-top: 5px;
        font-size: 12.5px;
    }
}

/* =========================================================
   V192 - HIDDEN SEMPRE PREVALECE NOS FILTROS DO DASHBOARD
========================================================= */
html body.fin-app.pagina-dashboard [hidden] {
    display: none !important;
}

/* =========================================================
   V193 - RENTABILIDADE REAL E PROJETADA DOS INVESTIMENTOS
========================================================= */
.rentabilidade-relatorio {
    margin: 22px 0 26px;
    padding: 24px;
    border: 1px solid rgba(0, 229, 255, .22);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(7, 24, 43, .96), rgba(5, 13, 28, .98));
}

.rentabilidade-relatorio-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.rentabilidade-relatorio-kicker {
    color: #00e5ff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
}

.rentabilidade-relatorio-topo h3 {
    margin: 5px 0 7px;
    color: var(--text, #f7fbff);
    font-size: clamp(23px, 3vw, 31px);
}

.rentabilidade-relatorio-topo p {
    max-width: 720px;
    margin: 0;
    color: var(--text-muted, #aebbd0);
    line-height: 1.55;
}

.rentabilidade-relatorio-ajustar {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 10px 16px;
    border: 1px solid rgba(0, 229, 255, .52);
    border-radius: 12px;
    color: #00e5ff;
    font-weight: 800;
    text-decoration: none;
}

.rentabilidade-aportes-chave {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 18px;
    color: var(--text, #f7fbff);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
}

.rentabilidade-aportes-controle {
    position: relative;
    width: 44px;
    height: 24px;
    flex: 0 0 44px;
    border: 1px solid rgba(174, 187, 208, .45);
    border-radius: 999px;
    background: rgba(6, 16, 31, .9);
    transition: .2s ease;
}

.rentabilidade-aportes-controle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #8f9bb0;
    transition: .2s ease;
}

.rentabilidade-aportes-chave.ativo .rentabilidade-aportes-controle {
    border-color: rgba(255, 184, 77, .75);
    background: rgba(255, 184, 77, .17);
}

.rentabilidade-aportes-chave.ativo .rentabilidade-aportes-controle::after {
    left: 23px;
    background: #ffbf55;
}

.rentabilidade-aportes-chave:focus-visible .rentabilidade-aportes-controle {
    outline: 2px solid #00e5ff;
    outline-offset: 3px;
}

.rentabilidade-aportes-chave strong,
.rentabilidade-aportes-chave small {
    display: block;
}

.rentabilidade-aportes-chave small {
    margin-top: 2px;
    color: var(--text-muted, #aebbd0);
}

.rentabilidade-resumo-grade {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.rentabilidade-resumo-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border, #263653);
    border-radius: 14px;
    background: rgba(6, 16, 31, .82);
}

.rentabilidade-resumo-card.realizado {
    border-color: rgba(0, 239, 175, .3);
}

.rentabilidade-resumo-card.projetado {
    border-color: rgba(255, 184, 77, .4);
}

.rentabilidade-resumo-card small,
.rentabilidade-resumo-card span {
    display: block;
    color: var(--text-muted, #aebbd0);
    line-height: 1.35;
}

.rentabilidade-resumo-card strong {
    display: block;
    margin: 9px 0 7px;
    overflow-wrap: anywhere;
    color: #00efaf;
    font-size: clamp(20px, 2.5vw, 28px);
}

.rentabilidade-resumo-card.projetado strong {
    color: #ffbf55;
}

.rentabilidade-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 18px 0 11px;
    color: var(--text-muted, #aebbd0);
    font-size: 13px;
    font-weight: 800;
}

.rentabilidade-legenda span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.rentabilidade-legenda i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #00efaf;
}

.rentabilidade-legenda .projetado i {
    background: #ffbf55;
}

.rentabilidade-investimentos-grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.rentabilidade-investimento-card {
    min-width: 0;
    padding: 17px;
    border: 1px solid rgba(51, 77, 111, .72);
    border-radius: 15px;
    background: rgba(7, 18, 35, .9);
}

.rentabilidade-investimento-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(51, 77, 111, .62);
}

.rentabilidade-investimento-card h4 {
    margin: 0 0 4px;
    color: #00e5ff;
    font-size: 18px;
    overflow-wrap: anywhere;
}

.rentabilidade-investimento-card header span {
    color: var(--text-muted, #aebbd0);
    font-size: 12px;
}

.rentabilidade-taxa-badge {
    max-width: 52%;
    padding: 7px 9px;
    border: 1px solid rgba(255, 184, 77, .38);
    border-radius: 999px;
    color: #ffbf55 !important;
    font-weight: 800;
    text-align: center;
}

.rentabilidade-investimento-colunas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 13px;
}

.rentabilidade-investimento-bloco {
    min-width: 0;
    padding: 12px;
    border-radius: 12px;
    background: rgba(2, 10, 22, .58);
}

.rentabilidade-investimento-bloco.realizado {
    border-left: 3px solid #00efaf;
}

.rentabilidade-investimento-bloco.projetado {
    border-left: 3px solid #ffbf55;
}

.rentabilidade-investimento-bloco small,
.rentabilidade-investimento-bloco span {
    display: block;
    color: var(--text-muted, #aebbd0);
    line-height: 1.4;
}

.rentabilidade-investimento-bloco small {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .055em;
}

.rentabilidade-investimento-bloco strong {
    display: block;
    margin: 7px 0 5px;
    color: #00efaf;
    font-size: 20px;
    overflow-wrap: anywhere;
}

.rentabilidade-investimento-bloco.projetado strong {
    color: #ffbf55;
}

.rentabilidade-regra-dia {
    margin: 12px 0 0;
    padding: 9px 11px;
    border-radius: 10px;
    color: #bcefff;
    background: rgba(0, 229, 255, .07);
    font-size: 12px;
    line-height: 1.4;
}

.rentabilidade-regra-dia.neutro {
    color: var(--text-muted, #aebbd0);
    background: rgba(174, 187, 208, .07);
}

@media (max-width: 980px) {
    .rentabilidade-resumo-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rentabilidade-investimentos-grade {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .rentabilidade-relatorio {
        margin: 16px 0 20px;
        padding: 16px 12px;
        border-radius: 16px;
    }

    .rentabilidade-relatorio-topo {
        display: block;
    }

    .rentabilidade-relatorio-ajustar {
        width: 100%;
        margin-top: 14px;
    }

    .rentabilidade-resumo-grade,
    .rentabilidade-investimento-colunas {
        grid-template-columns: 1fr;
    }

    .rentabilidade-investimento-card {
        padding: 14px 12px;
    }

    .rentabilidade-investimento-card > header {
        display: block;
    }

    .rentabilidade-taxa-badge {
        display: inline-block;
        max-width: 100%;
        margin-top: 9px;
        border-radius: 10px;
        text-align: left;
    }
}