/* ============================================================
   DASHBOARD.CSS - ESTILOS COMPLETOS
   ============================================================ */

/* ============================================================
   1. SAUDAÇÃO
   ============================================================ */
.dashboard-greeting {
    font-size: 12px;
    color: var(--text2);
    margin-bottom: 12px;
}

/* ============================================================
   2. ALERTAS
   ============================================================ */

/* Container principal do alerta */
.alert-box {
    padding: 16px 20px;        /* Espaçamento interno: 16px em cima/baixo, 20px nas laterais */
    border-radius: 10px;       /* Bordas arredondadas */
    margin-bottom: 12px;       /* Espaço entre os alertas */
    border-left: 4px solid transparent;  /* Borda esquerda transparente (será colorida depois) */
}

/* Cabeçalho do alerta (título + botão fechar) */
.alert-box h4 {
    display: flex;              /* Layout flexível */
    justify-content: space-between;  /* Título à esquerda, botão à direita */
    align-items: center;        /* Alinha verticalmente ao centro */
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px 0;          /* Remove margem padrão e adiciona 8px embaixo */
}

/* Container do ícone + texto do alerta */
.alert-icon-text {
    display: flex;              /* Alinha ícone e texto em linha */
    align-items: center;
    gap: 6px;                   /* Espaço entre ícone e texto */
}

/* Alerta de PERIGO (itens em atraso) - COR VERMELHA */
.alert-box.alert-danger {
    background: var(--red)14;    /* Fundo vermelho com 14% de opacidade */
    border-left-color: var(--red); /* Borda esquerda vermelha */
    color: var(--red);           /* Texto vermelho */
}

/* Alerta de AVISO (itens vencendo) - COR AMARELA */
.alert-box.alert-warning {
    background: var(--amber)14;  /* Fundo amarelo com 14% de opacidade */
    border-left-color: var(--amber); /* Borda esquerda amarela */
    color: var(--amber);         /* Texto amarelo */
}

/* Container dos itens do alerta (lista de itens) */
.alert-items {
    display: flex;
    flex-direction: column;      /* Itens em coluna (um abaixo do outro) */
    gap: 2px;                    /* Espaço entre os itens */
}

/* Cada linha do alerta (um item da lista) */
.alert-row {
    display: flex;
    justify-content: space-between;  /* Descrição à esquerda, valor à direita */
    font-size: 13px;
    padding: 4px 0;              /* Espaçamento vertical entre linhas */
    color: var(--text2);         /* Cor do texto */
}

/* Descrição do item - ocupa o espaço disponível */
.alert-row-desc {
    flex: 1;                     /* Ocupa todo o espaço disponível */
    text-align: left;
}

/* Valor do item - alinhado à direita e em negrito */
.alert-row-value {
    font-weight: 600;
    text-align: right;
    padding-left: 16px;          /* Espaço entre a descrição e o valor */
}

/* Botão de fechar (X) */
.alert-close {
    background: none;            /* Sem fundo */
    border: none;               /* Sem borda */
    color: inherit;             /* Herda a cor do elemento pai */
    cursor: pointer;
    font-size: 18px;
    padding: 0 4px;
    opacity: 0.6;               /* Meio transparente */
    transition: opacity 0.2s;   /* Animação suave ao passar o mouse */
    display: flex;
    align-items: center;
}

/* Botão de fechar ao passar o mouse */
.alert-close:hover {
    opacity: 1;                 /* Fica totalmente visível */
}

.alert-close svg {
    width: 18px;
    height: 18px;
}

/* ============================================================
   3. KPIs (KEY PERFORMANCE INDICATORS) - CARDS PRINCIPAIS
   ============================================================ */

/* Grid dos KPIs - organiza os cards em grade */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));  /* Cards com mínimo 180px, se ajustam automaticamente */
    gap: 16px;                  /* Espaço entre os cards */
    margin-bottom: 24px;        /* Espaço abaixo do grid */
}

/* Card individual do KPI */
.kpi {
    background: var(--bg2);     /* Cor de fundo */
    border-radius: 12px;        /* Bordas arredondadas */
    padding: 16px 20px;         /* Espaçamento interno */
    border-left: 4px solid var(--text3);  /* Borda esquerda cinza (será mudada pelas cores) */
    transition: transform 0.2s; /* Animação suave ao passar o mouse */
}

/* KPI ao passar o mouse - sobe um pouco */
.kpi:hover {
    transform: translateY(-2px);
}

/* Label do KPI (título: "Receitas", "Despesas", etc.) */
.kpi-label {
    font-size: 11px;
    text-transform: uppercase;   /* Tudo em MAIÚSCULO */
    letter-spacing: 0.5px;       /* Espaçamento entre letras */
    color: var(--text3);         /* Cor cinza */
    margin-bottom: 4px;
}

/* Valor principal do KPI (número grande) */
.kpi-value {
    font-size: 24px;            /* Tamanho grande */
    font-weight: 800;           /* Bem negrito */
    color: var(--text);         /* Cor do texto */
}

/* Valor pequeno (para textos especiais como "Nenhuma despesa") */
.kpi-value-sm {
    font-size: 15px;            /* Tamanho menor */
}

/* Subtítulo do KPI (informação adicional) */
.kpi-sub {
    font-size: 12px;
    color: var(--text2);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;                   /* Espaço entre ícone e texto */
}

/* ========== VARIANTES DE COR DOS KPIs ========== */

/* SUCESSO - VERDE (usado quando meta atingida ou está em dia) */
.kpi-success {
    border-left-color: var(--green);
}
.kpi-success .kpi-value {
    color: var(--green);
}

/* PERIGO - VERMELHO (usado quando tem restante a pagar ou saldo negativo) */
.kpi-danger {
    border-left-color: var(--red);
}
.kpi-danger .kpi-value {
    color: var(--red);
}

/* ALERTA - AMARELO (usado quando meta não atingida) */
.kpi-warning {
    border-left-color: var(--amber);
}
.kpi-warning .kpi-value {
    color: var(--amber);
}

/* NEUTRO - CINZA (usado quando não tem dados ou sem meta) */
.kpi-neutral {
    border-left-color: var(--text3);
}
.kpi-neutral .kpi-value {
    color: var(--text2);
}

/* ROXO (usado para saldo positivo) */
.kpi-purple {
    border-left-color: var(--purple);
}
.kpi-purple .kpi-value {
    color: var(--purple);
}

/* ============================================================
   4. CARTÕES DE CRÉDITO
   ============================================================ */

/* Seção de cartões - ocupa 1 coluna no grid */
.cards-section {
    grid-column: span 1;
}

/* Container com rolagem horizontal para os cartões */
.cards-container {
    display: flex;
    gap: 14px;                  /* Espaço entre os cartões */
    overflow-x: auto;           /* Rolagem horizontal quando necessário */
    padding: 8px 4px 16px 4px;
    scroll-snap-type: x mandatory;  /* Rolagem suave "grudando" nos cards */
}

/* Barra de rolagem personalizada */
.cards-container::-webkit-scrollbar {
    height: 4px;               /* Altura da barra de rolagem */
}

.cards-container::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

/* Card individual do cartão de crédito */
.credit-card {
    min-width: 200px;           /* Largura mínima */
    max-width: 220px;           /* Largura máxima - VOCÊ PODE MUDAR AQUI! */
    flex: 0 0 auto;             /* Não encolhe nem estica */
    scroll-snap-align: start;   /* Alinha no início ao rolar */
    background: linear-gradient(145deg, var(--bg2), var(--bg3));
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-top: 4px solid var(--card-color, var(--purple));  /* Cor da borda superior vem do JS */
    transition: transform 0.2s, box-shadow 0.2s;
}

.credit-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.credit-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.credit-card-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.credit-card-brand {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text3);
    letter-spacing: 0.5px;
}

/* Números do cartão (parcialmente ocultos) */
.credit-card-digits {
    font-size: 14px;
    font-weight: 500;
    color: var(--text2);
    letter-spacing: 2px;
    margin-bottom: 12px;
    font-family: monospace;
}

/* Barra de progresso do limite usado */
.credit-card-progress {
    height: 6px;
    background: var(--bg4);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

/* Preenchimento da barra de progresso - largura vem do JS */
.credit-card-progress-fill {
    height: 100%;
    background: var(--card-color, var(--purple));
    border-radius: 4px;
    transition: width 0.6s ease;
}

/* Rodapé do cartão: limite e porcentagem */
.credit-card-footer {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text3);
}

.credit-card-footer span:first-child {
    font-weight: 600;
    color: var(--text2);
}

/* ============================================================
   5. CONTAS BANCÁRIAS
   ============================================================ */

/* Container flexível para as contas */
.accounts-container {
    display: flex;
    gap: 10px;                  /* Espaço entre as contas */
    flex-wrap: wrap;            /* Quebra para linha seguinte se não couber */
}

/* Card individual da conta */
.account-card {
    border-radius: 10px;
    padding: 12px 16px;
    color: #fff;                /* Texto branco para contrastar com o fundo colorido */
    min-width: 160px;           /* Largura mínima */
    flex: 1;                    /* Ocupa espaço disponível */
    max-width: 220px;           /* Largura máxima - VOCÊ PODE MUDAR AQUI! */
    transition: transform 0.2s;
}

.account-card:hover {
    transform: translateY(-2px);
}

/* Nome da conta */
.account-card-name {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
}

/* Banco */
.account-card-bank {
    font-size: 11px;
    opacity: 0.7;               /* Meio transparente */
    margin-bottom: 8px;
}

/* Saldo da conta */
.account-card-balance {
    font-size: 16px;
    font-weight: 800;
}

/* Total de todas as contas */
.accounts-total {
    text-align: right;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text2);
}

.accounts-total strong {
    color: var(--purple);
}

/* ============================================================
   6. PATRIMÔNIO
   ============================================================ */

/* Container flexível para os itens de patrimônio */
.patrimonio-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Card individual do patrimônio */
.patrimonio-item {
    background: var(--bg3);
    border-radius: 10px;
    padding: 12px 16px;
    min-width: 160px;
    flex: 1;
    max-width: 220px;           /* Largura máxima - VOCÊ PODE MUDAR AQUI! */
    border: 1px solid var(--border);
    transition: transform 0.2s;
}

.patrimonio-item:hover {
    transform: translateY(-2px);
}

/* Nome do objetivo */
.patrimonio-item-name {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
}

/* Valor do objetivo */
.patrimonio-item-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}

/* Total do patrimônio */
.patrimonio-total {
    text-align: right;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text2);
}

.patrimonio-total strong {
    color: var(--purple);
}

/* ============================================================
   7. ORÇAMENTO
   ============================================================ */

/* Lista de itens do orçamento */
.budget-list {
    display: flex;
    flex-direction: column;     /* Itens em coluna */
    gap: 10px;                  /* Espaço entre os itens */
}

/* Cada item do orçamento */
.budget-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Cabeçalho do item: nome e valores */
.budget-item-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.budget-item-name {
    font-weight: 600;
}

.budget-item-values {
    font-weight: 600;
}

/* Cores dos valores do orçamento */
.budget-item-values.color-success {
    color: var(--green);        /* Verde - dentro do limite */
}

.budget-item-values.color-warning {
    color: var(--amber);        /* Amarelo - próximo do limite (80%+) */
}

.budget-item-values.color-danger {
    color: var(--red);          /* Vermelho - estourou o limite */
}

/* Link para gerenciar orçamentos */
.budget-manage-link {
    text-align: right;
    margin-top: 10px;
    font-size: 11px;
    color: var(--text3);
}

.budget-manage-link span {
    color: var(--purple);
    cursor: pointer;
    text-decoration: underline;
}

/* ============================================================
   8. PRÓXIMOS VENCIMENTOS
   ============================================================ */

/* Lista de contas a vencer */
.invoice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Cada item da lista (conta ou fatura) */
.invoice-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 12px;
    background: var(--bg3);
    border-radius: 8px;
    gap: 12px;
}

/* Nome da conta/fatura */
.invoice-item-label {
    font-weight: 600;
    font-size: 13px;
    flex: 0 0 30%;             /* Ocupa 30% do espaço */
    text-align: left;
    white-space: nowrap;        /* Não quebra linha */
    overflow: hidden;           /* Esconde o que não cabe */
    text-overflow: ellipsis;    /* Adiciona "..." quando não cabe */
}

/* Tag da fatura (ex: "(Fatura)") */
.invoice-item-tag {
    font-weight: 400;
    font-size: 10px;
    opacity: 0.7;
}

/* Data de vencimento */
.invoice-item-due {
    font-size: 11px;
    flex: 0 0 40%;             /* Ocupa 40% do espaço */
    text-align: center;
}

.invoice-item-due.late {
    color: var(--red);          /* Vermelho - venceu */
}

.invoice-item-due.ontime {
    color: var(--text2);        /* Cinza - ainda não venceu */
}

/* Valor da conta */
.invoice-item-value {
    font-weight: 700;
    font-size: 13px;
    flex: 0 0 20%;             /* Ocupa 20% do espaço */
    text-align: right;
}

/* Mensagem quando não há contas a pagar */
.invoice-empty {
    text-align: center;
    padding: 24px;
    color: var(--text3);
    font-size: 13px;
}

/* ============================================================
   9. FILTROS DO DASHBOARD
   ============================================================ */

/* Container dos filtros */
.dashboard-filters {
    padding: 4px 0;
}

/* Grid dos campos de filtro */
.dashboard-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));  /* Ajusta automaticamente */
    gap: 12px;                  /* Espaço entre os campos */
    margin-bottom: 12px;
}

/* Cada campo de filtro (label + select) */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;                   /* Espaço entre label e select */
}

/* Label do campo */
.form-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Select (dropdown) */
.form-field select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

/* Select ao passar o mouse */
.form-field select:hover {
    border-color: var(--purple);
}

/* Select em foco (quando clicado) */
.form-field select:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px var(--purple)25;  /* Sombra roxa ao redor */
}

/* Ações dos filtros (botões) */
.dashboard-filter-actions {
    display: flex;
    justify-content: flex-end;   /* Alinha o botão à direita */
    gap: 8px;
}

/* Botão "Limpar filtros" */
.btn-filter-clear {
    padding: 6px 16px;
    font-size: 12px;
    border-radius: 6px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text2);
    cursor: pointer;
    transition: all 0.2s;
}

/* Botão ao passar o mouse */
.btn-filter-clear:hover {
    background: var(--bg4);
    color: var(--text);
    border-color: var(--purple);
}

/* ============================================================
   10. SEÇÕES (COLLAPSE/EXPAND) - CARDS QUE PODEM SER OCULTADOS
   ============================================================ */

/* Card de seção */
.chart-card {
    background: var(--bg2);
    border-radius: 14px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    transition: box-shadow 0.2s;
}

/* Sombra ao passar o mouse */
.chart-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Cabeçalho da seção: título + botão de expandir/ocultar */
.chart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* Corpo da seção (conteúdo) */
.chart-card-body {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 5000px;          /* Altura máxima quando expandido */
    opacity: 1;
    overflow: hidden;
}

/* Corpo da seção quando colapsado (oculto) */
.chart-card-body.collapsed {
    max-height: 0;              /* Altura zero - esconde o conteúdo */
    opacity: 0;
    padding: 0;
    margin: 0;
}

/* Botão de expandir/ocultar */
.chart-card-toggle {
    background: none;
    border: none;
    color: var(--text3);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chart-card-toggle:hover {
    background: var(--bg3);
    color: var(--text2);
}

/* Título da seção */
.chart-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
}

/* Subtítulo da seção (ex: "(filtrado)") */
.chart-subtitle {
    font-weight: 400;
    color: var(--text3);
    font-size: 10px;
}

/* Grid que organiza as seções em 2 colunas */
.chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* 2 colunas iguais */
    gap: 16px;                  /* Espaço entre as colunas */
    margin-bottom: 16px;        /* Espaço abaixo da linha */
}

/* ============================================================
   11. UTILITÁRIOS - CLASSES REUTILIZÁVEIS
   ============================================================ */

/* Estado vazio (quando não há dados para mostrar) */
.empty-state {
    text-align: center;
    color: var(--text3);
    font-size: 13px;
    padding: 24px;
}

/* Link no estado vazio */
.empty-state-link {
    color: var(--purple);
    cursor: pointer;
    text-decoration: underline;
}

.empty-state-link:hover {
    opacity: 0.8;
}

/* Barra de progresso genérica */
.progress {
    height: 6px;
    background: var(--bg4);
    border-radius: 4px;
    overflow: hidden;
}

/* Preenchimento da barra de progresso */
.progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;  /* Animação suave ao mudar a largura */
}

/* Ícones inline (dentro de texto) */
.ic-inline {
    width: 16px;
    height: 16px;
    vertical-align: middle;     /* Alinha com o texto */
    display: inline-block;
}

/* Container com rolagem horizontal */
.scroll-row {
    overflow-x: auto;           /* Rolagem horizontal */
    overflow-y: hidden;         /* Sem rolagem vertical */
    -webkit-overflow-scrolling: touch;  /* Rolagem suave no iOS */
}

/* Barra de rolagem personalizada */
.scroll-row::-webkit-scrollbar {
    height: 4px;
}

.scroll-row::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

/* Estado vazio (fallback) */
.empty {
    text-align: center;
    color: var(--text3);
    font-size: 13px;
    padding: 24px;
}

/* ============================================================
   12. RESPONSIVIDADE - AJUSTES PARA DIFERENTES TAMANHOS DE TELA
   ============================================================ */

/* 
   O QUE É RESPONSIVIDADE?
   ======================
   São ajustes que fazemos no layout para que ele se adapte a diferentes 
   tamanhos de tela (desktop, tablet, celular).
   
   @media = "em mídia" - define que os estilos dentro só valem para 
   determinadas condições (neste caso, largura máxima da tela).
*/

/* 
   ============================================================
   TABLETS E TELAS MÉDIAS (até 768px de largura)
   ============================================================
   Quando a tela tem até 768px (tablets, iPads, telas menores)
*/
@media (max-width: 768px) {
    
    /* Seções que eram 2 colunas viram 1 coluna */
    .chart-row {
        grid-template-columns: 1fr;  /* 1 coluna em vez de 2 */
        gap: 12px;
    }
    
    /* KPIs - cards ficam um pouco menores */
    .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
    }
    
    .kpi {
        padding: 14px 16px;      /* Menos padding */
    }
    
    .kpi-value {
        font-size: 20px;          /* Valores menores */
    }
    
    /* Filtros - de 5 colunas para 3 colunas */
    .dashboard-filter-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Contas e patrimônio - cards um pouco menores */
    .account-card,
    .patrimonio-item {
        min-width: 140px;
        max-width: 200px;
    }
    
    /* Cartões de crédito - um pouco menores */
    .credit-card {
        min-width: 180px;
    }
}

/* 
   ============================================================
   CELULARES GRANDES E TABLETS PEQUENOS (até 480px de largura)
   ============================================================
   Quando a tela tem até 480px (celulares em modo paisagem, 
   celulares grandes)
*/
@media (max-width: 480px) {
    
    /* KPIs - 2 colunas em vez de 4 */
    .kpi-grid {
        grid-template-columns: 1fr 1fr;  /* 2 colunas */
        gap: 10px;
        margin-bottom: 16px;
    }
    
    .kpi {
        padding: 12px 14px;
    }
    
    .kpi-value {
        font-size: 18px;
    }
    
    .kpi-value-sm {
        font-size: 13px;
    }
    
    .kpi-label {
        font-size: 10px;
    }
    
    .kpi-sub {
        font-size: 11px;
    }
    
    /* Filtros - 2 colunas em vez de 3 */
    .dashboard-filter-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .form-field select {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    /* Botão de limpar filtros - centralizado e largura total */
    .dashboard-filter-actions {
        justify-content: center;
        margin-top: 4px;
    }
    
    .btn-filter-clear {
        width: 100%;              /* Ocupa toda a largura */
        padding: 8px;
        text-align: center;
    }
    
    /* Alertas - menos espaçamento */
    .alert-box {
        padding: 12px 14px;
        margin-bottom: 8px;
    }
    
    .alert-box h4 {
        font-size: 13px;
    }
    
    .alert-row {
        font-size: 12px;
        padding: 3px 0;
    }
    
    .alert-row-desc {
        flex: 1;
        word-break: break-word;   /* Quebra palavras longas */
    }
    
    .alert-row-value {
        padding-left: 8px;
        white-space: nowrap;      /* Não quebra o valor */
    }
    
    /* Contas e patrimônio - ocupam 100% da largura */
    .account-card,
    .patrimonio-item {
        min-width: 120px;
        max-width: 100%;           /* ← AQUI VOCÊ MUDA O TAMANHO! */
        flex: 1 1 100%;           /* Ocupa toda a linha */
    }
    
    /* Cartões de crédito - menores para caber na tela */
    .credit-card {
        min-width: 160px;
        max-width: 180px;
    }
    
    /* Próximos vencimentos - layout em coluna */
    .invoice-item {
        flex-wrap: wrap;          /* Quebra em várias linhas */
        gap: 4px;
    }
    
    .invoice-item-label {
        flex: 1 1 100%;           /* Ocupa 100% da largura */
    }
    
    .invoice-item-due {
        flex: 1 1 50%;            /* Ocupa metade da largura */
        text-align: left;
    }
    
    .invoice-item-value {
        flex: 1 1 40%;            /* Ocupa 40% da largura */
        text-align: right;
    }
}

/* 
   ============================================================
   CELULARES PEQUENOS (até 360px de largura)
   ============================================================
   Quando a tela tem até 360px (celulares pequenos, como iPhone SE)
*/
@media (max-width: 480px) {
    
    /* KPIs - 1 coluna apenas */
    .kpi-grid {
        grid-template-columns: 1fr;  /* 1 coluna */
        gap: 8px;
    }
    
    .kpi {
        padding: 10px 12px;
    }
    
    /* Filtros - 1 coluna apenas */
    .dashboard-filter-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    
    /* Alertas - ainda menores */
    .alert-box {
        padding: 10px 12px;
    }
    
    .alert-box h4 {
        font-size: 12px;
        flex-wrap: wrap;          /* Quebra o título se necessário */
    }
    
    .alert-row {
        font-size: 11px;
        flex-wrap: wrap;          /* Quebra a linha se necessário */
    }
    
    .alert-row-desc {
        flex: 1 1 100%;           /* Ocupa 100% da largura */
    }
    
    .alert-row-value {
        padding-left: 0;
    }
    
    /* Contas e patrimônio - ainda menores */
    .account-card,
    .patrimonio-item {
        min-width: 100px;
        padding: 10px 12px;
    }
    
    /* Cartões de crédito - menores ainda */
    .credit-card {
        min-width: 140px;
        max-width: 160px;
        padding: 12px 14px;
    }
}