/* ===== Tokens de tema (claro = padrão; escuro sobrescreve) =====
   A UI do MudBlazor troca de tema pelo PaletteDark; estas variáveis cuidam
   do CSS feito à mão (extrato, resumo, cartões mobile e telas de auth). */
:root {
    --sup: #FFFFFF;          /* superfície: tabela, painel, cartões, card auth */
    --sup-2: #FBF8F0;        /* mês alternado (b) */
    --sup-3: #FAFAFA;        /* lançamento Nulo */
    --sup-fut-a: #FCFCFB;    /* futuro, mês a */
    --sup-fut-b: #F8F4EA;    /* futuro, mês b */
    --borda: #ECEFEA;
    --borda-painel: #E3E7E1;
    --txt-forte: #0B3B3C;    /* saldo em destaque, logo das telas de auth */
    --txt-sec: #6B7280;      /* texto secundário / esmaecido */
    --txt-label: #374151;    /* rótulos dos formulários de auth */
    --hover: #F0F7F4;
    --hover-resumo: #F6F9F7;
    --resumo-total: #F2F5F2;
    --cab-bg: #0B3B3C;       /* cabeçalho das tabelas */
    --cab-txt: #E6F2EF;
    --virada: #E8DFC8;       /* borda na virada de mês */
    --pos: #15803D;          /* depósito (verde) */
    --neg: #B91C1C;          /* pagamento (vermelho) */
    --pos-fut: #2E9E63;
    --neg-fut: #D05656;
    --nulo: #9CA3AF;
    --status-previsto: #9CA3AF;   /* ícones de status do extrato */
    --status-agendado: #1D4ED8;
    --status-efetivado: #15803D;
    --status-nulo: #6B7280;
    --hoje-g1: #FEF3C7;      /* faixa de HOJE (gradiente âmbar) */
    --hoje-g2: #FDE68A;
    --hoje-borda: #D97706;
    --hoje-saldo-txt: #78350F;
    --input-bg: #FFFFFF;
    --input-borda: #D1D5DB;
    --erro-bg: #FEF2F2;
    --erro-borda: #FECACA;
    --erro-txt: #B91C1C;
    --sucesso-bg: #F0FDF4;
    --sucesso-borda: #BBF7D0;
    --sucesso-txt: #15803D;
}

[data-tema="escuro"] {
    --sup: #1B2124;
    --sup-2: #21282C;
    --sup-3: #171C1F;
    --sup-fut-a: #1B2124;
    --sup-fut-b: #21282C;
    --borda: #2C343A;
    --borda-painel: #2C343A;
    --txt-forte: #E4E7E9;
    --txt-sec: #9AA4AE;
    --txt-label: #C2C8CE;
    --hover: #243036;
    --hover-resumo: #243036;
    --resumo-total: #20272B;
    --cab-bg: #0B3B3C;
    --cab-txt: #E6F2EF;
    --virada: #3A3326;
    --pos: #34D399;
    --neg: #F87171;
    --pos-fut: #6FA98C;
    --neg-fut: #C97A7A;
    --nulo: #6B7280;
    --status-previsto: #9AA4AE;
    --status-agendado: #60A5FA;
    --status-efetivado: #34D399;
    --status-nulo: #6B7280;
    --hoje-g1: #3D3115;
    --hoje-g2: #4A3A12;
    --hoje-borda: #D97706;
    --hoje-saldo-txt: #FCD34D;
    --input-bg: #11171A;
    --input-borda: #2C343A;
    --erro-bg: #3A1B1B;
    --erro-borda: #5B2626;
    --erro-txt: #FCA5A5;
    --sucesso-bg: #14271C;
    --sucesso-borda: #1F5135;
    --sucesso-txt: #6EE7B7;
}

/* ===== Extrato (registro estilo Money, modernizado) ===== */

.tabela-extrato {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.tabela-extrato th {
    text-align: left;
    padding: 10px 12px;
    background: var(--cab-bg);
    color: var(--cab-txt);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 1;
}

.tabela-extrato td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--borda);
}

.tabela-extrato tbody tr:hover td {
    background: var(--hover);
}

/* Números alinhados como em registro contábil */
.tabela-extrato .num {
    text-align: right;
    font-family: "JetBrains Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.valor-neg { color: var(--neg); }
.valor-pos { color: var(--pos); }
.saldo-neg { color: var(--neg); font-weight: 600; }

/* Lançamentos futuros: presentes, mas visivelmente "ainda não aconteceram" */
.tabela-extrato tr.futuro td {
    color: var(--txt-sec);
    font-style: italic;
    background: var(--sup-fut-a);
}

.tabela-extrato tr.futuro td.num { color: var(--txt-sec); }
.tabela-extrato tr.futuro td .saldo-neg,
.tabela-extrato tr.futuro .valor-neg { color: var(--neg-fut); }
.tabela-extrato tr.futuro .valor-pos { color: var(--pos-fut); }

/* ===== A linha de HOJE — o marco entre o que já foi e o que está por vir ===== */

.tabela-extrato tr.linha-hoje td {
    padding: 4px 12px;
    background: linear-gradient(90deg, var(--hoje-g1) 0%, var(--hoje-g2) 50%, var(--hoje-g1) 100%);
    border-top: 2px solid var(--hoje-borda);
    border-bottom: 2px solid var(--hoje-borda);
}

.pill-hoje {
    display: inline-block;
    background: var(--hoje-borda);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 2px 10px;
    border-radius: 999px;
}

.pill-hoje-saldo {
    margin-left: 12px;
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--hoje-saldo-txt);
}

/* ===== Painel de saldos no topo ===== */

.painel-saldo {
    display: flex;
    gap: 28px;
    background: var(--sup);
    border: 1px solid var(--borda-painel);
    border-radius: 8px;
    padding: 10px 18px;
}

.painel-saldo > div {
    display: flex;
    flex-direction: column;
}

.painel-saldo-rotulo {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--txt-sec);
}

.painel-saldo-valor {
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--txt-forte);
}

.painel-saldo-valor.saldo-neg { color: var(--neg); }

/* ===== Telas de autenticação ===== */

.auth-fundo {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #0B3B3C 0%, #0E7C66 100%);
    padding: 16px;
}

.auth-card {
    background: var(--sup);
    border-radius: 12px;
    padding: 36px 32px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.auth-logo-img {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    border-radius: 16px;
}

.auth-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--txt-forte);
    text-align: center;
    letter-spacing: 0.3px;
}

.auth-subtitulo {
    font-size: 0.85rem;
    color: var(--txt-sec);
    text-align: center;
    margin: 6px 0 22px;
}

.auth-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--txt-label);
    margin: 14px 0 4px;
}

.auth-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-borda);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
    background: var(--input-bg);
    color: var(--txt-forte);
}

.auth-input:focus {
    outline: none;
    border-color: #0E7C66;
    box-shadow: 0 0 0 3px rgba(14, 124, 102, 0.15);
}

.auth-botao {
    width: 100%;
    margin-top: 22px;
    padding: 11px;
    background: #0E7C66;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.auth-botao:hover { background: #0B6353; }

/* Divisor "ou" entre login por senha e por Google. */
.auth-divisor {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 14px;
    color: var(--txt-sec);
    font-size: 0.8rem;
}
.auth-divisor::before,
.auth-divisor::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--borda, #e0e0e0);
}

/* Botão "Entrar com Google" (link estilizado). */
.auth-botao-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    background: #fff;
    color: #3c4043;
    border: 1px solid var(--borda, #dadce0);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.auth-botao-google:hover { background: #f7f8f8; }

.auth-erro {
    background: var(--erro-bg);
    border: 1px solid var(--erro-borda);
    color: var(--erro-txt);
    font-size: 0.85rem;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
}

.auth-rodape {
    margin-top: 18px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--txt-sec);
}

.auth-rodape a {
    color: #0E7C66;
    font-weight: 600;
    text-decoration: none;
}

.auth-sucesso {
    background: var(--sucesso-bg);
    border: 1px solid var(--sucesso-borda);
    color: var(--sucesso-txt);
    font-size: 0.85rem;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
}

/* ===== Lançamento Nulo (o "VOID" do Money) ===== */

.tabela-extrato tr.nulo td {
    color: var(--nulo);
    background: var(--sup-3);
}

.tabela-extrato tr.nulo td:nth-child(-n+6) {
    text-decoration: line-through;
}

.tabela-extrato tr.nulo .valor-neg,
.tabela-extrato tr.nulo .valor-pos,
.tabela-extrato tr.nulo .saldo-neg {
    color: var(--nulo);
}

/* ===== Reforço de cores dos valores ===== */

.tabela-extrato td.num.valor-pos { color: var(--pos); }
.tabela-extrato td.num.valor-neg { color: var(--neg); }

/* Futuro: mantém distinção, mas com verde/vermelho ainda legíveis */
.tabela-extrato tr.futuro td.num.valor-pos { color: var(--pos-fut); }
.tabela-extrato tr.futuro td.num.valor-neg { color: var(--neg-fut); }

/* Nulo vence o reforço acima */
.tabela-extrato tr.nulo td.num.valor-pos,
.tabela-extrato tr.nulo td.num.valor-neg { color: var(--nulo); }

/* ===== Responsivo: visão compacta para celular ===== */

/* 960px = breakpoint Md do MudBlazor — o mesmo ponto em que o drawer
   passa a sobrepor o conteúdo; layout e menu mudam juntos. */

.so-mobile { display: none; }
.fab-novo { display: none !important; }

/* Conteúdo dos diálogos: largura confortável no desktop. */
.dlg-conteudo { min-width: 380px; }

/* Em telas estreitas (celular), o diálogo nunca pode ser mais largo que a
   tela. O conteúdo deixa de forçar 380px e o diálogo ocupa a largura
   disponível menos uma margem — assim os campos não ficam cortados (ex.: A35). */
@media (max-width: 600px) {
    .dlg-conteudo { min-width: 0; }

    .mud-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px !important;
    }
}

@media (max-width: 959.98px) {
    .so-desktop { display: none !important; }

    .so-mobile {
        display: block;
        background: var(--sup);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .appbar-usuario { display: none; }

    .fab-novo {
        display: inline-flex !important;
        position: fixed;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        z-index: 1300;
    }

    .painel-saldo {
        width: 100%;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 14px;
    }

    .painel-saldo-valor { font-size: 1rem; }

    /* No celular as colunas fixas de 160px estouram telas mais estreitas
       (ex.: Galaxy A35). Deixa fluido e com menos respiro lateral. */
    .tabela-resumo { font-size: 0.8rem; }

    .tabela-resumo th,
    .tabela-resumo td {
        padding-left: 12px;
        padding-right: 12px;
    }

    .tabela-resumo th:nth-child(2),
    .tabela-resumo th:nth-child(3) {
        width: auto;
    }
}

/* Cartão de lançamento: 2 linhas — quem/valor e data·categoria/saldo */
.cartao-lanc {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--borda);
    cursor: pointer;
}

.cartao-lanc:active { background: var(--hover); }

.cartao-status { flex-shrink: 0; }

.cartao-info {
    flex: 1;
    min-width: 0; /* permite o ellipsis do favorecido */
    display: flex;
    flex-direction: column;
}

.cartao-quem {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cartao-sub {
    font-size: 0.75rem;
    color: var(--txt-sec);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cartao-valores {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.cartao-valores .num {
    font-family: "JetBrains Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}

.cartao-saldo {
    font-size: 0.72rem !important;
    color: var(--txt-sec);
}

/* Alternância de cor por mês nos cartões — espelha a tabela do desktop.
   A cor de fundo vem da classe do mês; futuro/nulo têm suas variantes. */
.cartao-lanc.mes-a { background: var(--sup); }
.cartao-lanc.mes-b { background: var(--sup-2); }
.cartao-lanc.virada-mes { border-top: 2px solid var(--virada); }

/* Futuro: mesmo tratamento da tabela — itálico, acinzentado */
.cartao-lanc.futuro.mes-a { background: var(--sup-fut-a); }
.cartao-lanc.futuro.mes-b { background: var(--sup-fut-b); }
.cartao-lanc.futuro .cartao-quem,
.cartao-lanc.futuro .cartao-sub { color: var(--txt-sec); font-style: italic; }
.cartao-lanc.futuro .valor-neg { color: var(--neg-fut); }
.cartao-lanc.futuro .valor-pos { color: var(--pos-fut); }

/* Nulo: riscado e sem cor — vence a faixa de mês (como no desktop) */
.cartao-lanc.nulo { background: var(--sup-3) !important; }
.cartao-lanc.nulo .cartao-quem { text-decoration: line-through; }
.cartao-lanc.nulo .cartao-quem,
.cartao-lanc.nulo .cartao-sub,
.cartao-lanc.nulo .cartao-valores .num { color: var(--nulo); }

/* Faixa de HOJE na lista mobile */
.cartao-hoje {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: linear-gradient(90deg, var(--hoje-g1) 0%, var(--hoje-g2) 50%, var(--hoje-g1) 100%);
    border-top: 2px solid var(--hoje-borda);
    border-bottom: 2px solid var(--hoje-borda);
}

/* ===== Alternância suave por mês ===== */
.tabela-extrato tr.mes-a td {
    background: var(--sup);
}

.tabela-extrato tr.mes-b td {
    background: var(--sup-2);
}

.tabela-extrato tr.virada-mes td {
    border-top: 2px solid var(--virada) !important;
}

.tabela-extrato tbody tr.mes-a:hover td,
.tabela-extrato tbody tr.mes-b:hover td {
    background: var(--hover);
}

.tabela-extrato tr.futuro.mes-a td {
    background: var(--sup-fut-a);
}

.tabela-extrato tr.futuro.mes-b td {
    background: var(--sup-fut-b);
}

.tabela-extrato tr.linha-hoje td {
    background: linear-gradient(90deg, var(--hoje-g1) 0%, var(--hoje-g2) 50%, var(--hoje-g1) 100%) !important;
}

.tabela-extrato tr.nulo td {
    background: var(--sup-3) !important;
}

/* ===== Tabela-resumo de todas as contas ===== */
.tabela-resumo {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

    .tabela-resumo th {
        text-align: left;
        padding: 10px 18px;
        background: var(--cab-bg);
        color: var(--cab-txt);
        font-weight: 600;
        font-size: 0.7rem;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

        /* Colunas de valor alinhadas à direita, com largura mínima para respirar */
        .tabela-resumo th:nth-child(2),
        .tabela-resumo th:nth-child(3) {
            text-align: right;
            width: 160px;
        }

    .tabela-resumo td {
        padding: 9px 18px;
        border-bottom: 1px solid var(--borda);
    }

    .tabela-resumo tbody tr:hover td {
        background: var(--hover-resumo);
    }

    .tabela-resumo .num {
        text-align: right;
        font-family: "JetBrains Mono", Consolas, monospace;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .tabela-resumo .resumo-total td {
        border-top: 2px solid var(--cab-bg);
        border-bottom: none;
        font-weight: 700;
        background: var(--resumo-total);
        padding-top: 11px;
        padding-bottom: 11px;
    }

.bolinha-conta {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
}

/* Selo "3/10" da parcela, ao lado do favorecido no extrato. */
.parcela-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    color: var(--primario, #0E7C66);
    background: rgba(14, 124, 102, 0.10);
    vertical-align: middle;
}

/* ===== Relatórios: ranking de categorias (barras à mão) ===== */
.valor-total {
    font-family: "JetBrains Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--neg);            /* total gasto = saída, em vermelho do tema */
    font-weight: 600;
}

.rel-linha {
    display: grid;
    grid-template-columns: 1fr 56px;
    align-items: center;
    column-gap: 12px;
    padding: 7px 0;
}

.rel-linha + .rel-linha { border-top: 1px solid var(--borda); }

.rel-cabeca {
    grid-column: 1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}

.rel-nome {
    color: var(--txt-forte);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rel-valor {
    font-family: "JetBrains Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--txt-sec);
    white-space: nowrap;
}

.rel-trilha {
    grid-column: 1;
    height: 9px;
    border-radius: 5px;
    background: var(--borda);
    overflow: hidden;
}

.rel-barra {
    height: 100%;
    border-radius: 5px;
    background: var(--mud-palette-primary);
    min-width: 3px;
    transition: width .25s ease;
}

.rel-pct {
    grid-column: 2;
    grid-row: 1 / span 2;
    text-align: right;
    font-family: "JetBrains Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: .82rem;
    color: var(--txt-sec);
}

/* Estado vazio (sem dados no período), usado nas duas abas */
.rel-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px;
}

/* ===== Relatório Receitas × Despesas ===== */
.rd-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.rd-resumo > div {
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--sup-2);
}

.rd-rotulo {
    font-size: .78rem;
    color: var(--txt-sec);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.rd-num {
    font-family: "JetBrains Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 1.15rem;
}

.rd-legenda {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 4px;
    font-size: .85rem;
    color: var(--txt-sec);
}

.rd-ponto {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
}

/* ===== Gráfico de evolução do saldo (SVG à mão) ===== */
.grafico-saldo {
    width: 100%;
    height: auto;
    display: block;
}

.g-past {
    fill: none;
    stroke: var(--mud-palette-primary);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.g-future {
    fill: none;
    stroke: var(--hoje-borda);
    stroke-width: 2.5;
    stroke-dasharray: 6 5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.g-dot { fill: var(--mud-palette-primary); }
.g-dot-fut { fill: var(--hoje-borda); }

.g-zero { stroke: var(--borda); stroke-width: 1; }

.g-hoje {
    stroke: var(--hoje-borda);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: .7;
}

.g-hoje-label {
    fill: var(--hoje-borda);
    font-size: 10px;
    font-weight: 600;
}

.g-ylabel,
.g-xlabel {
    fill: var(--txt-sec);
    font-size: 11px;
    font-family: "JetBrains Mono", Consolas, monospace;
}

/* ===== Fluxo mensal: tabela pivot categoria × mês ===== */
.pivot-scroll { overflow-x: auto; }

.tabela-pivot {
    border-collapse: collapse;
    width: 100%;
    font-size: .9rem;
}

.tabela-pivot th,
.tabela-pivot td {
    padding: 6px 12px;
    white-space: nowrap;
    border-bottom: 1px solid var(--borda);
}

.tabela-pivot thead th {
    background: var(--cab-bg);
    color: var(--cab-txt);
    text-align: right;
    font-weight: 600;
}

/* Primeira coluna (categoria) fixa ao rolar na horizontal */
.pv-cat {
    text-align: left;
    position: sticky;
    left: 0;
    background: var(--sup);
    z-index: 1;
}

.tabela-pivot thead th.pv-cat { background: var(--cab-bg); }

.pv-num {
    text-align: right;
    font-family: "JetBrains Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.pv-pos { color: var(--pos); }
.pv-neg { color: var(--neg); }

.pv-secao td {
    background: var(--sup-2);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .76rem;
    letter-spacing: .05em;
    color: var(--txt-sec);
}

.pv-subtotal td {
    font-weight: 600;
    border-top: 2px solid var(--borda-painel);
    background: var(--sup-2);
}
.pv-subtotal .pv-cat { background: var(--sup-2); }

.pv-liquido td {
    font-weight: 700;
    border-top: 2px solid var(--hoje-borda);
    background: var(--resumo-total);
}
.pv-liquido .pv-cat { background: var(--resumo-total); }

.pv-total { border-left: 2px solid var(--borda-painel); }

/* ===== Orçamento: barras de progresso por categoria ===== */
.orc-num {
    font-family: "JetBrains Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.orc-trilha {
    height: 9px;
    border-radius: 5px;
    background: var(--borda);
    overflow: hidden;
}

.orc-barra {
    height: 100%;
    border-radius: 5px;
    min-width: 3px;
    transition: width .25s ease;
}

.orc-ok { background: var(--pos); }           /* < 80%  verde   */
.orc-alerta { background: var(--hoje-borda); } /* 80-100% âmbar  */
.orc-estouro { background: var(--neg); }       /* > 100% vermelho */

.orc-legenda {
    display: inline-block;
    margin-top: 3px;
    font-size: .8rem;
    color: var(--txt-sec);
}

/* ===== Painel (dashboard) ===== */
.painel-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
}
.painel-rotulo {
    font-size: .72rem;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--txt-sec);
}
.painel-kpi {
    font-family: "JetBrains Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 2px 0;
}
.painel-sub {
    font-size: .8rem;
    color: var(--txt-sec);
}
.painel-lista { display: flex; flex-direction: column; }
.painel-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--borda);
    font-size: .92rem;
}
.painel-linha:last-child { border-bottom: none; }
.painel-data {
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: .82rem;
    color: var(--txt-sec);
    width: 44px;
    flex-shrink: 0;
}
.painel-quem { flex: 1; min-width: 0; }
.painel-conta {
    margin-left: 6px;
    font-size: .75rem;
    color: var(--txt-sec);
}
.painel-valor {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.painel-total { font-weight: 700; border-top: 2px solid var(--borda); margin-top: 2px; }
.painel-cat { padding: 6px 0; }
.painel-cat-nome { font-size: .9rem; }
.painel-cat .orc-trilha { margin-top: 4px; height: 7px; }
.painel-cat-barra {
    height: 100%;
    border-radius: 5px;
    min-width: 3px;
    background: var(--primario, #0E7C66);
}