/* css/styles.css (VERSÃO CORRIGIDA E COMPLETA) */

:root {
    --primary-color: #5EBFB7;
    --secondary-color: #0F3C43; /* Cor original da sua sidebar */
    --success-color: #2ecc71;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --light-color: #f5f7fa;
    --card-bg-color: #ffffff;
    --text-color: #333333;
    --text-muted: #6c757d;
    --sidebar-width: 250px;
}

body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background-color: var(--light-color);
}

/* Garante que o conteúdo só apareça após a autenticação */
.auth-hidden {
    visibility: hidden;
    opacity: 0;
}
.auth-visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}


/* 2. Ajuste no conteúdo principal para não ficar embaixo da sidebar */
.main-content {
    margin-left: var(--sidebar-width);
    padding: 20px;
}

/* ================================================= */
/* === ADAPTAÇÃO DA SIDEBAR PARA MOBILE ==== */
/* ================================================= */



/* Garante que o botão do menu hambúrguer só apareça em telas pequenas */
@media (min-width: 992px) {
    #mobile-menu-toggle {
        display: none;
    }
}
/* final do bloco */


#assinatura-info-container {
    background-color: rgba(255, 255, 255, 0.1); /* Um fundo branco semi-transparente */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Uma borda sutil */
    border-radius: 8px; /* Bordas arredondadas */
    padding: 10px; /* Espaçamento interno para o conteúdo */
    transition: opacity 0.3s ease-in-out; /* Efeito de fade-in suave */
}

/* Garante que a classe 'invisible' do Bootstrap funcione com a transição */
#assinatura-info-container.invisible {
    opacity: 0;
}

#assinatura-info-placeholder {
    color: #ffffff; /* Garante que o texto seja branco */
    font-size: 0.8rem; /* Tamanho da fonte um pouco menor */
}

/* Em styles.css - Estilo para as novas notificações */

/* Remove o padding padrão do dropdown do Bootstrap */
/* 3. Garante que a lista interna ocupe o espaço */
#notification-list {
    padding: 0;
    /* A largura agora é controlada pelo pai (.dropdown-menu), então não precisamos mais de min-width aqui */
}

/* 1. Aumenta a largura do dropdown de notificações */
#notificationMenuButton + .dropdown-menu {
    width: 420px; /* Aumente este valor conforme necessário */
    max-width: 90vw; /* Garante que não ultrapasse a tela em dispositivos pequenos */
    border-radius: 0.75rem !important; /* Garante bordas arredondadas */
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; /* Sombra mais pronunciada */
    border: none !important; /* Remove a borda padrão */
}

.notification-card {
    list-style: none;
    border-bottom: 1px solid #e9ecef;
}

.notification-card:last-child {
    border-bottom: none;
}

.notification-link {
    display: block;
    padding: 1rem;
    text-decoration: none;
    color: #343a40;
    transition: background-color 0.2s ease;
}

.notification-link:hover {
    background-color: #f8f9fa;
}

.notification-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Remova o margin-bottom daqui para controlar o espaço de forma mais precisa */
}

.notification-icon {
    font-size: 1.2rem;
}

/* 2. Remove a regra que força o título a não quebrar a linha */
.notification-title {
    font-weight: 600;
    flex-grow: 1;
    /* REMOVA ou comente estas 3 linhas: */
    /* white-space: nowrap; */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
}

.notification-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #6c757d;
    flex-shrink: 0; /* Impede que este elemento encolha */
}

.notification-body {
    margin-top: 0.5rem; /* Adiciona um espaço entre o título e a mensagem */
}

.unread-indicator {
    width: 8px;
    height: 8px;
    background-color: #e83e8c; /* Cor rosa/vermelha */
    border-radius: 50%;
}

.notification-body-image {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.5rem;
}

.notification-body-image img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 0.375rem;
}

.notification-body-image .notification-body-text strong {
    display: block;
    margin-bottom: 0.25rem;
}

.notification-body-image .notification-body-text p {
    margin: 0;
    font-size: 0.9rem;
    color: #495057;
}

.notification-body-text {
    font-size: 0.9rem;
    color: #495057;
}

/* Conteúdo Principal */
.main-content {
    margin-left: var(--sidebar-width);
    padding: 20px;
}

.content-section {
    display: none;
}

.content-section.active {
    display: block;
}

.card-value.loading {
  opacity: 0.5;
  font-style: italic;
}

/* CSS para um modal extra-extra-largo */
.modal-xxl {
  max-width: 95%; /* Usa 95% da largura da tela */
}

/* Em telas maiores, podemos definir um valor fixo se preferir */
@media (min-width: 1400px) {
  .modal-xxl {
    max-width: 1320px; /* Um valor fixo para telas muito grandes */
  }
}

/* Correção para o dropdown de saldo por instituição */
.card-totalizador .dropdown-menu {
  z-index: 1055; /* Garante que o menu fique acima de outros elementos, como modais */
  position: absolute;
  right: 0;
  left: auto;
  min-width: 250px;
}

#tabelaTransacoes th:nth-child(4),
#tabelaTransacoes td:nth-child(4) {
    white-space: nowrap; /* Impede que o texto quebre a linha */
    text-align: right;   /* Alinha o valor à direita para melhor visualização */
    padding-right: 20px; /* Adiciona um respiro à direita */
}

#tabelaTransacoes th:nth-child(5),
#tabelaTransacoes td:nth-child(5) {
    white-space: nowrap; /* Impede que o texto quebre a linha */
    text-align: right;   /* Alinha o valor à direita para melhor visualização */
    padding-right: 20px; /* Adiciona um respiro à direita */
}

#tabelaTransacoes th:nth-child(9),
#tabelaTransacoes td:nth-child(9) {
    white-space: nowrap; /* Impede que o texto quebre a linha */
    text-align: right;   /* Alinha o valor à direita para melhor visualização */
    padding-right: 20px; /* Adiciona um respiro à direita */
}

#tabelaTransacoes th:nth-child(11),
#tabelaTransacoes td:nth-child(11) {
    white-space: nowrap; /* Impede que o texto quebre a linha */
    text-align: right;   /* Alinha o valor à direita para melhor visualização */
    padding-right: 20px; /* Adiciona um respiro à direita */
}

/* Correção para o dropdown de saldo por instituição não ficar preso atrás do card */
.card-totalizador {
  position: relative; /* Garante que o dropdown se posicione corretamente dentro dele */
  z-index: auto; /* Evita criar um novo contexto de empilhamento que prenda o menu */
}

/* Garante que o título do card não interfira */
#cardHeader {
  z-index: 1000;
  position: relative;
}

/* Ajuste para o dropdown toggle */
.card-totalizador .dropdown-toggle::after {
  display: none; /* Remove o ícone padrão do dropdown */
}

/* Cards */
.card {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

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

.card-title {
    color: var(--secondary-color);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.2;
    white-space: nowrap; /* evita quebra de linha */
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-value {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.1;
    white-space: nowrap; /* evita quebra de linha */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ajustes específicos para o conteúdo dos totalizadores */
.card-totalizador .card-title {
    margin: 0 0 4px 0;
    padding: 0;
}

.card-totalizador .card-value {
    margin: 0;
    padding: 0;
}

/* Ajuste especial para cards com conteúdo adicional (como Transações Pendentes) */
.card-totalizador .additional-content {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ajustes adicionais para responsividade */
@media (max-width: 768px) {
    .card-value {
        font-size: 1rem !important;
    }

    .card-title {
        font-size: 0.85rem !important;
    }

    .card-totalizador {
        padding: 12px !important;
        height: 75px !important; /* altura ligeiramente menor em mobile */
        min-height: 75px !important;
        min-width: 160px; /* largura mínima menor em mobile */
    }

    .totalizadores-row {
        gap: 10px;
    }
    
    .card-totalizador .additional-content {
        font-size: 0.8rem !important;
    }
}

.card-period {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 5px;
    margin-bottom: 0;
}

width: 100%;
    height: 600px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
}

.card-category {
    width: 100%;
    height: 600px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
}

.card-category .card-header {
    background-color: var(--secondary-color);
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--primary-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.25rem 0.25rem 0 0;
}

.card-category .card-header::before {
    content: "📋"; /* Ícone opcional (pode ser substituído por outro, como '🔍' ou removido) */
    font-size: 1.1rem;
}

.card-category .card-body {
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.table-responsive {
    flex-grow: 1;
}

.table-card {
    margin-bottom: 0;
    width: 100%;
    table-layout: fixed;
}

.table-card th,
.table-card td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px 16px; /* Mantido em 2px vertical */
    vertical-align: middle; /* Alinha verticalmente o conteúdo */
}

.table-card thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: var(--text-muted);
    border-top: none;
    border-bottom: 1px solid #e9ecef;
    padding: 6px 16px; /* Mantido em 6px vertical */
    font-size: 0.85rem;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 1;
}

.table-card tbody td {
    padding: 2px 16px; /* Mantido em 2px vertical */
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle; /* Alinha verticalmente o conteúdo */
}

.table-card tbody tr {
    height: 24px; /* Mantido em 24px */
    line-height: 1; /* Garante que a altura da linha seja controlada */
}

/* Estilos para o bullet */
.bullet-container {
    display: inline-flex;
    align-items: center;
    height: 100%;
    vertical-align: middle;
}

.bullet-icon {
    font-size: 2em; /* Reduzido de 3em para 2em para diminuir o impacto na altura */
    line-height: 1; /* Garante que o bullet não adicione altura extra */
    margin-right: 8px; /* Espaçamento entre bullet e texto */
}

.legend-alert {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: 0.25rem;
    color: #856404;
    font-size: 0.9rem;
}

.legend-alert p {
    margin: 0;
}

.legend-alert strong {
    color: #664d03;
}

.text-success {
    color: var(--success-color) !important;
}

.text-danger {
    color: var(--danger-color) !important;
}

.text-warning {
    color: var(--warning-color) !important;
}



.period-nav {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

.period-items {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 0 10px;
    scroll-behavior: smooth;
}

/* O card de cada mês */
.period-item {
    min-width: 100px; /* Largura mínima reduzida */
    padding: 8px 10px; /* Padding interno reduzido */
    border-radius: 8px;
    background: white;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.period-item.active {
    background: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color);
}

/* O nome do mês (ex: "Ago 25") */
.period-item .month {
    font-weight: 600;
    font-size: 0.9rem; /* Fonte um pouco menor */
    text-transform: capitalize; /* Garante a primeira letra maiúscula via CSS */
}

/* O contêiner dos indicadores de receita/despesa */
.period-item .indicators {
    display: flex;
    justify-content: center;
    gap: 8px; /* Espaçamento entre os indicadores reduzido */
    margin-top: 4px;
    font-size: 0.75rem; /* Fonte menor para os valores */
    white-space: nowrap;
}
.period-item .income {
    color: var(--success-color);
}

.period-item .expense {
    color: var(--danger-color);
}

.period-item.active .income,
.period-item.active .expense {
    color: rgba(255, 255, 255, 0.9);
}

/* Totalizadores */
.totalizadores-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch; /* força todos os cards a terem a mesma altura */
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.card-totalizador {
    flex: 1;
    min-width: 200px;
    padding: 16px; /* padding aumentado para melhor proporção */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    height: 85px; /* altura fixa otimizada */
    min-height: 85px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* centraliza o conteúdo verticalmente */
    align-items: flex-start;
    position: relative;
}

.indicator-card {
    flex: 1;
    min-width: 200px;
    padding: 20px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Aumenta o z-index do modal de nova compra para ficar acima do outro */
#modalNovaCompraCartao {
  z-index: 1060 !important; /* O z-index padrão do modal do Bootstrap é 1050, então 1060 o coloca acima */
}

/* Ajusta o backdrop do modal de nova compra para ficar acima do backdrop do outro modal */
#modalNovaCompraCartao + .modal-backdrop {
  z-index: 1059 !important; /* Fica entre o modal de fundo e o modal de cima */
}

/* Ajustes na tabela dentro do modal Detalhamento da Fatura */
#modalDetalhamentoFatura .table {
    width: 100%;
    table-layout: auto; /* Mudado de 'fixed' para 'auto' para ajustar ao conteúdo */
    border-collapse: collapse; /* Garante que as bordas não adicionem espaço extra */
}

#modalDetalhamentoFatura .table th,
#modalDetalhamentoFatura .table td {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap; /* Mantém o texto em uma única linha */
    padding: 8px; /* Ajuste de padding para melhor legibilidade */
    border-bottom: 1px solid #dee2e6; /* Linha de separação clara */
}

#modalDetalhamentoFatura .table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.85rem;
}

/* Definições específicas por coluna */
#modalDetalhamentoFatura .table th:first-child,
#modalDetalhamentoFatura .table td:first-child {
    width: 5%; /* Checkbox */
    min-width: 40px; /* Garante espaço mínimo */
}

#modalDetalhamentoFatura .table th:nth-child(2),
#modalDetalhamentoFatura .table td:nth-child(2) {
    width: 10%; /* Data da Compra */
    min-width: 100px;
}

#modalDetalhamentoFatura .table th:nth-child(3),
#modalDetalhamentoFatura .table td:nth-child(3) {
    width: 20%; /* Descrição */
    min-width: 150px;
    text-align: left;
}

#modalDetalhamentoFatura .table th:nth-child(4),
#modalDetalhamentoFatura .table td:nth-child(4) {
    width: 15%; /* Categoria */
    min-width: 120px;
    text-align: left;
}

#modalDetalhamentoFatura .table th:nth-child(5),
#modalDetalhamentoFatura .table td:nth-child(5) {
    width: 10%; /* Valor */
    min-width: 100px;
}

#modalDetalhamentoFatura .table th:nth-child(6),
#modalDetalhamentoFatura .table td:nth-child(6) {
    min-width: 120px; /* Parcela Atual */
    white-space: nowrap; /* Garante que o texto completo apareça */
    overflow: visible; /* Remove corte por overflow */
    text-overflow: clip; /* Desativa ellipsis */
}

#modalDetalhamentoFatura .table th:nth-child(7),
#modalDetalhamentoFatura .table td:nth-child(7) {
    min-width: 130px; /* Total Parcelas */
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

#modalDetalhamentoFatura .table th:nth-child(8),
#modalDetalhamentoFatura .table td:nth-child(8) {
    width: 15%; /* Observação */
    min-width: 150px;
    text-align: left;
    overflow: visible; /* Permite que o texto exceda se necessário */
}

#modalDetalhamentoFatura .table th:nth-child(9),
#modalDetalhamentoFatura .table td:nth-child(9) {
    min-width: 110px; /* Recorrente */
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

#modalDetalhamentoFatura .table th:nth-child(10),
#modalDetalhamentoFatura .table td:nth-child(10) {
    width: 10%; /* Ações */
    min-width: 100px;
}

/* Ajuste do modal para garantir largura suficiente */
#modalDetalhamentoFatura .modal-dialog {
    max-width: 90%; /* Aumenta a largura máxima do modal */
    width: auto; /* Permite ajuste dinâmico */
}


/* Responsividade */
@media (max-width: 768px) {
    #modalDetalhamentoFatura .table th:nth-child(6),
    #modalDetalhamentoFatura .table td:nth-child(6) {
        min-width: 100px; /* Reduzido para telas menores */
    }
    #modalDetalhamentoFatura .table th:nth-child(7),
    #modalDetalhamentoFatura .table td:nth-child(7) {
        min-width: 110px;
    }
    #modalDetalhamentoFatura .table th:nth-child(9),
    #modalDetalhamentoFatura .table td:nth-child(9) {
        min-width: 90px;
    }
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    flex-wrap: wrap;
  }

  .totalizadores {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
  }

  .totalizador-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 18px; /* Aumentado de 14px para 16px */
    font-weight: bold;
  }

  .label {
    font-weight: normal;
    color: #6c757d;
  }

  .value {
    font-weight: bold;
  }

  .text-success {
    color: #28a745 !important;
  }

  .text-primary {
    color: #007bff !important;
  }

  .text-danger {
    color: #dc3545 !important;
  }

  .divider {
    font-size: 18px; /* Mesma fonte dos totalizadores */
    color: #6c757d; /* Cor cinza para harmonizar com os rótulos */
    margin: 0 10px; /* Espaçamento lateral para melhor visualização */
  }

  .button-group {
    display: flex;
    gap: 10px;
  }

  @media (max-width: 576px) {
    .modal-footer {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }

    .totalizadores {
      flex-direction: column;
      gap: 5px;
    }

    .totalizador-item {
      font-size: 14px; /* Reduzido em telas menores para caber */
    }

    .divider {
      display: none; /* Remove a divisória em telas menores para evitar bagunça */
    }

    .button-group {
      width: 100%;
      justify-content: flex-end;
    }
  }

/* Gráficos */
.chart-container {
    position: relative;
    height: 164px; /* Ajustado para caber no card de 200px */
    width: 100%;
    margin-bottom: 0; /* Removido margin-bottom para evitar espaço extra */
}

/* Tabelas */
.table {
    width: 100%;
    margin-bottom: 0;
}

.table thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: var(--text-muted);
    border-top: none;
    border-bottom: 1px solid #e9ecef;
    padding: 12px 16px;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.table tbody td {
    padding: 2px 16px; /* Reduzindo o padding vertical de 6px para 4px */
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.table tbody tr:hover {
    background-color: rgba(94, 191, 183, 0.05);
}

/* Ajustes específicos para a tabela de transações */
.table th:nth-child(2), /* Data do Evento */
.table td:nth-child(2) {
    width: 100px;
    text-align: center;
}

.table th:nth-child(3), /* Data da Efetivação */
.table td:nth-child(3) {
    width: 100px;
    text-align: center;
}

.table th:last-child, /* Ações */
.table td:last-child {
    width: 150px;
    text-align: center;
}

.action-buttons {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.action-buttons .btn {
    padding: 4px 8px;
    font-size: 0.85rem;
}

/* Badges */
.badge {
    padding: 6px 10px;
    border-radius: 4px;
    font-weight: 500;
}

/* Eventos Futuros */
.eventos-futuros {
    height: 164px; /* Ajustado para caber no card de 200px */
    overflow: hidden; /* Garante que não haja barras de rolagem */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.evento-item {
    display: flex;
    align-items: center;
    padding: 6px 0; /* Mantém o padding reduzido */
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0; /* Impede que os itens encolham */
}

.evento-data {
    background: #f5f7fa;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-right: 12px;
    color: var(--text-muted);
}

.evento-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.evento-titulo {
    font-weight: 500;
    font-size: 0.9rem;
}

.evento-valor {
    font-weight: 600;
    font-size: 0.9rem;
}

.evento-sinalizacao {
    font-size: 0.75rem;
}

.evento-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Botões */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transition: box-shadow 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: white;
}

.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: white;
    transition: box-shadow 0.3s ease;
}

.btn-success:hover {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.filter-periodo button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 0 15px;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.filter-periodo button:hover {
    background-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.bi-filter-circle {
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.bi-filter-circle:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
}

/* Estado vazio */
.empty-state {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Responsividade */
@media (max-width: 1366px) {
    .totalizadores-row {
        flex-direction: column;
        gap: 15px;
    }

    .card-totalizador,
    .indicator-card {
        flex: 0 0 100%;
        min-width: 0;
    }

    .table-responsive {
        width: 100%;
        overflow-x: auto;
    }

    .table thead th,
    .table tbody td {
        min-width: 80px;
        padding: 6px 8px; /* Reduzido de 10px para 6px no padding vertical */
        white-space: nowrap;
    }

    .btn-group {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .btn-group .btn {
        margin-bottom: 8px;
        width: 100%;
        border-radius: 5px !important;
    }

    .table td:last-child .action-buttons {
        flex-direction: row !important;
        width: auto !important;
    }

    .table td:last-child .action-buttons .btn {
        margin-bottom: 0 !important;
        width: auto !important;
        padding: 4px 6px;
    }

    .filter-periodo {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .filter-periodo select,
    .filter-periodo button {
        width: 100%;
    }

    .main-content {
        padding: 12px;
    }
}
    
    .main-content {
        margin-left: 0;
        padding: 15px;
    }
    
    .mobile-menu-toggle {
        display: block;
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 1100;
        background: var(--primary-color);
        color: white;
        border: none;
        border-radius: 50%;
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .period-selector {
        flex-direction: column;
        align-items: stretch;
    }
    
    .period-nav {
        display: none;
    }
    
    .period-items {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px 0;
    }
    
    .card-body {
        padding: 15px;
    }
    
    .table-responsive {
        margin: 0 -15px;
        width: calc(100% + 30px);
    }
    
    .totalizadores-row {
    align-items: flex-start;
}
    
    .card-totalizador,
    .indicator-card {
        flex: 0 0 100%;
    }
}

@media (max-width: 576px) {
    .card-body {
        padding: 10px;
    }
    
    .card-title {
        font-size: 1rem;
    }
    
    .card-value {
        font-size: 1.25rem;
    }
    
    .btn-group {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    
    .btn-group .btn {
        margin-bottom: 5px;
        border-radius: 4px !important;
    }

    .table thead th,
    .table tbody td {
        font-size: 0.7rem;
        padding: 4px 6px; /* Reduzido de 8px para 4px no padding vertical */
        min-width: 60px;
    }

    .table td:last-child .action-buttons .btn {
        padding: 3px 4px;
        font-size: 0.7rem;
    }
}

/* Cabeçalho da tabela fixo durante rolagem */
.table-responsive {
    overflow-x: auto;
}

.table thead th {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
}

/* Filtros */
.filter-section {
    background-color: white;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.filter-section .form-control,
.filter-section .form-select {
    border-radius: 5px;
    border: 1px solid #ddd;
}

.filter-periodo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-periodo select,
.filter-periodo button {
    height: 38px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

/* Estilo para o botão de status */
.status-pendente {
    background-color: var(--danger-color) !important;
    color: white !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 5px !important;
}

.status-pago {
    background-color: var(--success-color) !important;
    color: white !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 5px !important;
}

/* Ajustes específicos para a aba de cartões */
.tabela-cartoes th:nth-child(4),
.tabela-cartoes td:nth-child(4) { /* Total Vinculado */
    width: 15%;
    min-width: 120px;
}

.tabela-cartoes th:nth-child(1),
.tabela-cartoes td:nth-child(1) {
    width: 120px;
    text-align: center;
}

.tabela-cartoes th:nth-child(2),
.tabela-cartoes td:nth-child(2) {
    width: 200px;
}

.tabela-cartoes th:nth-child(3),
.tabela-cartoes td:nth-child(3) {
    width: 150px;
}

.tabela-cartoes th:nth-child(4),
.tabela-cartoes td:nth-child(4) {
    width: 100px;
    text-align: right;
}

.tabela-cartoes th:last-child,
.tabela-cartoes td:last-child {
    width: 120px;
    text-align: center;
}

.tabela-cartoes .action-btn {
    padding: 6px 10px;
    font-size: 0.9rem;
}

.tab-content .table-responsive {
    margin-bottom: 20px;
}

/* Ajustes para o card de faturas */
.card-title.faturas-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--secondary-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title.faturas-title i {
    color: var(--primary-color);
}

.card-title.faturas-title #faturas-filtro {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text-muted);
}

.card.faturas-card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
    border: 1px solid #e9ecef;
}

/* Container principal dos cards de gráfico */
.card-grafico {
    height: 300px; /* Altura fixa igual ao Radar de transações */
    display: flex;
    flex-direction: column;
    text-align: center;
    overflow: hidden; /* Garante que não haja barras de rolagem */
    box-sizing: border-box; /* Inclui paddings na altura total */
}

/* Corpo do card */
.card-grafico .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.4rem; /* Reduzido para 0.4rem (6.4px) */
    justify-content: space-between;
    box-sizing: border-box; /* Inclui paddings na altura total */
}

/* Título do card centralizado */
.card-grafico .card-title {
    text-align: center;
    margin-bottom: 0.2rem; /* Mantido em 0.2rem (3.2px) */
    font-size: 1rem; /* Mantido em 1rem (16px) */
    font-weight: 600;
    color: var(--secondary-color);
    width: 100%;
    flex-shrink: 0; /* Impede que o título encolha */
    box-sizing: border-box; /* Inclui margens na altura total */
}

/* Container do gráfico */
.card-grafico .chart-container {
    position: relative;
    height: 264px; /* Aumentado de 164px para 264px */
    width: 100%;
    padding-top: 0.2rem; /* Mantido em 0.2rem (3.2px) */
    padding-bottom: 0.2rem;
    overflow: hidden; /* Garante que não haja barras de rolagem */
    flex-grow: 1; /* Permite que o gráfico ocupe o espaço restante */
    box-sizing: border-box; /* Inclui paddings na altura total */
}

/* Ajustes específicos para o gráfico */
#comparacaoChart {
    width: 100% !important;
    height: 100% !important;
    min-height: 264px; /* Aumentado para alinhar com o chart-container */
    box-sizing: border-box; /* Inclui bordas e paddings na altura total */
}

#cardAcontecer {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Mantém o overflow para cantos arredondados */
    box-sizing: border-box;
}

/* Apenas em telas de desktop (>= 992px) */
@media (min-width: 992px) {
    #cardAcontecer {
        height: auto; /* Permite que a altura se ajuste ao conteúdo */
        min-height: 300px; /* Garante uma altura mínima para alinhar com outros cards quando vazio */
    }
}


#cardAcontecer .evento-item {
    display: flex;
    align-items: center;
    padding: 1px 0; /* Reduzido de 2px para 1px para minimizar o espaçamento */
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    min-height: 40px; /* Mantido em 40px para legibilidade */
    box-sizing: border-box; /* Inclui padding na altura total */
}

#cardAcontecer .evento-data {
    background: #f5f7fa;
    padding: 2px 6px; /* Mantido em 2px 6px */
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem; /* Reduzido de 0.7rem para 0.65rem */
    margin-right: 6px; /* Reduzido de 8px para 6px */
    color: var(--text-muted);
    line-height: 1; /* Garante que o texto não adicione altura extra */
}

#cardAcontecer .evento-titulo {
    font-weight: 500;
    font-size: 0.8rem; /* Reduzido de 0.75rem para 0.7rem */
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
	margin-left: 20px; /* Adicionado espaçamento à esquerda para separar do valor */
    text-overflow: ellipsis;
    line-height: 1; /* Garante que o texto não adicione altura extra */
}

#cardAcontecer .evento-valor {
    font-weight: 600;
    font-size: 0.8rem; /* Reduzido de 0.75rem para 0.7rem */
    min-width: 70px;
    text-align: right;
    line-height: 1; /* Garante que o texto não adicione altura extra */
}

#cardAcontecer .evento-sinalizacao {
    font-size: 0.75rem; /* Reduzido de 0.7rem para 0.65rem */
    min-width: 100px;
    text-align: right;
	margin-left: 20px; /* Adicionado espaçamento à esquerda para separar do valor */
    line-height: 1; /* Garante que o texto não adicione altura extra */
}

#cardAcontecer .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.3rem; /* Mantido */
    justify-content: space-between;
    box-sizing: border-box;
}

#cardAcontecer .card-title {
    text-align: center;
    margin-bottom: 0.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--secondary-color);
    flex-shrink: 0;
}

#cardAcontecer .btn-group {
    margin-bottom: 0.3rem; /* Ajustado para um espaçamento confortável */
    flex-shrink: 0;
    display: flex;
    gap: 0.5rem; /* Espaçamento entre os botões */
}

#cardAcontecer .btn-group button {
    padding: 0.3rem 0.7rem; /* Aumentado ligeiramente para legibilidade, mas menor que o padrão */
    font-size: 0.85rem; /* Tamanho legível, mas reduzido */
    border-radius: 0.5rem; /* Bordas mais arredondadas para um look moderno */
    border: none; /* Remover borda padrão */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Animação suave */
    min-width: 80px; /* Largura mínima para consistência */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

#cardAcontecer .btn-group button[data-tipo="pagar"] {
    background-color: var(--danger-color); /* Vermelho para A Pagar */
    color: white;
}

#cardAcontecer .btn-group button[data-tipo="pagar"]:hover {
    background-color: #c0392b; /* Tom mais escuro de vermelho */
    transform: translateY(-1px);
}

#cardAcontecer .btn-group button[data-tipo="receber"]:hover {
    background-color: #27ae60; /* Tom mais escuro de verde */
    transform: translateY(-1px);
}

#cardAcontecer .btn-group button[data-tipo="receber"]:hover {
    background-color: darken(var(--success-color), 10%); /* Escurecer ao hover (simulado) */
}

#cardAcontecer .btn-group button.active {
    opacity: 0.9; /* Diferenciar botão ativo */
    transform: scale(1.02); /* Pequeno aumento no ativo */
}

/* Ajustes para o card Pendentes */
#cardPendentes {
    height: 300px; /* Reduzido de 400px para 300px, alinhado com .card-grafico */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

#cardPendentes .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.4rem; /* Alinhado com os outros cards */
    justify-content: space-between;
    box-sizing: border-box;
}

#cardPendentes .card-title {
    text-align: center;
    margin-bottom: 0.2rem; /* Alinhado com os outros cards */
    font-size: 1rem;
    font-weight: 600;
    color: var(--secondary-color);
    flex-shrink: 0;
}

#cardPendentes .eventos-futuros {
    height: 264px; /* Mantido em 264px, alinhado com .chart-container e #cardAcontecer */
    overflow: auto; /* Adicionado para rolagem se necessário */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-grow: 1;
}

#cardPendentes .evento-item {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

#cardPendentes .evento-data {
    background: #f5f7fa;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-right: 12px;
    color: var(--text-muted);
}

#cardPendentes .evento-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#cardPendentes .evento-titulo {
    font-weight: 500;
    font-size: 0.9rem;
}

#cardPendentes .evento-valor {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--danger-color); /* Valores pendentes como despesa */
}
/* Novo estilo para o card de cabeçalho */
/* Header do Dashboard */
#cardHeader {
    background-color: #2f66cb !important; /* Cor sólida definida */
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; /* Sombra mais sutil para cor sólida */
}

#cardHeader .card-body {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px; /* Ajustado para espaçamento interno */
    box-sizing: border-box;
}

#cardHeader .card-title {
    color: #ffffff !important; /* Garante texto branco */
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

#cardHeader .card-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

/* Ajustes para o dropdown no cabeçalho */
#cardHeader .dropdown {
    position: relative; /* Já existe: É necessário para o z-index do dropdown */
    z-index: 1070; /* Aumentado: Garante que o container do dropdown fique acima de outros elementos dentro do cardHeader */
}

#cardHeader .btn-light {
    padding: 6px;
    font-size: 1.5rem;
    line-height: 1;
}

#cardHeader .dropdown-menu {
    min-width: 180px;
    z-index: 1060; /* Mantido: Garante que o menu fique acima de outros elementos dentro do dropdown */
}

#cardHeader .dropdown-item {
    padding: 8px 16px;
    font-size: 0.9rem;
}

#cardHeader .dropdown-item.text-danger:hover {
    background-color: #ffebee; /* Tom leve de vermelho ao passar o mouse */
}

/* Melhorias CSS para responsividade */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        height: 100vh;
        width: 280px;
        transition: left 0.3s ease;
        z-index: 1050;
    }
    
    .sidebar.show {
        left: 0;
    }
    
    .main-content {
        margin-left: 0;
        padding: 15px;
    }
    
    .mobile-header {
        display: block;
        background: #0F3C43;
        color: white;
        padding: 15px;
        position: sticky;
        top: 0;
        z-index: 1040;
    }
    
    .table-responsive {
        font-size: 0.9rem;
    }
    
    .action-btn {
        padding: 2px 6px;
        font-size: 0.8rem;
    }
}

@media (min-width: 769px) {
    .mobile-header {
        display: none;
    }
}

/* Melhorias na tabela para mobile */
@media (max-width: 576px) {
    .table-card {
        font-size: 0.8rem;
    }
    
    .table-card th,
    .table-card td {
        padding: 8px 4px;
    }
    
    /* Esconder colunas menos importantes em telas pequenas */
    .table-card .d-none-mobile {
        display: none;
    }
}

/* Estados de hover e transições */
.card {
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.btn {
    transition: all 0.2s ease;
}

.progress-bar {
    transition: width 0.5s ease;
}

/* Animações para carregamento */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Melhorias de acessibilidade */
:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

.btn:focus,
.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Alto contraste para textos */
.text-muted {
    color: #6c757d !important;
}

/* Indicadores visuais para status */
.meta-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.meta-status-ativa { background-color: #28a745; }
.meta-status-atrasada { background-color: #dc3545; }
.meta-status-concluida { background-color: #17a2b8; }

/* Skip links para navegação */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 1000;
}

.skip-link:focus {
    top: 6px;
}

/* Toast de notificação */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1100;
}

/* ===== MELHORIAS DASHBOARD - NOVA IDENTIDADE VISUAL ===== */

/* Header do Dashboard */
#cardHeader {
    background-color: #2f66cb !important; /* Cor sólida definida */
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; /* Sombra mais sutil para cor sólida */
}

#cardHeader .card-title {
    color: #ffffff !important; /* Garante texto branco */
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

#cardHeader .card-subtitle {
    color: rgba(255, 255, 255, 0.9) !important; /* Aumenta um pouco a opacidade para melhor contraste */
    font-size: 0.95rem !important;
}

#cardHeader .btn-light {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    color: white !important;
}


/* ================================================================= */
/* === AJUSTE NOS ÍCONES DO HEADER (REMOÇÃO DO CÍRCULO) === */
/* ================================================================= */

/* 
  Seleciona os botões dentro do container de ações do header.
  Esta regra remove o fundo, a borda e a sombra, tornando-os transparentes.
*/
#cardHeader .header-actions .btn {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important; /* Garante que os ícones fiquem brancos */
}

/* 
  Ajusta a aparência do ícone ao passar o mouse por cima, 
  aumentando levemente a opacidade para dar um feedback visual sutil.
*/
#cardHeader .header-actions .btn:hover {
    background-color: transparent !important; /* Garante que não apareça fundo no hover */
    opacity: 0.85;
}

/* 
  Ajuste fino no posicionamento do badge de notificação, 
  já que o botão de referência mudou de tamanho.
*/
#notification-badge {
    /* Opcional: ajuste a posição se o badge ficar desalinhado */
    transform: translate(-50%, -50%); 
}

/* ===================================================================== */
/* === AJUSTE DE TAMANHO DOS ÍCONES DO HEADER (MOBILE) - VERSÃO CORRIGIDA === */
/* ===================================================================== */

/* Aplica estas regras apenas em telas com largura máxima de 767.98px (celulares) */
@media (max-width: 767.98px) {

    /*
      Sobrescreve a classe .fs-4 do Bootstrap especificamente para os ícones
      dentro do botão de menu e das ações do header.
      O uso do !important é CRÍTICO para anular a regra padrão do Bootstrap.
    */
    #mobile-menu-toggle .fs-4,
    #cardHeader .header-actions .fs-4 {
        font-size: 1.4rem !important; /* Valor reduzido (era 1.75rem). Ajuste se necessário. */
    }

    /*
      Opcional: Reduz um pouco o espaçamento entre os ícones da direita
      para compensar a mudança de tamanho e manter a harmonia.
    */
    #cardHeader .header-actions {
        gap: 0.3rem; /* Era 0.5rem */
    }
}


/* Cards de Resumo Modernos */
.main-content .card:not(#cardHeader) {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
}

.main-content .card:not(#cardHeader):hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
}

/* Cards de Indicadores com Gradientes */
.totalizadores-row .card:nth-child(1) { /* Receitas - mantida */
    background: linear-gradient(135deg, #EBF4FF 0%, #DBEAFE 100%) !important;
    border-left: 4px solid #1E3A8A !important;
}

.totalizadores-row .card:nth-child(2) { /* Despesas - usar vermelho do Saldo */
    background: linear-gradient(135deg, #FEF2F2 0%, #FECACA 100%) !important;
    border-left: 4px solid #DC2626 !important;
}

.totalizadores-row .card:nth-child(3) { /* Saldo - usar verde das Despesas */
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%) !important;
    border-left: 4px solid #059669 !important;
}

.totalizadores-row .card:nth-child(4) { /* Transações Pendentes - mantida */
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%) !important;
    border-left: 4px solid #0284C7 !important;
}

@media (max-width: 767.98px) { /* Aplica-se a telas de celular */

    /* Adiciona um espaçamento (margem) abaixo de cada card principal */
    .main-content .row > [class*="col-"] {
        margin-bottom: 1rem; /* 1rem = aproximadamente 16px */
    }

    

/* Valores dos Cards */
.card-value {
    font-size: 1.5rem; /* ou 1.25rem, ajuste até evitar quebra */
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.1;
}



/* O card de cada mês */
.period-item {
    min-width: 110px; /* Largura mínima reduzida */
    padding: 8px 10px; /* Padding interno reduzido */
    border-radius: 8px;
    background: white;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.period-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
    border-color: #3B82F6 !important;
}

.period-item.active {
    background: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color);
}


.period-nav {
    background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%) !important;
    color: white !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.period-nav:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3) !important;
}

/* Gráficos com Nova Paleta */
.chart-container {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Seção de Pendentes */
.main-content .card:has(.text-center.text-muted) {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%) !important;
    border-left: 4px solid #16A34A !important;
}

/* Animações de Entrada */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-content .card {
    animation: slideInUp 0.6s ease-out !important;
}

.main-content .card:nth-child(1) { animation-delay: 0.1s !important; }
.main-content .card:nth-child(2) { animation-delay: 0.2s !important; }
.main-content .card:nth-child(3) { animation-delay: 0.3s !important; }
.main-content .card:nth-child(4) { animation-delay: 0.4s !important; }


/* Estados de Loading Modernos */
.card-value.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: loading 1.5s infinite !important;
    color: transparent !important;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === Estilos para o Novo Radar de Transações === */

#cardAcontecer .card-body {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

#radar-controls {
    flex-shrink: 0;
    margin-bottom: 1rem;
    display: flex; /* Garante que os botões fiquem na mesma linha */
    gap: 0.5rem; /* Espaçamento entre os botões */
}

#radar-controls .btn {
    flex: 1; /* Faz os botões ocuparem o espaço igualmente */
}

.eventos-futuros {
    flex-grow: 1;
    overflow-y: auto;
    margin: 0 -1rem -1rem;
    padding: 0 1rem 1rem;
}

.evento-item-novo {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
    gap: 1rem;
}

.evento-item-novo:last-child {
    border-bottom: none;
}

.evento-icone {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.evento-icone.despesa {
    background-color: var(--danger-color); /* Usa sua variável de cor */
}

.evento-icone.receita {
    background-color: var(--success-color); /* Usa sua variável de cor */
}

.evento-detalhes {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0; /* Corrige problemas de overflow de texto */
}

.evento-titulo-novo {
    font-weight: 600;
    color: #34495e;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.evento-categoria {
    font-size: 0.8rem;
    color: #7f8c8d;
    line-height: 1;
}

/* SUBSTITUA as regras .evento-proximidade e .evento-proximidade-barra por esta */

.evento-sinalizacao-nova {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
}

.evento-sinalizacao-nova.vencido { color: var(--danger-color); }
.evento-sinalizacao-nova.hoje { color: var(--warning-color); }
.evento-sinalizacao-nova.perto { color: #3498db; }
.evento-sinalizacao-nova.longe { color: var(--text-muted); }

.evento-valor-novo {
    font-weight: 700;
    font-size: 1rem;
    text-align: right;
    white-space: nowrap;
}

/* =================================================================== */
/* CSS Final e Refinado para o Seletor do Radar de Transações      */
/* =================================================================== */



/* Remove o anel de foco do navegador */
.radar-toggle-btn:focus, .radar-toggle-btn:active {
  outline: none;
  box-shadow: none;
}
.radar-toggle-btn.active:focus, .radar-toggle-btn.active:active {
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
}

.tour-highlight {
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
  border-radius: 8px; /* Opcional: para um acabamento mais suave */
  z-index: 10001; /* Garante que fique acima da sobreposição escura */
  position: relative; /* Necessário para o z-index funcionar corretamente */
}

/* Estilo base para o card de indicador (aplicável em qualquer página) */
.card-indicador {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
}

.card-indicador:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Estilo para o título dentro do card de indicador */
.card-indicador .card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6c757d; /* text-muted */
    margin-bottom: 0.25rem;
}

/* Estilo para o valor principal dentro do card de indicador */
.card-indicador .card-value {
    font-size: 1.75rem; /* Fonte maior para destaque */
    font-weight: 700;   /* Fonte mais grossa (bold) */
    line-height: 1.2;
}

/* Estilo para o texto de período/descrição (ex: "Agosto 2025") */
.card-indicador .card-period {
    font-size: 0.8rem;
    color: #6c757d; /* text-muted */
}

/* Adicione este código ao final do seu arquivo css/styles.css */

/* ================================================== */
/* === CORREÇÃO E REFINAMENTO DOS FILTROS === */
/* ================================================== */

/* Garante que os selects de filtro tenham a aparência padrão do Bootstrap */
/* Garante que os selects de filtro tenham a aparência padrão do Bootstrap */
.filter-select {
    -webkit-appearance: none; /* Remove a aparência padrão do navegador */
    -moz-appearance: none;
    appearance: none;
    
    /* ▼▼▼ CORREÇÃO PRINCIPAL APLICADA AQUI ▼▼▼ */
    /* Remove qualquer imagem de fundo (seta) herdada do Bootstrap */
    background-image: none !important; 
    /* ▲▲▲ FIM DA CORREÇÃO ▲▲▲ */

    /* Adiciona a nossa própria seta personalizada */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e" );
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

/* No mobile, força os grupos de botões e filtros a se alinharem e centralizarem */
@media (max-width: 991.98px) {
    .action-buttons-group,
    .filter-group {
        flex-basis: 100%;      /* Faz o grupo ocupar a largura toda */
        justify-content: center; /* Centraliza os itens dentro do grupo */
    }
}

/* Adicione este bloco de código ao FINAL do seu arquivo css/styles.css */

/* ================================================== */
/* === AJUSTES FINOS DE RESPONSIVIDADE (MOBILE) === */
/* ================================================== */

/* Aplica estas regras apenas em telas com largura máxima de 767px (celulares) */
@media (max-width: 767.98px) {

    /* 
      Diminui o tamanho da fonte do valor principal nos cards 
      para evitar quebra de linha ou corte em valores grandes.
    */
    .card-indicador .card-value {
        font-size: 1.3rem !important; /* Reduz de 1.75rem para 1.3rem */
    }

    /* 
      Opcional: Diminui também o título para manter a proporção visual.
    */
    .card-indicador .card-title {
        font-size: 0.8rem !important;
    }
}

#modalNovaTransacao .modal-footer {
    display: flex;
    flex-wrap: nowrap; /* Impede que os botões quebrem a linha */
    justify-content: flex-end; /* Alinha os botões à direita */
    gap: 0.5rem; /* Adiciona um pequeno espaço entre os botões */
}

/* Adicione este bloco de código ao FINAL do seu arquivo css/styles.css */

/* ================================================== */
/* === BARRA DE RESUMO PARA MOBILE (DASHBOARD) === */
/* ================================================== */

.mobile-summary-bar {
    display: flex;
    justify-content: space-around; /* Distribui os itens igualmente */
    background-color: #FFFFFF;
    padding: 10px 5px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
}

.summary-item {
    display: flex;
    flex-direction: column; /* Empilha o label e o valor */
    align-items: center;   /* Centraliza horizontalmente */
    text-align: center;
    flex: 1; /* Faz cada item ocupar o mesmo espaço */
}

.summary-item .label {
    font-size: 0.75rem; /* Fonte pequena para o label */
    color: #6c757d; /* text-muted */
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 2px;
}

.summary-item .value {
    font-size: 1rem; /* Tamanho da fonte principal */
    font-weight: 700;
    line-height: 1.2;
}

/* Estilo para a legenda/período dentro da barra de resumo mobile */
.summary-item .summary-period {
    font-size: 0.7rem; /* Fonte bem pequena para a legenda */
    color: #6c757d;   /* text-muted */
    line-height: 1;
    margin-top: 2px;
}

/* Em css/styles.css */

/* =============================================== */
/* === LISTA DE FATURAS RESPONSIVA (MOBILE) === */
/* =============================================== */

.fatura-card-mobile {
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.fatura-card-mobile .fatura-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.fatura-card-mobile .fatura-cartao {
    font-weight: 600;
    font-size: 1.1rem;
    color: #343a40;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fatura-card-mobile .fatura-valor {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--danger-color);
}

.fatura-card-mobile .fatura-detalhes {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.fatura-card-mobile .fatura-status.pago {
    color: var(--success-color);
    font-weight: 500;
}

.fatura-card-mobile .fatura-status.pendente {
    color: var(--warning-color);
    font-weight: 500;
}

.fatura-card-mobile .fatura-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* Em css/styles.css */

/* =============================================== */
/* === LISTA DE FATURAS RESPONSIVA (MOBILE) === */
/* =============================================== */

.fatura-card-mobile {
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.fatura-card-mobile .fatura-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.fatura-card-mobile .fatura-cartao {
    font-weight: 600;
    font-size: 1.1rem;
    color: #343a40;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fatura-card-mobile .fatura-valor {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--danger-color);
}

.fatura-card-mobile .fatura-detalhes {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.fatura-card-mobile .fatura-status.pago {
    color: var(--success-color);
    font-weight: 500;
}

.fatura-card-mobile .fatura-status.pendente {
    color: var(--warning-color);
    font-weight: 500;
}

.fatura-card-mobile .fatura-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.badge-importada {
    display: inline-flex; /* Usa inline-flex para alinhar ícone e texto */
    align-items: center;
    gap: 0.35rem; /* Espaço entre o ícone e o texto */
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--success-color);
    background-color: #eafaf1; /* Fundo verde bem claro */
    padding: 0.25rem 0.6rem;
    border-radius: 50rem; /* Borda de pílula */
    line-height: 1;
    vertical-align: middle; /* Alinha o selo com o texto ao redor */
    margin-left: 0.5rem; /* Mantém o espaçamento do nome do cartão */
}

/* ================================================================= */
/* === AJUSTE FINO DO HEADER PARA ALINHAMENTO EM LINHA ÚNICA (MOBILE) === */
/* ================================================================= */

/* ================================================================= */
/* === AJUSTE FINO DO HEADER PARA ALINHAMENTO EM LINHA ÚNICA (MOBILE) === */
/* ================================================================= */

/* ===================================================================== */
/* === SOLUÇÃO DEFINITIVA PARA HEADER MOBILE EM LINHA ÚNICA === */
/* ===================================================================== */

/* ===================================================================== */
/* === SOLUÇÃO FINAL E CORRETA PARA HEADER MOBILE EM LINHA ÚNICA === */
/* ===================================================================== */

/* ===================================================================== */
/* === SOLUÇÃO FINAL E CORRETA PARA HEADER MOBILE EM LINHA ÚNICA === */
/* ===================================================================== */

/* ===================================================================== */
/* === SOLUÇÃO FINAL E CORRETA PARA HEADER MOBILE EM LINHA ÚNICA === */
/* ===================================================================== */

/* ===================================================================== */
/* === AJUSTE DEFINITIVO E CORRETO P/ HEADER MOBILE (25/08/2025) === */
/* ===================================================================== */

/* ===================================================================== */
/* === ESTRATÉGIA FINAL HEADER MOBILE (Simplificação Radical) === */
/* ===================================================================== */
/* ===================================================================== */
/* === HEADER MOBILE FINAL COM CSS GRID (Centralização Perfeita) === */
/* ===================================================================== */

/* Aplica estas regras apenas em telas com largura máxima de 767.98px (celulares) */
@media (max-width: 767.98px) {

    /* 
      1. Reduz o espaçamento interno (padding) do header.
      Esta é a mudança principal que diminuirá a altura total.
    */
    #cardHeader .card-body {
        padding-top: 8px !important;    /* Reduz o padding superior */
        padding-bottom: 8px !important; /* Reduz o padding inferior */
        min-height: 0; /* Remove qualquer altura mínima que possa estar sendo herdada */
    }

    /* 
      2. Reduz o tamanho da fonte do título "Olá, Marcos!".
    */
    #cardHeader #page-title-placeholder {
        font-size: 1.0rem !important; /* Reduz o tamanho do título */
        font-weight: 600 !important;
    }

    /* 
      3. Reduz o tamanho dos ícones (hambúrguer, sino, perfil).
    */
    #mobile-menu-toggle i.fs-4,
    #notificationMenuButton i.fs-4,
    #userMenuButton i.fs-4 {
        font-size: 1.3rem !important; /* Reduz o tamanho dos ícones */
    }
}

    /* 4. Posiciona o container do botão de menu na coluna da esquerda */
    /* O seletor mira no primeiro <div> filho do .card-body */
    #cardHeader .card-body > div:first-child {
        grid-column: 1; /* Coluna da esquerda */
        display: flex;
        align-items: center;
    }
    
    /* 5. Posiciona os ícones na coluna da direita */
    #cardHeader .header-actions {
        grid-column: 3; /* Coluna da direita */
        display: flex;
        align-items: center;
        gap: 0.5rem; /* Espaçamento entre os ícones */
    }
}

/* Adicione ou ajuste estes estilos no final do seu css/styles.css */

/* ================================================== */
/* ▼▼▼ ESTILOS PARA O SELETOR DE PÍLULAS (MOBILE) ▼▼▼ */
/* ================================================== */

/* Adicione estes estilos ao final do seu css/styles.css */

/* ================================================== */
/* ▼▼▼ ESTILOS PARA O SELETOR DE PÍLULAS (MOBILE) ▼▼▼ */
/* ================================================== */

/* Container que cria o efeito de "card" */
.period-selector-pills-container {
  background-color: #f8f9fa; /* Fundo cinza claro, similar a um card */
  border-radius: 12px;
  padding: 8px;
  margin: 0 auto;
  max-width: 95%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Sombra suave */
  border: 1px solid #e9ecef;
}

/* Container rolável interno */
.period-items-pills {
  display: flex;
  align-items: center;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.period-items-pills::-webkit-scrollbar {
  display: none;
}

/* Estilo de cada pílula */
.period-item-pill {
  padding: 8px 18px;
  margin: 0 4px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  color: #6c757d;
  background-color: transparent;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  text-transform: capitalize;
}

/* Pílula ativa (selecionada) */
.period-item-pill.active {
  background-color: #ffffff;
  color: #212529;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ===================================================================== */
/* === NOVO HEADER MOBILE MINIMALISTA (BASEADO EM REFERÊNCIA) === */
/* ===================================================================== */

/* Aplica estas regras apenas em telas com largura máxima de 767.98px (celulares) */
@media (max-width: 767.98px) {

    /* 1. Estilo principal do Header */
    #cardHeader {
        background-color: #2f66cb !important; /* Fundo branco */ 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; /* Sombra sutil */
        border-bottom: 1px solid #f0f0f0 !important; /* Linha de separação fina */
        position: sticky; /* Mantém o header fixo no topo */
        top: 0;
        z-index: 1030;
    }

    /* 2. Remove o padding do .card-body para controle total */
    #cardHeader .card-body {
        padding: 12px 16px !important; /* Espaçamento interno ajustado */
    }

    /* 3. Estilo do título "Olá, Marcos!" */
    #cardHeader #page-title-placeholder {
        color: #ffffff !important; /* Cor de texto escura (preto suave) */
        font-size: 1.1rem !important; /* Tamanho de fonte proeminente */
        font-weight: 500 !important;
    }

    /* 4. Estilo dos ícones (hambúrguer, sino, perfil) */
    #mobile-menu-toggle i,
    #notificationMenuButton i,
    #userMenuButton i {
        font-size: 1.5rem !important; /* Tamanho dos ícones */
        color: #ffffff !important; /* Cor cinza escura para os ícones */
    }

    /* 5. Remove completamente o fundo e a borda dos botões dos ícones */
    #cardHeader .header-actions .btn,
    #mobile-menu-toggle {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
	
	/* ============================================= */
/* == Card para o Seletor de Período (Mobile) == */
/* ============================================= */

/*
 * Estilo para o card que envolve o seletor de meses no mobile.
 * O objetivo é criar um contêiner visual sem sombras ou bordas excessivas,
 * e garantir que o conteúdo (as pílulas) fique bem alinhado.
 */
.card-period-selector {
    background-color: #fff; /* Fundo branco padrão */
    border: none;           /* Remove a borda padrão do card */
    box-shadow: none;       /* Remove a sombra padrão para um visual mais limpo e integrado */
    overflow: hidden;       /* Garante que nada "vaze" para fora do card */
}

/*
 * Ajusta o padding interno do corpo do card para que o seletor
 * de pílulas não fique espremido contra as bordas.
 */
.card-period-selector .card-body {
    padding: 0.5rem 0; /* Reduz o padding vertical e remove o horizontal */
}

/*
 * Garante que o contêiner das pílulas (que permite a rolagem)
 * tenha um pouco de padding nas laterais para que as pílulas
 * não comecem coladas na borda do card.
 */
.period-selector-pills-container {
    padding: 0 0.75rem; /* Adiciona um respiro nas laterais esquerda e direita */
}

    
    /* 6. Garante que o subtítulo permaneça oculto */
    #cardHeader #page-subtitle-placeholder {
        display: none !important;
    }
}

/* ======================================================= */
/* == MENU DE ACESSO RÁPIDO (DESIGN MINIMALISTA CORRETO) == */
/* ======================================================= */

/* Card principal do menu */
.quick-actions-card .card-body {
    padding: 1rem; /* Espaçamento interno do card */
}

/* Título "Acesso Rápido" */
.quick-actions-card .card-title {
    font-weight: 500;
    font-size: 1rem;
    color: #212529; /* Cor preta, como solicitado */
    margin-bottom: 1.25rem !important; /* Aumenta o espaço abaixo do título */
}

/* Container que alinha os 3 botões */
.quick-actions-menu {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* Estilo de cada item/botão (ícone + texto) */
.quick-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    gap: 0.5rem; /* Espaço entre o ícone e o texto */
    transition: transform 0.2s ease;
}

.quick-action-item:hover {
    transform: scale(1.05); /* Efeito de zoom sutil ao passar o mouse */
}

/* Estilo do texto abaixo do ícone */
.quick-action-item span {
    font-size: 0.8rem;
    font-weight: 500;
    color: #6c757d; /* Cor cinza para o texto */
}

/* Estilo base para os ícones */
.quick-action-item i {
    font-size: 1.75rem; /* Tamanho dos ícones */
}

/* --- Cores Específicas para cada Ícone --- */

.icon-transacao {
    color: #2ecc71; /* Verde */
}

.icon-fatura {
    color: #e74c3c; /* Vermelho */
}

.icon-investimento {
    color: #3498db; /* Azul */
}
/* ================================================== */
/* == OTIMIZAÇÃO DOS BOTÕES DE AÇÃO PARA MOBILE == */
/* ================================================== */

/* Por padrão (desktop), esconde o texto de mobile */
.btn-text-mobile {
    display: none;
}

/* Aplica as regras apenas em telas pequenas (largura máxima de 991.98px) */
@media (max-width: 991.98px) {

    /* --- AJUSTES PARA ALINHAMENTO EM LINHA --- */

    /* 1. Força o grupo de botões a não quebrar a linha */
    .action-buttons-group {
        flex-wrap: nowrap !important; /* Impede a quebra de linha */
        width: 100%; /* Faz o grupo ocupar todo o espaço disponível */
    }

    /* 2. Faz cada botão ocupar o espaço de forma igual */
    .action-buttons-group .btn {
        flex-grow: 1; /* Permite que os botões cresçam para preencher o espaço */
        white-space: nowrap; /* Garante que o texto não quebre dentro do botão */
    }

    /* --- AJUSTES PARA REDUZIR O TAMANHO --- */

    /* 3. Reduz o padding e o tamanho da fonte dos botões */
    .btn-action-mobile {
        padding: 0.375rem 0.5rem; /* Padding vertical e horizontal reduzidos */
        font-size: 0.8rem;       /* Fonte menor */
    }

    /* 4. Esconde o texto de desktop */
    .btn-action-mobile .btn-text-desktop {
        display: none;
    }

    /* 5. Mostra o texto de mobile */
    .btn-action-mobile .btn-text-mobile {
        display: inline;
    }

    /* --- AJUSTES DE ÍCONES (JÁ EXISTENTES, MAS MANTIDOS) --- */

    /* Garante que o ícone '+' da fatura apareça no mobile */
    #btnAbrirModalFatura .bi-plus-circle {
        display: inline-block !important;
    }

    /* Garante que o ícone de recibo da fatura desapareça no mobile */
    #btnAbrirModalFatura .bi-receipt {
        display: none !important;
    }
}

/* Estilo para ocultar valores (reutilizado) */
.valor-oculto {
    filter: blur(5px);
    transition: filter 0.3s ease;
    cursor: default; /* Cursor padrão, já que a área toda não é clicável */
}
.valor-oculto::selection {
    background: transparent;
}
/* ================================================== */
/* == AJUSTE PARA "OLHINHO" AO LADO DO VALOR (MOBILE) == */
/* ================================================== */

/* Contêiner que agrupa o valor e o botão "olhinho" */
.value-container {
    display: flex;
    align-items: center; /* Alinha verticalmente o valor e o ícone */
    gap: 0.35rem;      /* Adiciona um pequeno espaço entre eles */
}

/* Estilo do botão "olhinho" para ser discreto */
.btn-visibility-toggle {
    color: #6c757d; /* Cor cinza (text-muted) */
    line-height: 1; /* Remove altura extra da linha */
    text-decoration: none; /* Remove sublinhado do link */
}

.btn-visibility-toggle:hover {
    color: #343a40; /* Escurece um pouco ao passar o mouse */
}

/* Ajusta o tamanho do ícone dentro do botão */
.btn-visibility-toggle i {
    font-size: 1.1rem; /* Tamanho do ícone */
}

/* Adicione este bloco de código ao final do seu arquivo css/styles.css */

/* =================================================================== */
/* === AJUSTE DE ESPAÇAMENTO PARA O DASHBOARD (DESKTOP) === */
/* =================================================================== */

/* Aplica esta regra apenas em telas com 992px de largura ou mais (desktop) */
@media (min-width: 992px) {

    /*
      Adiciona uma margem inferior (um "respiro") à linha que contém
      os quatro cards de resumo (Até o momento, Entrou, Saiu, Patrimônio).
      Isso os afastará do seletor de período que vem logo abaixo.
    */
    .totalizadores-row {
        margin-bottom: 2rem !important; /* 2rem = aprox. 32px de espaço */
    }
}
/* ================================================== */
/* == OTIMIZAÇÃO DE ALTURA DOS CARDS DE RESUMO == */
/* ================================================== */

/* Aplica a regra apenas em telas de desktop (>= 992px) */
@media (min-width: 992px) {
    /*
      Seleciona os cards de indicador que estão dentro da div
      que usamos para o resumo no desktop.
    */
    .d-lg-flex .card-indicador {
        height: 90px; /* Altura fixa reduzida */
        min-height: 90px;
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centraliza o conteúdo verticalmente */
    }

    /*
      Ajusta o tamanho da fonte do valor principal para
      caber melhor no novo espaço.
    */
    .d-lg-flex .card-indicador .card-value {
        font-size: 1.5rem; /* Um pouco maior para dar destaque */
        margin-bottom: 0; /* Remove a margem inferior que não é mais necessária */
    }
}
/* ====================================================== */
/* ESTILOS PARA O MODAL DE ASSINATURA                      */
/* ====================================================== */

/* Card principal dentro do modal */
.info-assinatura-card {
    background-color: #f8f9fa; /* Cor de fundo cinza claro, como no exemplo */
    border: none;
    border-radius: 0.75rem; /* Bordas mais arredondadas */
}

.info-assinatura-card .card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* Espaçamento entre as linhas de informação */
}

/* Linha de informações (ex: Plano/Status) */
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Cada item de informação (ex: Plano) */
.info-item {
    display: flex;
    flex-direction: column;
    flex-basis: 48%; /* Define uma base para os itens, permitindo que se alinhem */
}

/* Rótulo (ex: "Plano", "Status") */
.info-label {
    font-size: 0.8rem;
    color: #6c757d; /* Cinza escuro para o rótulo */
    margin-bottom: 0.25rem;
}

/* Valor (ex: "Anual", "Ativa") */
.info-value {
    font-size: 1rem;
    font-weight: 500;
    color: #212529; /* Preto para o valor */
}

/* Estilo específico para o status "Ativa" */
.info-value.status-ativa {
    color: #198754; /* Verde para indicar status ativo */
    font-weight: bold;
}

/* Seção de informações de cancelamento */
.cancelamento-info p {
    line-height: 1.6;
}

.cancelamento-info a {
    color: #495057;
    text-decoration: none;
}

.cancelamento-info a:hover {
    text-decoration: underline;
}

/* ================================================== */
/* CSS PARA O NOVO CABEÇALHO DO DASHBOARD (DESKTOP)   */
/* ================================================== */

.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.kpi-container {
    flex-grow: 1;
}

/* O wrapper que controla a largura do card do seletor */
.period-selector-wrapper {
    flex-shrink: 0;
    max-width: 580px; /* Largura máxima para caber 5 itens compactos */
    width: 100%;
}

/* O card em si */
.period-selector-card {
    width: 100%;
}

.period-selector-card .card-body {
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
}

/* O seletor de período dentro do card */
.period-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

/* O contêiner rolável dos meses */
.period-items {
    display: flex;
    overflow-x: auto;
    gap: 8px; /* Espaçamento entre os cards reduzido */
    padding: 0 10px;
    scroll-behavior: smooth;
    cursor: grab; /* Mostra a mãozinha para indicar que é arrastável */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.period-items.grabbing {
    cursor: grabbing; /* Mostra a mão fechada ao arrastar */
}
.period-items::-webkit-scrollbar {
    display: none;
}
/* Ajuste para o valor dentro do item do mês para não quebrar a linha */
.period-item .indicators {
    white-space: nowrap;
}

/* ================================================== */
/* === CARD ÚNICO DE TOTALIZADORES === */
/* ================================================== */

/* O card principal que envolve tudo */
.summary-card {
    width: 100%;
}

.summary-card .card-body {
    padding: 1rem 1.5rem; /* Espaçamento interno */
}

/* Título "Resumo do Período" */
.summary-title {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 1rem; /* Espaço abaixo do título */
    padding-bottom: 0.75rem; /* Espaço extra abaixo da linha */
    border-bottom: 1px solid #e9ecef; /* Linha divisória horizontal */
}

/* Wrapper que alinha os itens de resumo */
.summary-items-wrapper {
    display: flex;
    justify-content: space-around; /* Distribui os itens igualmente */
    align-items: center;
}

/* Cada item individual (ex: Resultado, Entrou) */
.summary-item {
    display: flex;
    flex-direction: column; /* Empilha o label e o valor */
    align-items: center;   /* Centraliza o conteúdo */
    text-align: center;
    flex-basis: 0; /* Permite que os itens cresçam igualmente */
    flex-grow: 1;
}

/* O rótulo (ex: "Resultado do mês") */
.summary-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #6c757d; /* text-muted */
    margin-bottom: 0.25rem;
}

/* O valor principal (ex: "R$ 12.504,20") */
.summary-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

/* A linha divisória vertical */
.summary-divider {
    width: 1px;
    height: 40px; /* Altura da divisória */
    background-color: #e9ecef; /* Cor da linha */
}


/* --- CORES INTENCIONAIS PARA O GRID --- */

/* Vencido (Vermelho) */
.radar-grid-row.vencido .col-vencimento,
.radar-grid-row.vencido .col-valor {
    color: var(--danger-color);
}

/* Hoje (Laranja) */
.radar-grid-row.hoje .col-vencimento,
.radar-grid-row.hoje .col-valor {
    color: var(--warning-color);
}

/* Futuro (Azul) */
.radar-grid-row.futuro .col-vencimento,
.radar-grid-row.futuro .col-valor {
    color: #3498db;
}

/* Receita (Verde) */
.radar-grid-row.receita .col-vencimento,
.radar-grid-row.receita .col-valor {
    color: var(--success-color);
}



/* Cabeçalho do Grid (APENAS DESKTOP) */
.radar-grid-header {
    display: flex;
    padding: 0 1rem 0.5rem 1rem;
    border-bottom: 1px solid #dee2e6;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
}

/* Linha de cada item do Grid (APENAS DESKTOP) */
.radar-grid-row {
    display: flex;
    align-items: center;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.radar-grid-row:last-child {
    border-bottom: none;
}

.radar-grid-row:hover {
    background-color: #f8f9fa;
}

/* Definição das colunas (APENAS DESKTOP) */
.col-descricao {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 1rem;
}

.col-vencimento {
    flex-basis: 120px;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 500;
}

.col-valor {
    flex-basis: 100px;
    text-align: right;
    font-weight: 600;
    font-size: 0.9rem;
}



/* --- 4. Cores Intencionais (Aplicável em ambos os layouts) --- */

/* Vencido (Vermelho) */
.radar-grid-row.vencido .col-vencimento,
.radar-grid-row.vencido .col-valor {
    color: var(--danger-color);
}

/* Hoje (Laranja) */
.radar-grid-row.hoje .col-vencimento,
.radar-grid-row.hoje .col-valor {
    color: var(--warning-color);
}

/* Futuro (Azul) */
.radar-grid-row.futuro .col-vencimento,
.radar-grid-row.futuro .col-valor {
    color: #3498db;
}

/* Receita (Verde) */
.radar-grid-row.receita .col-vencimento,
.radar-grid-row.receita .col-valor {
    color: var(--success-color);
}

/* ================================================== */
/* === RADAR DE TRANSAÇÕES - VERSÃO FINAL (DESKTOP OTIMIZADO) === */
/* ================================================== */

/* --- 1. Controles (Botões A Pagar / A Receber) - Sem alteração --- */
.radar-toggle-group {
  display: flex;
  background-color: #f1f3f5;
  border-radius: 18px;
  padding: 4px;
  margin: 0 auto 1rem auto;
  max-width: 280px;
}
.radar-toggle-btn {
  flex: 1; padding: 6px 8px; border: none; background: none;
  color: #343a40; font-weight: 600; font-size: 0.85rem;
  border-radius: 14px; cursor: pointer; transition: all 0.2s ease-in-out;
  display: flex; align-items: center; justify-content: center;
  gap: 6px; white-space: nowrap;
}
.radar-toggle-btn.active {
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
  transform: scale(1.01);
}
.radar-toggle-btn[data-tipo="pagar"].active { color: var(--danger-color); }
.radar-toggle-btn[data-tipo="receber"].active { color: var(--success-color); }

/* --- 2. Contêiner dos Itens - Sem alteração --- */
#cardAcontecer .eventos-futuros {
    padding: 0; 
    margin: 0; 
    display: flex; 
    flex-direction: column;
    overflow-y: auto;
    flex-grow: 1;
}

/* --- 3. Layout Desktop (Grid Otimizado) --- */
@media (min-width: 992px) {
    .radar-grid-header, .radar-grid-row {
        display: flex;
        align-items: center;
        /* ▼▼▼ MUDANÇA PRINCIPAL AQUI ▼▼▼ */
        justify-content: space-between; /* Distribui o espaço entre os itens */
        padding: 0.85rem 1rem;
    }

    .radar-grid-header {
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #dee2e6;
        font-size: 0.75rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
    }
    
    .radar-grid-row {
        border-bottom: 1px solid #f0f0f0;
    }
    .radar-grid-row:last-child { border-bottom: none; }

    /* ▼▼▼ AJUSTE NAS COLUNAS ▼▼▼ */
    .col-descricao {
        flex: 1; /* Permite que a descrição cresça, mas não domina o espaço */
        min-width: 0;
        font-weight: 500;
        color: #2c3e50;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left; /* Garante alinhamento à esquerda */
    }
    .col-vencimento {
        flex: 0 1 140px; /* Base de 140px, pode encolher se necessário */
        text-align: center; /* Centraliza o texto do vencimento */
        font-size: 0.85rem;
        font-weight: 500;
    }
    .col-valor {
        flex: 0 0 110px; /* Largura fixa de 110px, não cresce nem encolhe */
        text-align: right; /* Alinha o valor à direita */
        font-weight: 600;
        font-size: 0.9rem;
    }
}

/* ================================================== */
/* === RADAR DE TRANSAÇÕES - MOBILE OTIMIZADO (LINHA ÚNICA) === */
/* ================================================== */

@media (max-width: 991.98px) {
    /* Esconde o cabeçalho da tabela no mobile */
    .radar-grid-header { 
        display: none; 
    }

    /* ▼▼▼ MUDANÇA PRINCIPAL PARA O LAYOUT MOBILE ▼▼▼ */
    .radar-grid-row {
        display: flex;                 /* Usa Flexbox para alinhar em linha única */
        justify-content: space-between;/* Distribui o espaço entre os elementos */
        align-items: center;           /* Centraliza verticalmente */
        padding: 0.8rem 1rem;          /* Espaçamento interno */
        border-bottom: 1px solid #f0f0f0;
        gap: 0.75rem;                  /* Adiciona um espaço entre as colunas */
    }
    .radar-grid-row:last-child { 
        border-bottom: none; 
    }

    /* --- Definição das colunas no mobile --- */
    .col-descricao {
        flex: 1;                       /* Permite que a descrição ocupe o espaço restante */
        min-width: 0;                  /* Impede que o texto "empurre" outras colunas */
        font-size: 0.9rem;
        font-weight: 500;
        color: #2c3e50;
        white-space: nowrap;           /* Garante que o texto não quebre a linha */
        overflow: hidden;              /* Esconde o que não couber */
        text-overflow: ellipsis;       /* Adiciona "..." no final do texto cortado */
    }
    .col-vencimento {
        flex-shrink: 0;                /* Impede que a coluna encolha */
        font-size: 0.8rem;
        font-weight: 500;
        text-align: right;             /* Alinha à direita para ficar junto do valor */
    }
    .col-valor {
        flex-shrink: 0;                /* Impede que a coluna encolha */
        font-size: 0.9rem;
        font-weight: 600;
        text-align: right;
    }
}


/* --- 5. Cores Intencionais - Sem alteração --- */
.radar-grid-row.vencido .col-vencimento, .radar-grid-row.vencido .col-valor { color: var(--danger-color); }
.radar-grid-row.hoje .col-vencimento, .radar-grid-row.hoje .col-valor { color: var(--warning-color); }
.radar-grid-row.futuro .col-vencimento, .radar-grid-row.futuro .col-valor { color: #3498db; }
.radar-grid-row.receita .col-vencimento, .radar-grid-row.receita .col-valor { color: var(--success-color); }


/* Em cartao.html, dentro da tag <style> */

/* [NOVO] Estilo para o badge "Importada" */
.badge-importada {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #0f5132; /* Cor do texto verde escuro */
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem; /* Bordas arredondadas */
    background-color: #d1e7dd; /* Fundo verde claro */
    margin-left: 8px; /* Espaço para separar do nome do cartão */
}

.badge-importada .bi {
    margin-right: 4px; /* Espaço entre o ícone e o texto */
}
/* Em cartao.html, dentro da tag <style> */

/* [NOVO] Estilos para o Seletor de Mês em Cápsulas (Mobile) */
.month-selector-container {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* Melhora a rolagem em iOS */
    scrollbar-width: none; /* Oculta a barra de rolagem no Firefox */
    margin-bottom: 1rem;
}

.month-selector-container::-webkit-scrollbar {
    display: none; /* Oculta a barra de rolagem no Chrome, Safari, e Opera */
}

.month-pill {
    display: inline-block;
    padding: 8px 16px;
    margin-right: 10px;
    border-radius: 20px;
    background-color: #f8f9fa; /* Cor de fundo padrão */
    color: #495057; /* Cor do texto padrão */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid #dee2e6;
}

.month-pill:hover {
    background-color: #e9ecef; /* Cor ao passar o mouse */
}

.month-pill.active {
    background-color: #0d6efd; /* Cor primária do Bootstrap */
    color: #fff; /* Texto branco */
    border-color: #0d6efd;
    font-weight: bold;
}

.transaction-card .card-body {
	/* Garante que o conteúdo do modal (header, body, footer) se organize em coluna */
#modalDetalhamentoFatura .modal-content {
    display: flex;
    flex-direction: column;
}

/* Habilita a rolagem APENAS no corpo do modal */
#modalDetalhamentoFatura .modal-body {
    overflow-y: auto;
}

	
	/* --- 2. Estilos para DESKTOP (Telas com 768px ou mais de largura) --- */
@media (min-width: 768px) {
    #modalDetalhamentoFatura .modal-dialog {
        width: 60% !important;    /* Ocupa 60% da largura da tela */
        max-width: 60% !important; /* Garante que não ultrapasse 60% */
    }

    #modalDetalhamentoFatura .modal-content {
        max-height: 85vh; /* Limita a altura máxima a 85% da tela */
        height: 85vh;     /* Define uma altura consistente */
    }
}
	/* =================================================================== */
/* === OTIMIZAÇÃO FINAL DO MODAL DE DETALHAMENTO (MOBILE) === */
/* =================================================================== */

/* Aplica estas regras apenas em telas com largura máxima de 991.98px (tablets e celulares) */
/* Usamos o ponto de quebra 'lg' para coincidir com a classe 'modal-fullscreen-lg-down' */
/* Aplica estas regras apenas em telas com largura máxima de 767.98px (celulares) */
@media (max-width: 767.98px) {
    #modalDetalhamentoFatura .modal-dialog {
        width: 95% !important;
        max-width: 95% !important;
        height: 95vh !important;
        margin: auto !important;
    }

    #modalDetalhamentoFatura .modal-content {
        height: 100% !important; /* Ocupa toda a altura do .modal-dialog */
        border-radius: 12px !important;
    }
}

    /* --- 2. Ajustes finos nos cards de compra (mantidos) --- */
    .transaction-card .card-body {
        padding: 0.5rem !important;
    }
    .compra-icon-container {
        font-size: 1.0rem;
        width: 20px;
    }
    .compra-info .descricao {
        font-size: 0.8rem;
    }
    .compra-valor .valor {
        font-size: 0.85rem;
    }
}

/* --- Estilos base (mantidos para consistência em todas as telas) --- */
.compra-card-content {
    display: flex;
    align-items: center;
    gap: 10px;
}
.compra-info {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
}
.compra-info .descricao {
    display: block;
    font-weight: 500;
    color: #212529;
    overflow: hidden;
    text-overflow: ellipsis;
}
.compra-info .categoria {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
}
.compra-valor {
    text-align: right;
    flex-shrink: 0;
    margin-left: auto;
}
.compra-valor .valor {
    display: block;
    font-weight: bold;
    color: #dc3545;
}
.compra-valor .parcela {
    display: block;
    font-size: 0.7rem;
    color: #6c757d;
}

/* Estilos otimizados para modais do Controlei_v2 - Versão Final com botões aprimorados */

/* Variáveis de cores baseadas no Cashtrack */
:root {
  --primary-color: #5EBFB7;
  --primary-dark: #4a9e97;
  --primary-darker: #3a8a84;
  --secondary-color: #0F3C43;
  --secondary-light: #1a4b53;
  --success-color: #2ecc71;
  --danger-color: #e74c3c;
  --light-color: #f5f7fa;
  --border-color: #e0e0e0;
  --text-color: #333333;
  --text-muted: #6c757d;
  --modal-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  --input-bg: #f8f9fc;
  --input-border: #e0e0e0;
  --input-focus-shadow: 0 0 0 0.2rem rgba(94, 191, 183, 0.25);
}

/* Estilo base do modal */
.modal-dialog {
  max-width: 550px;
}

.modal-content {
  border: none;
  border-radius: 12px;
  box-shadow: var(--modal-shadow);
  overflow: hidden;
}

/* Cabeçalho do modal */
.modal-header {
  background-color: white;
  border-bottom: 1px solid var(--border-color);
  padding: 20px 24px;
}

.modal-title {
  color: var(--secondary-color);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0;
}

.modal-header .btn-close {
  background-size: 0.8rem;
  opacity: 0.6;
  transition: opacity 0.2s;
  padding: 0.5rem;
}

.modal-header .btn-close:hover {
  opacity: 1;
}

/* Corpo do modal */
.modal-body {
  padding: 20px 24px;
}

.modal-description {
  color: var(--text-muted);
  margin-bottom: 20px;
  font-size: 0.95rem;
}

/* Formulários dentro do modal */
.modal-form-group {
  margin-bottom: 16px;
}

.modal-form-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-color);
}

.modal-form-label .required {
  color: var(--danger-color);
  margin-left: 2px;
}

.modal-form-control {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-color);
  background-color: var(--input-bg);
  background-clip: padding-box;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.modal-form-control:focus {
  border-color: var(--primary-color);
  box-shadow: var(--input-focus-shadow);
}

/* Campos em linha */
.modal-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.modal-form-col {
  flex: 1;
  min-width: 0;
}

/* Radio buttons e checkboxes */
.modal-form-check-group {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.modal-form-check {
  display: flex;
  align-items: center;
}

.modal-form-check-input {
  margin-right: 8px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.modal-form-check-label {
  font-size: 0.95rem;
  cursor: pointer;
}

/* Botões de ação - VERSÃO ATUALIZADA COM MELHOR CONTRASTE */
.modal-footer {
  border-top: 1px solid var(--border-color);
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background-color: white;
}

/* Botão primário - Atualizado para melhor contraste no hover */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-primary:hover {
  background-color: var(--primary-darker);
  border-color: var(--primary-darker);
  color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.btn-primary:active {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
}

/* Botão secundário - Atualizado para melhor contraste no hover */
.btn-secondary {
  background-color: #f0f2f5;
  border: 1px solid var(--border-color);
  color: var(--secondary-color);
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-secondary:hover {
  background-color: #e4e6e9;
  border-color: #d0d4d9;
  color: var(--secondary-color);
}

.btn-secondary:active {
  background-color: #d8dade;
  border-color: #c8ccd2;
}

/* Botão de adicionar nos campos com seleção - Atualizado */
.modal-form-add-btn {
  background-color: #f0f2f5;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.modal-form-add-btn:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal-form-add-btn:active {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: none;
}

/* Campos com botão de adicionar */
.modal-form-with-button {
  display: flex;
  gap: 8px;
}

.modal-form-with-button .modal-form-control {
  flex: 1;
}

/* Textarea */
textarea.modal-form-control {
  min-height: 100px;
  resize: vertical;
}

/* Prefixo de moeda */
.modal-form-currency {
  position: relative;
}

.modal-form-currency .modal-form-control {
  padding-left: 30px;
}

.modal-form-currency::before {
  content: "R$";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Responsividade */
@media (max-width: 768px) {
  .modal-dialog {
    margin: 0.5rem;
  }
  
  .modal-form-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .modal-form-col {
    width: 100%;
  }
  
  .modal-form-check-group {
    flex-direction: column;
    gap: 8px;
  }
}
/* --- Oculta o campo 'Fatura' no modal de nova compra em telas mobile --- */

/* A regra @media só aplica os estilos internos se a condição for verdadeira */
@media (max-width: 767.98px) {
  
  /* Seleciona o div pelo ID que acabamos de criar */
  #campo-fatura-compra {
    display: none !important; /* Esconde o elemento e todo o seu espaço */
  }
  
}

/* Força o alinhamento horizontal dos botões no rodapé do modal de nova compra */
#modalNovaCompraCartao .modal-footer {
  display: flex; /* Ativa o Flexbox */
  gap: 0.5rem;   /* Adiciona um espaço entre os botões (equivale ao gap-2) */
}

#modalNovaCompraCartao .modal-footer .btn {
  flex-grow: 1; /* Faz com que cada botão cresça para ocupar o espaço disponível igualmente */
}


/* ======================================================= */
/* === BARRA DE RESUMO MOBILE (PÁGINA DE INVESTIMENTOS) === */
/* ======================================================= */

/* O contêiner de cada linha (ex: Patrimônio + Rendimentos) */
.mobile-summary-bar-investimentos {
    display: flex;
    justify-content: space-around;
    background-color: #FFFFFF;
    padding: 12px 8px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Cada item individual dentro da barra (ex: Patrimônio) */
.summary-item-investimentos {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1; /* Faz cada item ocupar 50% do espaço */
    padding: 0 5px;
}

/* O texto pequeno (ex: "Patrimônio Total") */
.summary-item-investimentos .label {
    font-size: 0.75rem;
    color: #6c757d; /* text-muted */
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 4px;
}

/* O valor principal (ex: "R$ 6.989,26") */
.summary-item-investimentos .value {
    font-size: 1.1rem; /* Tamanho de fonte destacado */
    font-weight: 700;
    line-height: 1.2;
}

/* Cores específicas para os valores */
.summary-item-investimentos .text-primary { color: #4361ee !important; }
.summary-item-investimentos .text-success { color: #2ecc71 !important; }
.summary-item-investimentos .text-danger { color: #e74c3c !important; }
.summary-item-investimentos .text-info { color: #7209b7 !important; }


/* ================================================== */
/* == ESTILOS PARA O MODAL DE UPGRADE E PAYWALL      == */
/* ================================================== */

/* Fundo com desfoque quando o modal está ativo */
.modal-backdrop.show {
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.3);
}

.upgrade-modal-content {
    border-radius: 1rem; /* 16px */
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 1.5rem; /* 24px */
}

.upgrade-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background-color: #eaf6f5; /* Um tom de verde bem claro */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upgrade-icon-wrapper .bi-gem {
    font-size: 2.5rem; /* 40px */
    color: #5EBFB7; /* Cor primária do seu app */
}

/* Em css/styles.css */

/* ================================================== */
/* == ESTILOS PARA O MODAL DE SELEÇÃO DE BANCOS    == */
/* ================================================== */

#modalNovaInstituicao .modal-body {
    background-color: #f8f9fa;
}

.card-banco {
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    height: 100%;
    background-color: #fff;
}

.card-banco:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.card-banco .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

.logo-banco {
    max-height: 45px;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 0.75rem;
}

.nome-banco {
    margin-bottom: 0;
    font-weight: 500;
    color: #343a40;
    font-size: 0.9rem;
    line-height: 1.3;
    text-align: center;
}

/* Em categorias.html, adicione este bloco ao final da sua tag <style> */

.nome-categoria-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Espaçamento entre o ícone de seta e o nome */
}

.nome-categoria-wrapper .tipo-icon {
    font-size: 0.9rem; /* Tamanho sutil para o ícone de seta */
}

#modalGerenciarCategorias .list-group {
    /* Define uma altura que acomoda aproximadamente 5-6 itens */
    max-height: 220px; 
    overflow-y: auto;
}

.list-group-item.item-global {
    color: #6c757d; /* Deixa o texto um pouco mais claro */
    background-color: #f8f9fa; /* Um fundo levemente acinzentado */
}

.list-group-item.item-global.active {
    /* Garante que mesmo ativo, ele mantenha uma aparência distinta */
    background-color: #e9ecef;
    border-color: #dee2e6;
}

/* ================================================== */
/* [NOVO] ESTILOS PARA O GRÁFICO DONUT INTERATIVO     */
/* ================================================== */

.donut-chart-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.donut-chart-info {
    position: absolute;
    text-align: center;
    pointer-events: none;
    
    /* ▼▼▼ ADIÇÕES PARA CORRIGIR O ALINHAMENTO ▼▼▼ */
    display: flex;             /* 1. Ativa o Flexbox */
    flex-direction: column;    /* 2. Empilha os itens na vertical */
    align-items: center;       /* 3. Centraliza os itens horizontalmente */
}


.donut-chart-info .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.2;
    transition: color 0.3s ease;
}

.donut-chart-info .label {
    font-size: 0.8rem;
    color: #6c757d;
    transition: opacity 0.3s ease;
}

/* ================================================== */
/* === ESTILOS PARA O SELETOR DE GRÁFICO (DONUT) === */
/* ================================================== */

/* ================================================== */
/* === ESTILOS PARA O GRÁFICO COM NAVEGAÇÃO (BULLETS) === */
/* ================================================== */

/* Remove os botões de toggle anteriores */
.chart-toggle-group {
    display: none;
}

/* Container que envolve os gráficos para posicionamento */
.chart-carousel-container {
    position: relative;
    height: 250px; /* Altura fixa para garantir alinhamento */
}

/* Wrapper de cada gráfico (controla visibilidade) */
.donut-chart-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.donut-chart-wrapper.active {
    opacity: 1;
    visibility: visible;
}

/* Informação central (valor e label) - CORREÇÃO DO ALINHAMENTO */
.donut-chart-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centralização perfeita */
    text-align: center;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Navegação por "bullets" */
.chart-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 1rem; /* Espaço acima dos bullets */
    flex-shrink: 0;
}

.chart-pagination .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #d1d5db; /* Cor do bullet inativo */
    cursor: pointer;
    transition: all 0.3s ease;
}

.chart-pagination .dot.active {
    background-color: #3b82f6; /* Cor do bullet ativo (azul) */
    transform: scale(1.25);
}
/* ================================================== */
/* === ESTILOS PARA O RADAR DE TRANSAÇÕES (MOBILE) === */
/* ================================================== */

/* Aplica estas regras apenas em telas mobile */
@media (max-width: 991.98px) {
    /* Oculta o layout de grid do desktop */
    .radar-grid-header, .radar-grid-row {
        display: none;
    }

    /* Estilo do card individual para cada transação */
    .radar-card-mobile {
        display: flex;
        align-items: center;
        gap: 1rem; /* Espaçamento entre ícone, info e valor */
        padding: 0.75rem 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .radar-card-mobile:last-child {
        border-bottom: none;
    }

    /* Contêiner do ícone */
    .radar-card-icon {
        flex-shrink: 0;
        font-size: 1.5rem; /* Tamanho do ícone */
    }

    /* Contêiner das informações (título e vencimento) */
    .radar-card-info {
        flex-grow: 1;
        min-width: 0; /* Essencial para o text-overflow funcionar */
    }

    /* Título da transação */
    .radar-card-title {
        display: block;
        font-weight: 500;
        color: #343a40;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Texto de vencimento */
    .radar-card-due {
        display: block;
        font-size: 0.8rem;
        font-weight: 500;
    }

    /* Cores para o texto de vencimento */
    .radar-card-due.vencido { color: var(--danger-color); }
    .radar-card-due.hoje { color: var(--warning-color); }
    .radar-card-due.futuro { color: #3498db; }

    /* Valor da transação */
    .radar-card-value {
        font-weight: 700;
        font-size: 1rem;
        white-space: nowrap;
    }
}

/* Adicione este código ao final do seu arquivo de estilos */

/* ============================================= */
/*  ESTILOS PARA O MODAL DE PREFERÊNCIAS         */
/* ============================================= */

/* Transforma o container da opção em um flex container */
.preference-item {
    display: flex;
    justify-content: space-between; /* Alinha o texto à esquerda e o switch à direita */
    align-items: flex-start; /* Alinha os itens no topo */
    gap: 1rem; /* Adiciona um espaço entre o texto e o switch */
}

/* Garante que a área do texto ocupe o espaço disponível */
.preference-item .preference-label {
    flex-grow: 1;
}

/* Ajusta o tamanho do switch para não encolher */
.preference-item .form-switch {
    flex-shrink: 0;
    padding-left: 0; /* Remove o padding padrão que causa desalinhamento */
}

/* Estilo para os wrappers dos gráficos de evolução */
.chart-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.chart-wrapper.active {
    opacity: 1;
    visibility: visible;
}