.detalhes-lista-scroll {
    max-width: 100%;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.detalhes-lista-scroll--alta {
    max-height: 180px;
}

.detalhes-lista-scroll--media {
    max-height: 150px;
}
.btn-fechar-mes {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--sobri-primary, #0d6efd) !important;
}

.btn-fechar-mes:hover,
.btn-fechar-mes:focus,
.btn-fechar-mes:active {
    background-color: #ffffff !important;
    border-color: #e9ecef !important;
    color: var(--sobri-primary, #0d6efd) !important;
}

.btn-fechar-mes:disabled,
.btn-fechar-mes.disabled {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #a1a5b7 !important;
    opacity: 1;
}

.periodo-nav-btn {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--cor-primaria, #0d6efd) !important;
    box-shadow: none !important;
}

.periodo-nav-btn:hover,
.periodo-nav-btn:focus,
.periodo-nav-btn:active {
    background-color: #f8f9fa !important;
    border-color: #ffffff !important;
    color: var(--cor-primaria, #0d6efd) !important;
}

.periodo-select-group {
    gap: 0;
}

.periodo-select-group .periodo-select {
    min-width: 80px;
    border-radius: 0;
    border-color: #dee2e6;
}

.periodo-select-group .periodo-select:first-child {
    border-top-left-radius: var(--borda-radius-sm, 0.25rem);
    border-bottom-left-radius: var(--borda-radius-sm, 0.25rem);
}

.periodo-select-group .periodo-select:last-child {
    border-top-right-radius: var(--borda-radius-sm, 0.25rem);
    border-bottom-right-radius: var(--borda-radius-sm, 0.25rem);
    border-left: 0;
}

.pagamento-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pagamento-info__linha {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pagamento-info__linha i {
    min-width: 16px;
}
/* ==========================================================================
   ESTILOS GLOBAIS PARA AS VIEWS
   ========================================================================== */

:root {
    /* ==========================================================================
   CORES DO SISTEMA FINANCEIRO
   ========================================================================== */
   
    /* Cores de marca */
    --cor-primaria: #2c3e50;       /* Azul escuro - para elementos principais */
    --cor-primaria-escuro: #1a2530; /* Tom mais escuro para texto */
    --cor-primaria-claro: #e8ecf0;  /* Tom mais claro para fundo */
    --cor-secundaria: #3498db;     /* Azul - para ações secundárias */
    --cor-secundaria-escuro: #1a6fb3; /* Tom mais escuro para texto */
    --cor-secundaria-claro: #e8f2fb;  /* Tom mais claro para fundo */
    --cor-terciaria: #95a5a6;      /* Cinza-azulado - para elementos terciários */
    --cor-terciaria-escuro: #6c7a7b;  /* Tom mais escuro para texto */
    --cor-terciaria-claro: #f0f3f4;  /* Tom mais claro para fundo */
    
    /* Cores funcionais */
    --cor-sucesso: #27ae60;        /* Verde - para confirmações e sucesso */
    --cor-sucesso-escuro: #1e8449;  /* Verde escuro para texto */
    --cor-sucesso-claro: #d5f5e3;  /* Verde claro para fundos de sucesso */
    --cor-sucesso-claro-2: #e8f8f0; /* Verde mais claro para fundos */
    
    --cor-aviso: #f39c12;          /* Laranja - para alertas e avisos */
    --cor-aviso-escuro: #b3710e;    /* Laranja escuro para texto */
    --cor-aviso-claro: #fef5e7;    /* Laranja claro para fundos de aviso */
    --cor-aviso-claro-2: #fef9ec;   /* Laranja mais claro para fundos */
    
    --cor-perigo: #e74c3c;         /* Vermelho - para erros e ações destrutivas */
    --cor-perigo-escuro: #b03a2e;   /* Vermelho escuro para texto */
    --cor-perigo-claro: #fadbd8;   /* Vermelho claro para fundos de erro */
    --cor-perigo-claro-2: #fde8e7;  /* Vermelho mais claro para fundos */
    
    --cor-info: #3498db;           /* Azul - para informações */
    --cor-info-escuro: #1a6fb3;     /* Azul escuro para texto */
    --cor-info-claro: #ebf5fb;     /* Azul claro para fundos informativos */
    --cor-info-claro-2: #f2f8fd;    /* Azul mais claro para fundos */
    
    /* Cores de dados */
    --cor-receita: #2ecc71;        /* Verde - para receitas */
    --cor-despesa: #e74c3c;        /* Vermelho - para despesas */
    --cor-investimento: #9b59b6;   /* Roxo - para investimentos */
    --cor-saldo: #3498db;          /* Azul - para saldo e disponível */
    --cor-meta: #f1c40f;           /* Amarelo - para metas e objetivos */
    
    /* Escala de cinza */
    --cinza-50: #f9fafb;           /* Fundo claro */
    --cinza-100: #f3f4f6;          /* Fundo de cards e seções */
    --cinza-200: #e5e7eb;          /* Bordas e divisores */
    --cinza-300: #d1d5db;          /* Bordas de hover */
    --cinza-400: #9ca3af;          /* Texto secundário */
    --cinza-500: #6b7280;          /* Texto de corpo */
    --cinza-600: #4b5563;          /* Títulos e texto principal */
    --cinza-700: #374151;          /* Títulos escuros */
    --cinza-800: #1f2937;          /* Texto em fundo claro */
    --cinza-900: #111827;          /* Texto principal */
    
    /* Cores de estado */
    --cor-foco: #3b82f6;           /* Azul - para foco e seleção */
    --cor-link: #2563eb;           /* Azul - para links */
    --cor-link-hover: #1d4ed8;     /* Azul escuro - para hover de links */
    --cor-destaque: #f59e0b;       /* Amarelo - para destaques e destaques */
    
    /* Cores de fundo */
    --fundo-pagina: #f9fafb;       /* Cor de fundo da página */
    --fundo-card: #ffffff;         /* Cor de fundo de cards */
    --fundo-hover: #f3f4f6;        /* Cor de fundo ao passar o mouse */
    
    /* Sombras */
    --sombra-padrao: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --sombra-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    
    /* Bordas */
    --borda-radius: 0.375rem;
    --borda-radius-sm: 0.25rem;
    --borda-radius-lg: 0.5rem;
    
    /* Transições */
    --transicao-rapida: all 0.15s ease-in-out;
    --transicao-padrao: all 0.3s ease-in-out;
}

/* Conversa de mensagens */
.chat-timeline {
    max-height: 450px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.chat-entry {
    margin-bottom: 1.5rem;
}

.chat-entry:last-child {
    margin-bottom: 0;
}

.chat-attachment {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-entry-admin .chat-attachment {
    background: rgba(255, 255, 255, 0.2);
}

.chat-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.chat-bubble {
    position: relative;
    padding: 1rem;
    border-radius: 1rem;
    background-color: #f1f3f5;
    color: #212529;
}

.chat-entry-admin .chat-bubble {
    background-color: #198754;
    color: #fff;
}

.chat-entry-admin .chat-bubble::after {
    border-top-color: #198754;
}

.chat-entry-user .chat-bubble::after {
    border-top-color: #f1f3f5;
}

.chat-bubble::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 32px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent;
}

@media (max-width: 991.98px) {
    .chat-timeline {
        max-height: 380px;
    }
}

/* ==========================================================================
   PÁGINAS DE AUTENTICAÇÃO
   ========================================================================== */
.login-page {
    background: radial-gradient(ellipse at top left, var(--cor-primaria-claro, #e8ecf0) 0%, #f8fafc 40%),
                linear-gradient(135deg, var(--cor-secundaria-claro, #e8f2fb) 0%, #ffffff 100%);
    background-attachment: fixed;
}

.login-page .login-card {
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 50px rgba(16, 24, 40, 0.12);
}

.login-page .btn-gradient {
    background: linear-gradient(135deg, var(--cor-secundaria, #3498db), #1d4ed8);
    border: 0;
    color: #fff;
}

.login-page .btn-gradient:hover,
.login-page .btn-gradient:focus {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    color: #fff;
}

.login-page .login-logo {
    height: 64px;
    width: auto;
}

.login-page .login-subtitle {
    color: #6b7280;
}

.login-page .remember-row a {
    color: var(--cor-link, #2563eb);
}

.login-page .remember-row a:hover {
    color: var(--cor-link-hover, #1d4ed8);
    text-decoration: underline;
}

.login-page.page-fila-cadastro {
    background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1), rgba(14, 165, 233, 0.05)),
                linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(255, 255, 255, 0.9) 55%),
                #f8fafc;
    background-attachment: fixed;
}

.page-fila-cadastro .login-card {
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.page-fila-cadastro .login-header .h4,
.page-fila-cadastro .login-header .h3 {
    font-weight: 700;
    color: #0f172a;
}

.page-fila-cadastro .login-logo {
    height: 64px;
    width: auto;
}

.page-fila-cadastro .login-subtitle {
    color: #475569;
    letter-spacing: 0.02em;
}

.page-fila-cadastro .btn-gradient {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border: 0;
    color: #fff;
    transition: all .2s ease;
}

.page-fila-cadastro .btn-gradient:hover,
.page-fila-cadastro .btn-gradient:focus {
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
    color: #fff;
    transform: translateY(-1px);
}

.page-fila-cadastro .form-label {
    font-weight: 600;
    color: #0f172a;
}

.page-fila-cadastro .form-section-title {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: #2563eb;
    font-weight: 600;
}

.page-fila-cadastro .input-group-text {
    background-color: #f8fafc;
    border-right: 0;
}

.page-fila-cadastro .input-group .form-control {
    border-left: 0;
}

.page-fila-cadastro .termo-box {
    max-height: 160px;
    overflow-y: auto;
    background: #f8fafc;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

/* App header custom theme */
.app-header {
    background: linear-gradient(90deg, var(--header-bg, #2E4A62), var(--header-bg-2, #3B6D8C));
    color: var(--header-text, #ffffff);
    box-shadow: 0 2px 6px var(--header-shadow, rgba(0,0,0,0.2));
}

.app-header .navbar-brand,
.app-header .nav-link,
.app-header #financial-tips,
.app-header .dropdown-toggle {
    color: var(--header-text, #ffffff) !important;
}

.app-header .dropdown-menu {
    border-color: rgba(255,255,255,0.12);
}

.app-header .btn,
.app-header .navbar-toggler {
    color: var(--header-text, #ffffff);
    border-color: rgba(255,255,255,0.25);
}

.app-header .navbar-toggler-icon {
    filter: invert(100%);
}

/* Force header icons and caret to white */
/* Do not force icon colors; allow contextual classes (e.g., text-warning) */

.app-header .dropdown-toggle::after {
    border-top-color: var(--header-text, #ffffff);
}

/* Ensure username, icon, and any nested elements in the user dropdown link are white */
.app-header .dropdown .nav-link {
    color: var(--header-text, #ffffff) !important;
}
/* Keep text elements white but don't override icons' own colors */
.app-header .dropdown .nav-link span,
.app-header .dropdown .nav-link strong,
.app-header .dropdown .nav-link small {
    color: var(--header-text, #ffffff) !important;
}

/* Keep white on hover/focus/active */
.app-header .dropdown .nav-link:hover,
.app-header .dropdown .nav-link:focus,
.app-header .dropdown .nav-link:active {
    color: var(--header-text, #ffffff) !important;
}

/* Ensure the badge text beside the username is white in header */
.app-header .badge {
    color: var(--header-text, #ffffff) !important;
}

/* Remove white hover strip on header links/toggles */
.app-header .nav-link:hover,
.app-header .nav-link:focus,
.app-header .nav-link:active,
.app-header .navbar-toggler:hover,
.app-header .navbar-toggler:focus,
.app-header .navbar-toggler:active {
    color: var(--header-text, #ffffff) !important;
}

/* Seletores "Itens por página" reutilizados em listagens */
.itens-por-pagina-select.form-select {
    width: auto;
    min-width: 140px;
    display: inline-block;
}

.select-width-100 {
    width: 100px !important;
}

.help-tip-illustration {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 120px;
    max-width: 30%;
    pointer-events: none;
    object-fit: contain;
}

.cartao-card,
.cartao-credito-card {
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.cartao-card:hover,
.cartao-credito-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cartao-card:active,
.cartao-credito-card:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cartao-card.border-primary.bg-primary,
.cartao-credito-card.border-info.bg-info {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.4) !important;
    transform: translateY(-1px);
}

.cartao-card.border-primary.bg-primary:hover {
    background-color: #0b5ed7 !important;
    box-shadow: 0 6px 16px rgba(13, 110, 253, 0.5) !important;
    transform: translateY(-2px);
}

.min-w-120 {
    min-width: 120px;
}

#modalImportarFatura .modal-dialog {
    max-width: 95vw;
}

#modalImportarFatura .modal-content {
    height: 90vh;
}

#modalImportarFatura .modal-body {
    overflow-y: auto;
}

#modalImportarFatura .table-responsive {
    overflow-x: auto;
}

#modalImportarFatura #tabelaItensFatura {
    table-layout: auto;
    width: 100%;
}

#modalImportarFatura #tabelaItensFatura th,
#modalImportarFatura #tabelaItensFatura td {
    vertical-align: middle;
}

#modalImportarFatura #tabelaItensFatura th:nth-child(2),
#modalImportarFatura #tabelaItensFatura td:nth-child(2) {
    white-space: normal;
    word-break: break-word;
}

.viagem-planejamento-col-categoria {
    width: 50%;
}

.viagem-planejamento-col-valor {
    width: 30%;
}

.viagem-planejamento-col-acoes {
    width: 20%;
}

/* Utilitários específicos para Versão do Sistema */
.text-truncate-320 {
    display: block;
    max-width: 320px;
}

.modal-versao-body {
    max-height: 75vh;
    overflow: auto;
}

.versao-descricao-editor {
    min-height: 140px;
    max-height: 220px;
    overflow: auto;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

/* ==========================================================================
   Notificações
   ========================================================================== */
.notificacao-text-clip-320 {
    max-width: 320px;
}

.notificacao-html-content {
    max-width: 900px;
    overflow-wrap: anywhere;
}

.notificacao-quill-editor {
    min-height: 200px;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

/* Header theme colors */
:root {
    --header-bg: #2E4A62; /* Slate Blue-Gray */
    --header-bg-2: #3B6D8C; /* subtle gradient end */
    --header-text: #ffffff;
    --header-shadow: rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   ELEMENTOS BASE
   ========================================================================== */

/* Reset e estilos base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   ELEMENTOS BASE
   ========================================================================== */

/* Reset e estilos base */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--cinza-900);
    background-color: var(--fundo-pagina);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================*/
/*   MODO AJUDA - DICAS NAS VIEWS (NÃO NOS MODAIS)                           */
/* ==========================================================================*/

/* Blocos de dica ficam ocultos por padrão */
.help-tip {
    display: none;
}

/* Quando o modo ajuda está ativo no body, exibe as dicas nas views */
body.help-mode-on .help-tip {
    display: block;
}

/* Nunca exibir dicas dentro de modais, mesmo com modo ajuda ativo */
.modal .help-tip,
body.help-mode-on .modal .help-tip {
    display: none !important;
}

/* Estilo base para blocos de dica em página */
.help-tip-page {
    border-left: 4px solid var(--cor-info);
    background-color: var(--cor-info-claro-2);
    color: var(--cinza-800);
    border-radius: var(--borda-radius);
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.help-tip-page .help-tip-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--cor-info-escuro);
}

.help-tip-page .help-tip-section-title {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.5rem;
    margin-bottom: 0.15rem;
    color: var(--cinza-700);
}

.help-tip-conta-body {
    padding-right: 150px;
    padding-bottom: 60px;
}

.help-tip-conta-illustration {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 120px;
    max-width: 30%;
    pointer-events: none;
    object-fit: contain;
}

.help-tip-page-body {
    padding-right: 150px;
    padding-bottom: 60px;
}

.help-tip-illustration {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 120px;
    max-width: 30%;
    pointer-events: none;
    object-fit: contain;
}

.help-tip-page p {
    margin-bottom: 0.35rem;
}

.help-tip-page ul {
    margin-bottom: 0.35rem;
    padding-left: 1rem;
}

/* Meta Investimento utilities */
/* Estados visuais reutilizáveis para itens inativos */
.linha-inativa > *:not(.acoes-ativas) {
    position: relative;
    opacity: 0.55;
    filter: saturate(55%);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.linha-inativa:hover > *:not(.acoes-ativas),
.linha-inativa:focus-within > *:not(.acoes-ativas) {
    opacity: 0.7;
    filter: saturate(70%);
}

.card-inativo {
    position: relative;
}

.card-inativo > *:not(.acoes-ativas) {
    opacity: 0.55;
    filter: saturate(55%);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.card-inativo:hover > *:not(.acoes-ativas),
.card-inativo:focus-within > *:not(.acoes-ativas) {
    opacity: 0.7;
    filter: saturate(70%);
}

.acoes-ativas {
    opacity: 1 !important;
    filter: none !important;
}

.meta-progress-lg {
    height: 20px;
}

.meta-progress-sm {
    height: 8px;
}

.progress-height-10 {
    height: 10px;
}

.meta-scroll-area {
    max-height: 260px;
    overflow-y: auto;
}

.meta-alert-dot {
    font-size: 0.55rem;
    line-height: 1;
}

.meta-sugestoes-card {
    position: relative;
    overflow: hidden;
}

.meta-sugestoes-card .card-body {
    position: relative;
    padding-right: 140px;
}

.meta-sugestoes-card .sobri-illustration {
    position: absolute;
    right: 12px;
    bottom: 8px;
    width: 110px;
    max-width: 28%;
    pointer-events: none;
    object-fit: contain;
    opacity: 0.85;
}

@media (max-width: 768px) {
    .meta-sugestoes-card .card-body {
        padding-right: 1.5rem;
    }

    .meta-sugestoes-card .sobri-illustration {
        position: static;
        display: block;
        margin: 1rem auto 0;
        width: 150px;
        max-width: 60%;
        opacity: 1;
    }
}

.help-tip-page i.fa-circle-question {
    color: var(--cor-info-escuro);
}

/* Ajustes específicos da view de cartões */
.cartao-help-tip-body,
.listagem-help-tip-body {
    padding-right: 150px;
    padding-bottom: 60px;
}

.cartao-help-tip-illustration,
.cartaomensagem-help-tip-illustration {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 120px;
    max-width: 30%;
    pointer-events: none;
    object-fit: contain;
}

.cartao-wizard-alert {
    min-height: 130px;
}

.wizard-alert {
    min-height: 130px;
}

.wizard-illustration {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 110px;
    max-width: 28%;
    opacity: 0.9;
    pointer-events: none;
    object-fit: contain;
}

.cartao-wizard-illustration,
.cartaomensagem-help-tip-illustration {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 110px;
    max-width: 28%;
    opacity: 0.9;
    pointer-events: none;
    object-fit: contain;
}

.conta-wizard-alert {
    min-height: 130px;
}

.conta-wizard-illustration {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 110px;
    max-width: 28%;
    opacity: 0.9;
    pointer-events: none;
    object-fit: contain;
}

.conta-acoes-col {
    width: 200px;
}

.conta-cartao-badge {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conta-itens-por-pagina {
    width: 100px;
}

@media (max-width: 992px) {
    .cartao-help-tip-body,
    .listagem-help-tip-body {
        padding-right: 0;
        padding-bottom: 1.5rem;
    }

    .cartao-help-tip-illustration,
    .cartao-wizard-illustration,
    .cartaomensagem-help-tip-illustration {
        position: static;
        width: 100px;
        margin-top: 1rem;
    }

    .help-tip-page-body {
        padding-right: 0;
        padding-bottom: 1.5rem;
    }

    .help-tip-illustration,
    .wizard-illustration {
        position: static;
        width: 100px;
        margin-top: 1rem;
    }
}

.cartao-conta-field {
    display: none;
}

.itens-por-pagina-select.form-select {
    width: auto;
    min-width: 140px;
    display: inline-block;
}

/* Links */
/* ==========================================================================
   LOGS DO SISTEMA
   ========================================================================== */

.log-table tbody tr.log-row-insert {
    background-color: rgba(39, 174, 96, 0.18);
}

.log-table tbody tr.log-row-update {
    background-color: rgba(52, 152, 219, 0.18);
}

.log-table tbody tr.log-row-delete {
    background-color: rgba(231, 76, 60, 0.18);
}

.log-table tbody tr.log-row-insert:hover,
.log-table tbody tr.log-row-update:hover,
.log-table tbody tr.log-row-delete:hover {
    filter: brightness(0.98);
}
a {
    color: var(--cor-link);
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

a:hover {
    color: var(--cor-link-hover);
    text-decoration: underline;
}

/* Cabeçalhos */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cinza-800);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* Parágrafos */
p {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--cinza-700);
}

/* Listas */
ul, ol {
    padding-left: 2rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Código e pré-formatado */
code, kbd, pre, samp {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875em;
    background-color: var(--cinza-100);
    padding: 0.2em 0.4em;
    border-radius: var(--borda-radius-sm);
}

pre {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    padding: 1rem;
    border-radius: var(--borda-radius);
    background-color: var(--cinza-100);
}

/* Imagens responsivas */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* ==========================================================================
   COMPONENTES
   ========================================================================== */

/* ==========================================================================
   BOTÕES
   ========================================================================== */

/* Botão de status de pagamento */
.btn-pagamento {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.2em;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-pagamento.pago {
    color: var(--cor-sucesso);
}

.btn-pagamento.pago:hover {
    background-color: var(--cor-sucesso-claro);
}

.btn-pagamento:not(.pago) {
    color: var(--cor-secundaria);
}

.btn-pagamento:not(.pago):hover {
    background-color: var(--cor-secundaria-claro);
}

.btn-pagamento:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Ícone de status de pagamento */
.status-pagamento {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 5px;
}

.status-pagamento.pago {
    background-color: var(--cor-sucesso-claro);
    color: var(--cor-sucesso);
}

.status-pagamento:not(.pago) {
    background-color: var(--cor-secundaria-claro);
    color: var(--cor-secundaria);
}

/* Classe base para botões */
.btn {
    --btn-padding-y: 0.5rem;
    --btn-padding-x: 1rem;
    --btn-font-size: 0.875rem;
    --btn-line-height: 1.5;
    --btn-border-radius: var(--borda-radius);
    --btn-bg: transparent;
    --btn-color: var(--cinza-700);
    --btn-border-color: var(--cinza-300);
    --btn-hover-bg: var(--cinza-100);
    --btn-hover-color: var(--cinza-900);
    --btn-hover-border-color: var(--cinza-400);
    --btn-active-bg: var(--cinza-200);
    --btn-active-color: var(--cinza-900);
    --btn-active-border-color: var(--cinza-500);
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-size: var(--btn-font-size);
    font-weight: 500;
    line-height: var(--btn-line-height);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--btn-border-color);
    border-radius: var(--btn-border-radius);
    background-color: var(--btn-bg);
    color: var(--btn-color);
    transition: all 0.2s ease-in-out;
}

/* Estados do botão */
.btn:hover {
    background-color: var(--btn-hover-bg);
    color: var(--btn-hover-color);
    border-color: var(--btn-hover-border-color);
    text-decoration: none;
}

.btn:active,
.btn.active {
    background-color: var(--btn-active-bg);
    color: var(--btn-active-color);
    border-color: var(--btn-active-border-color);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.65;
    pointer-events: none;
}

/* Tamanhos de botão */
.btn-sm {
    --btn-padding-y: 0.25rem;
    --btn-padding-x: 0.5rem;
    --btn-font-size: 0.75rem;
    --btn-line-height: 1.5;
    --btn-border-radius: 0.2rem;
}

.btn-lg {
    --btn-padding-y: 0.625rem;
    --btn-padding-x: 1.25rem;
    --btn-font-size: 1rem;
    --btn-line-height: 1.5;
}

/* Variantes de botão */
.btn-primary {
    --btn-bg: var(--cor-primaria);
    --btn-color: white;
    --btn-border-color: var(--cor-primaria);
    --btn-hover-bg: #1a2b3c;
    --btn-hover-color: white;
    --btn-hover-border-color: #1a2b3c;
    --btn-active-bg: #0d1a26;
    --btn-active-color: white;
    --btn-active-border-color: #0d1a26;
}

.btn-secondary {
    --btn-bg: var(--cor-secundaria);
    --btn-color: white;
    --btn-border-color: var(--cor-secundaria);
    --btn-hover-bg: #2980b9;
    --btn-hover-color: white;
    --btn-hover-border-color: #2980b9;
}

/* Botões de ação financeira */
.btn-receita {
    --btn-bg: var(--cor-receita);
    --btn-color: white;
    --btn-border-color: var(--cor-receita);
    --btn-hover-bg: #27a16d;
    --btn-hover-border-color: #27a16d;
}

.btn-despesa {
    --btn-bg: var(--cor-despesa);
    --btn-color: white;
    --btn-border-color: var(--cor-despesa);
    --btn-hover-bg: #d62c1a;
    --btn-hover-border-color: #d62c1a;
}

.btn-investimento {
    --btn-bg: var(--cor-investimento);
    --btn-color: white;
    --btn-border-color: var(--cor-investimento);
    --btn-hover-bg: #8e44ad;
    --btn-hover-border-color: #8e44ad;
}

/* Botões de estado */
.btn-success {
    --btn-bg: var(--cor-sucesso);
    --btn-color: white;
    --btn-border-color: var(--cor-sucesso);
    --btn-hover-bg: #219653;
    --btn-hover-border-color: #219653;
}

.btn-warning {
    --btn-bg: var(--cor-aviso);
    --btn-color: var(--cinza-900);
    --btn-border-color: var(--cor-aviso);
    --btn-hover-bg: #e67e22;
    --btn-hover-border-color: #e67e22;
}

.btn-danger {
    --btn-bg: var(--cor-perigo);
    --btn-color: white;
    --btn-border-color: var(--cor-perigo);
    --btn-hover-bg: #d62c1a;
    --btn-hover-border-color: #d62c1a;
}

.btn-info {
    --btn-bg: var(--cor-info);
    --btn-color: white;
    --btn-border-color: var(--cor-info);
    --btn-hover-bg: #2980b9;
    --btn-hover-border-color: #2980b9;
}

/* Botões outline */
.btn-outline-primary {
    --btn-bg: transparent;
    --btn-color: var(--cor-primaria);
    --btn-border-color: var(--cor-primaria);
    --btn-hover-bg: var(--cor-primaria);
    --btn-hover-color: white;
    --btn-hover-border-color: var(--cor-primaria);
}

/* Botões com ícones */
.btn i {
    font-size: 1em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn .bi {
    font-size: 1.1em;
}

/* Botão de alternar senha */
.btn-toggle-password {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
    min-width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cinza-100);
    color: var(--cinza-600);
    border-color: var(--cinza-300);
}

.btn-toggle-password:hover {
    background-color: var(--cinza-200);
    border-color: var(--cinza-400);
    color: var(--cinza-800);
}

/* Botão de novo item */
.btn-novo-item {
    margin-right: 0.5rem;
}

/* Grupo de botões */
.btn-group {
    display: inline-flex;
    vertical-align: middle;
}

.btn-group .btn {
    position: relative;
    flex: 1 1 auto;
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-top-left-radius: var(--borda-radius);
    border-bottom-left-radius: var(--borda-radius);
}

.btn-group .btn:last-child {
    border-top-right-radius: var(--borda-radius);
    border-bottom-right-radius: var(--borda-radius);
}

.btn-group .btn + .btn {
    margin-left: -1px;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-pointer:hover {
    opacity: 0.9;
}

/* Campos somente leitura usados em formulários (ex: planejamento) */
.readonly-field {
    cursor: not-allowed;
}

/* Utilidades específicas do relatório financeiro */
.relatorio .bg-light {
    transition: background-color 0.2s ease;
}

.relatorio .bg-light:hover {
    background-color: #f0f0f0 !important;
}

.relatorio .card {
    overflow: hidden;
}

.relatorio .expense-link {
    color: #0d6efd;
    text-decoration: none;
}

.relatorio .expense-link:hover {
    text-decoration: underline;
}

.relatorio-filtro-form {
    align-items: flex-end;
}

.relatorio-filtro-field {
    min-width: 160px;
}

.relatorio-filtro-field label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.relatorio-filtro-nav {
    min-width: 40px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.relatorio-filtro-nav-group {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

.relatorio-filtro-historico {
    white-space: nowrap;
}

.relatorio-filtro-field--mes {
    min-width: 200px;
}

.relatorio-filtro-field--ano {
    min-width: 140px;
}

.relatorio-resumo-card {
    width: 100%;
    gap: 0.5rem;
}

.relatorio-resumo-card-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.relatorio-resumo-card-values {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .relatorio-filtro-form {
        width: 100%;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .relatorio-filtro-form .relatorio-filtro-nav-group {
        order: 1;
        flex: 0 0 auto;
        gap: 0.35rem;
    }

    .relatorio-filtro-field {
        flex: 1 1 calc(50% - 0.75rem);
        min-width: 0;
    }

    .relatorio-filtro-field select {
        font-size: 0.85rem;
    }

    .relatorio-filtro-field--mes,
    .relatorio-filtro-field--ano {
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .relatorio-filtro-form {
        gap: 0.5rem;
        align-items: center;
    }

    .relatorio-filtro-form .relatorio-filtro-nav {
        min-width: 36px;
        height: 32px;
        font-size: 0.85rem;
    }

    .relatorio-filtro-form .relatorio-filtro-nav-group {
        flex: 0 0 auto;
        gap: 0.3rem;
    }

    .relatorio-filtro-field {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0;
    }

    .relatorio-resumo-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .relatorio-resumo-card-values {
        text-align: left !important;
    }

    .relatorio-filtro-form .btn-primary {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .relatorio-filtro-form .relatorio-filtro-nav-group {
        gap: 0.25rem;
    }

    .relatorio-filtro-field {
        flex: 1 1 calc(50% - 0.35rem);
    }

    .relatorio-filtro-form {
        gap: 0.35rem;
    }

    .relatorio-resumo-card-label {
        font-size: 0.8rem;
    }
}

/* Botões de ação em tabelas */
.table .btn-action {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

/* Botão de ícone puro */
.btn-icon {
    --btn-padding-y: 0.375rem;
    --btn-padding-x: 0.375rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.btn-icon.btn-sm {
    width: 1.75rem;
    height: 1.75rem;
}

.btn-icon.btn-lg {
    width: 2.5rem;
    height: 2.5rem;
}

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

.card {
    --card-bg: var(--fundo-card);
    --card-border-color: var(--cinza-200);
    --card-cap-bg: var(--cinza-50);
    --card-text: var(--cinza-800);
    --card-title: var(--cinza-900);
    --card-subtitle: var(--cinza-600);
    
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--card-bg);
    background-clip: border-box;
    border: 1px solid var(--card-border-color);
    border-radius: var(--borda-radius);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    color: var(--card-text);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* Card Header */
.card-header {
    padding: 1rem 1.25rem;
    margin-bottom: 0;
    background-color: var(--card-cap-bg);
    border-bottom: 1px solid var(--card-border-color);
    font-weight: 600;
    color: var(--card-title);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.card-header:first-child {
    border-radius: calc(var(--borda-radius) - 1px) calc(var(--borda-radius) - 1px) 0 0;
}

/* Card Body */
.card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
}

/* Card Footer */
.card-footer {
    padding: 0.75rem 1.25rem;
    background-color: var(--card-cap-bg);
    border-top: 1px solid var(--card-border-color);
}

.card-footer:last-child {
    border-radius: 0 0 calc(var(--borda-radius) - 1px) calc(var(--borda-radius) - 1px);
}

/* Card Title */
.card-title {
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--card-title);
}

/* Card Subtitle */
.card-subtitle {
    margin-top: -0.375rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--card-subtitle);
    font-weight: 500;
}

/* Card Text */
.card-text:last-child {
    margin-bottom: 0;
    color: var(--card-text);
}

/* Card Links */
.card-link {
    color: var(--cor-link);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.card-link:hover {
    color: var(--cor-link-hover);
    text-decoration: underline;
}

.card-link + .card-link {
    margin-left: 1.25rem;
}

/* Card Header Tabs */
.card-header-tabs {
    margin-right: -0.625rem;
    margin-bottom: -0.75rem;
    margin-left: -0.625rem;
    border-bottom: 0;
}

/* Card Header Pills */
.card-header-pills {
    margin-right: -0.625rem;
    margin-left: -0.625rem;
}

/* Card Img Overlay */
.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.5rem;
    border-radius: calc(var(--borda-radius) - 1px);
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
}

.card-img-overlay .card-title,
.card-img-overlay .card-text {
    color: white;
}

/* Card Img */
.card-img,
.card-img-top,
.card-img-bottom {
    width: 100%;
    object-fit: cover;
}

.card-img,
.card-img-top {
    border-top-left-radius: calc(var(--borda-radius) - 1px);
    border-top-right-radius: calc(var(--borda-radius) - 1px);
}

.card-img,
.card-img-bottom {
    border-bottom-right-radius: calc(var(--borda-radius) - 1px);
    border-bottom-left-radius: calc(var(--borda-radius) - 1px);
}

/* Card Groups */
.card-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card-group > .card {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .card-group {
        flex-flow: row wrap;
        margin-right: -0.75rem;
        margin-left: -0.75rem;
    }
    
    .card-group > .card {
        flex: 1 0 0%;
        margin-right: 0.75rem;
        margin-left: 0.75rem;
    }
}

/* Card Variants */
.card-primary {
    --card-bg: var(--cor-primaria);
    --card-border-color: var(--cor-primaria);
    --card-cap-bg: rgba(255, 255, 255, 0.1);
    --card-text: white;
    --card-title: white;
    --card-subtitle: rgba(255, 255, 255, 0.8);
}

.card-success {
    --card-bg: var(--cor-sucesso-claro);
    --card-border-color: var(--cor-sucesso);
    --card-cap-bg: var(--cor-sucesso-claro);
    --card-title: var(--cor-sucesso-escuro);
    --card-subtitle: var(--cinza-700);
}

.card-warning {
    --card-bg: var(--cor-aviso-claro);
    --card-border-color: var(--cor-aviso);
    --card-cap-bg: var(--cor-aviso-claro);
    --card-title: var(--cor-aviso-escuro);
    --card-subtitle: var(--cinza-700);
}

.card-danger {
    --card-bg: var(--cor-perigo-claro);
    --card-border-color: var(--cor-perigo);
    --card-cap-bg: var(--cor-perigo-claro);
    --card-title: var(--cor-perigo-escuro);
    --card-subtitle: var(--cinza-700);
}

.card-info {
    --card-bg: var(--cor-info-claro);
    --card-border-color: var(--cor-info);
    --card-cap-bg: var(--cor-info-claro);
    --card-title: var(--cor-info-escuro);
    --card-subtitle: var(--cinza-700);
}

/* Card with Shadow */
.card-shadow {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.card-shadow:hover {
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
}

/* Card Hover Effects */
.card-hover-zoom {
    overflow: hidden;
}

.card-hover-zoom .card-img {
    transition: transform 0.3s ease;
}

.card-hover-zoom:hover .card-img {
    transform: scale(1.05);
}

/* Card Stats */
.card-stat {
    text-align: center;
    padding: 1.5rem 1rem;
}

.card-stat .stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.25rem;
    color: var(--card-title);
}

.card-stat .stat-label {
    font-size: 0.875rem;
    color: var(--card-subtitle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-stat .stat-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--cor-primaria);
}

/* Card with Chart */
.card-chart {
    position: relative;
}

.card-chart .card-header {
    border-bottom: none;
    padding-bottom: 0;
}

.card-chart .chart-container {
    position: relative;
    height: 200px;
    margin: 0 -1.25rem -1.25rem;
}

/* Card with Tabs */
.card-tabs {
    border: none;
}

.card-tabs .card-header {
    background: none;
    border-bottom: 1px solid var(--cinza-200);
    padding: 0;
}

.card-tabs .nav-tabs {
    border-bottom: none;
    margin-bottom: -1px;
}

.card-tabs .nav-link {
    padding: 1rem 1.25rem;
    border: none;
    color: var(--cinza-600);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.card-tabs .nav-link:hover {
    color: var(--cor-primaria);
    border-bottom-color: var(--cinza-300);
}

.card-tabs .nav-link.active {
    color: var(--cor-primaria);
    background: none;
    border-bottom: 2px solid var(--cor-primaria);
}

/* Card with Action */
.card-action {
    position: relative;
}

.card-action .card-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.card-action:hover .card-actions {
    opacity: 1;
}

/* Card with Progress */
.card-progress {
    position: relative;
    overflow: hidden;
}

.card-progress .progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    border-radius: 0;
}

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

/* Card with Status */
.card-status {
    position: relative;
}

.card-status::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-top-left-radius: var(--borda-radius);
    border-bottom-left-radius: var(--borda-radius);
    background: var(--cinza-300);
}

.card-status-primary::after { background: var(--cor-primaria); }
.card-status-success::after { background: var(--cor-sucesso); }
.card-status-warning::after { background: var(--cor-aviso); }
.card-status-danger::after { background: var(--cor-perigo); }
.card-status-info::after { background: var(--cor-info); }

/* ==========================================================================
   FORMULÁRIOS
   ========================================================================== */

/* Elementos de formulário base */
.form-control,
.form-select,
.form-check-input,
.form-range {
    --form-control-bg: var(--fundo-card);
    --form-control-border: var(--cinza-300);
    --form-control-text: var(--cinza-800);
    --form-control-focus: var(--cor-foco);
    --form-control-disabled: var(--cinza-200);
    --form-control-placeholder: var(--cinza-500);
    --form-control-invalid: var(--cor-perigo);
    --form-control-valid: var(--cor-sucesso);
}

/* Labels */
label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--cinza-800);
}

/* Inputs e selects */
.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--form-control-text);
    background-color: var(--form-control-bg);
    background-clip: padding-box;
    border: 1px solid var(--form-control-border);
    border-radius: var(--borda-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Foco nos inputs */
.form-control:focus,
.form-select:focus {
    color: var(--cinza-900);
    background-color: var(--form-control-bg);
    border-color: var(--form-control-focus);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(41, 98, 255, 0.15);
}

/* Placeholder */
.form-control::placeholder {
    color: var(--form-control-placeholder);
    opacity: 1;
}

/* Inputs desabilitados e somente leitura */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.form-select[readonly] {
    background-color: var(--form-control-disabled);
    opacity: 1;
}

/* Texto de ajuda */
.form-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--cinza-600);
}

/* Validação de formulário */
.valid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--form-control-valid);
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--form-control-invalid);
}

.was-validated :valid ~ .valid-feedback,
.is-valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-tooltip {
    display: block;
}

.was-validated :invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-tooltip {
    display: block;
}

/* Inputs com ícones */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group > .form-control,
.input-group > .form-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--cinza-700);
    text-align: center;
    white-space: nowrap;
    background-color: var(--cinza-100);
    border: 1px solid var(--cinza-300);
    border-radius: var(--borda-radius);
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Tamanhos de formulário */
.form-control-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select {
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    border-radius: 0.2rem;
}

.form-control-lg,
.input-group-lg > .form-control,
.input-group-lg > .form-select {
    min-height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.125rem;
    border-radius: 0.3rem;
}

/* Select personalizado */
.form-select {
    padding-right: 2.25rem;
    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='%234b5563' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* Checkbox e Radio */
.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: 0.125rem;
}

.form-check .form-check-input {
    float: left;
    margin-left: -1.5em;
}

.form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.2em;
    vertical-align: top;
    background-color: var(--fundo-card);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid var(--cinza-400);
    appearance: none;
    print-color-adjust: exact; /* was color-adjust: exact */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-check-input[type="checkbox"] {
    border-radius: 0.25em;
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input:active {
    filter: brightness(90%);
}

.form-check-input:focus {
    border-color: var(--form-control-focus);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(41, 98, 255, 0.15);
}

.form-check-input:checked {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

/* Switch */
.form-switch {
    padding-left: 2.5em;
}

.form-switch .form-check-input {
    width: 2em;
    margin-left: -2.5em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239ca3af'/%3e%3c/svg%3e");
    background-position: left center;
    border-radius: 2em;
    transition: background-position 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23d1d5db'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* Range */
.form-range {
    width: 100%;
    height: 1.5rem;
    padding: 0;
    background-color: transparent;
    appearance: none;
}

.form-range:focus {
    outline: 0;
}

.form-range::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -0.25rem;
    background-color: var(--cor-primaria);
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none;
}

.form-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: var(--cinza-200);
    border-color: transparent;
    border-radius: 1rem;
}

/* Form groups */
.form-group {
    margin-bottom: 1rem;
}

/* Form row */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}

.form-row > .col,
.form-row > [class*="col-"] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

/* Floating labels */
.form-floating {
    position: relative;
}

.form-floating > .form-control,
.form-floating > .form-select {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
    padding: 1rem 0.75rem;
}

.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Validação de formulário */
.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--form-control-valid);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
    border-color: var(--form-control-valid);
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.15);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--form-control-invalid);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
    border-color: var(--form-control-invalid);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.15);
}

/* Labels */
.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

/* Campos de formulário base */
.form-control,
.form-select,
.form-check-input,
.form-check-label,
.input-group-text {
    font-size: 0.875rem;
    line-height: 1.5;
    transition: var(--transicao-rapida);
}

/* Campos de texto, seleção e textarea */
.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-weight: 400;
    color: var(--cinza-700);
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--cinza-400);
    border-radius: var(--borda-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Foco nos campos */
.form-control:focus,
.form-select:focus {
    color: var(--cinza-700);
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Campos desabilitados */
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--cinza-200);
    opacity: 1;
}

/* Input groups */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group > .form-control,
.input-group > .form-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--cinza-700);
    text-align: center;
    white-space: nowrap;
    background-color: var(--cinza-100);
    border: 1px solid var(--cinza-400);
    border-radius: var(--borda-radius);
}

/* Switches */
.form-switch {
    padding-left: 2.5em;
}

.form-switch .form-check-input {
    width: 2.5em;
    margin-left: -2.5em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    background-position: left center;
    border-radius: 2em;
    transition: background-position 0.15s ease-in-out;
}

.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* Feedback de validação */
.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--cor-perigo);
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-tooltip,
.form-control.is-invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-tooltip {
    display: block;
}

/* Campos obrigatórios */
.required:after {
    content: " *";
    color: var(--cor-perigo);
}

.form-control:focus, 
.form-select:focus {
    color: var(--cinza-700);
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-control-sm {
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.2rem;
}

.form-select {
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    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;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

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

/* Tabela base */
.table {
    --table-cell-padding: 0.75rem;
    --table-cell-padding-sm: 0.5rem;
    --table-bg: transparent;
    --table-accent-bg: transparent;
    --table-striped-bg: rgba(0, 0, 0, 0.02);
    --table-hover-bg: rgba(0, 0, 0, 0.03);
    --table-border-color: var(--cinza-300);
    --table-group-separator-color: currentcolor;
    --table-caption-color: var(--cinza-600);
    
    width: 100%;
    margin-bottom: 1rem;
    color: var(--cinza-700);
    vertical-align: top;
    border-color: var(--table-border-color);
    font-size: 0.9rem;
    border-collapse: collapse;
}

/* Cabeçalho da tabela */
.table > thead {
    vertical-align: bottom;
    background-color: var(--cinza-100);
    font-weight: 600;
}

/* Células da tabela */
.table > :not(caption) > * > * {
    padding: var(--table-cell-padding);
    background-color: var(--table-bg);
    border-bottom: 1px solid var(--table-border-color);
    box-shadow: inset 0 0 0 9999px var(--table-accent-bg);
}

/* Linhas agrupadas */
.table tbody + tbody {
    border-top: 2px solid var(--table-border-color);
}

/* Linhas alternadas */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --table-accent-bg: var(--table-striped-bg);
}

/* Efeito hover nas linhas */
.table-hover > tbody > tr:hover > * {
    --table-accent-bg: var(--table-hover-bg);
}

/* Tabela com bordas */
.table-bordered > :not(caption) > * {
    border-width: 1px 0;
}

.table-bordered > :not(caption) > * > * {
    border-width: 0 1px;
}

/* Tabela sem bordas */
.table-borderless > :not(caption) > * > * {
    border-bottom-width: 0;
}

.table-borderless > :not(:first-child) {
    border-top-width: 0;
}

/* Tabela pequena */
.table-sm > :not(caption) > * > * {
    padding: var(--table-cell-padding-sm);
}

/* Tabela responsiva */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Ajustes para telas pequenas */
@media (max-width: 767.98px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 1rem;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid var(--table-border-color);
        border-radius: var(--borda-radius);
    }
    
    .table-responsive > .table {
        margin-bottom: 0;
    }
    
    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > td {
        white-space: nowrap;
    }
}

/* Classes de alinhamento vertical */
.align-middle {
    vertical-align: middle !important;
}

.align-bottom {
    vertical-align: bottom !important;
}

/* Classes de alinhamento de texto */
.text-start {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-end {
    text-align: right !important;
}

/* Classes de largura de coluna */
.col-action {
    width: 120px;
    text-align: center;
}

.col-status {
    width: 100px;
    text-align: center;
}

.col-actions {
    width: 150px;
    text-align: center;
    white-space: nowrap;
}

/* Ajustes para células com ações */
.table-actions {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

/* Badges em células de tabela */
.table .badge {
    font-size: 0.75em;
    font-weight: 500;
    padding: 0.25em 0.5em;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: #f8f9fa;
    background-color: #f8f9fa;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-type: #f1f5f9;
    background-color: #f1f5f9;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.badge.bg-primary {
    color: #fff;
    background-color: var(--cor-primaria);
}

.badge.bg-success {
    color: #fff;
    background-color: var(--cor-sucesso);
}

.badge.bg-danger {
    color: #fff;
    background-color: var(--cor-perigo);
}

.badge.bg-warning {
    color: #000;
    background-color: var(--cor-alerta);
}

.badge.bg-info {
    color: #000;
    background-color: var(--cor-info);
}

/* Progress bars */
.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: 0.75rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: var(--cor-primaria);
    transition: width 0.6s ease;
}

.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    0% { background-position-x: 1rem; }
}

/* ==========================================================================
   ALERTAS
   ========================================================================== */
.alert {
    position: relative;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--borda-radius);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.alert-dismissible {
    padding-right: 3rem;
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.5rem;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: 0.5;
    transition: opacity 0.15s ease-in-out;
}

.alert-dismissible .btn-close:hover {
    opacity: 0.75;
}

.alert-primary {
    color: var(--cor-primaria-escuro);
    background-color: var(--cor-primaria-claro);
    border-color: var(--cor-primaria);
}

.alert-secondary {
    color: var(--cinza-800);
    background-color: var(--cinza-100);
    border-color: var(--cinza-300);
}

.alert-success {
    color: var(--cor-sucesso-escuro);
    background-color: var(--cor-sucesso-claro);
    border-color: var(--cor-sucesso);
}

.alert-danger {
    color: var(--cor-perigo-escuro);
    background-color: var(--cor-perigo-claro);
    border-color: var(--cor-perigo);
}

.alert-warning {
    color: var(--cor-aviso-escuro);
    background-color: var(--cor-aviso-claro);
    border-color: var(--cor-aviso);
}

.alert-info {
    color: var(--cor-info-escuro);
    background-color: var(--cor-info-claro);
    border-color: var(--cor-info);
}

.alert-light {
    color: var(--cinza-800);
    background-color: var(--cinza-100);
    border-color: var(--cinza-300);
}

.alert-dark {
    color: var(--cinza-100);
    background-color: var(--cinza-800);
    border-color: var(--cinza-900);
}

/* Animações para alertas */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.alert {
    animation: fadeIn 0.3s ease-out;
}

/* ==========================================================================
   COMPONENTES ESPECÍFICOS
   ========================================================================== */

/* Menu lateral */
.nav-item {
    transition: background-color 0.2s ease-in-out;
}

.nav-item.active {
    background-color: var(--cinza-200);
    border-left: 4px solid var(--cor-primaria);
}

.nav-item.active .nav-link,
.nav-item.active .nav-link span {
    font-weight: 700 !important;
}

.nav-item:hover {
    background-color: var(--cinza-100);
}

.nav-link {
    color: var(--cinza-900) !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

.nav-link:hover {
    color: var(--cinza-900) !important;
    background-color: var(--cinza-100) !important;
}

.nav-link i, 
.nav-link img {
    margin-right: 0.75rem;
    filter: brightness(0);
}

.nav-item.active .nav-link i,
.nav-item.active .nav-link img {
    filter: brightness(0) invert(0.5) sepia(1) saturate(5) hue-rotate(200deg);
}

.nav-item:hover .nav-link i,
.nav-item:hover .nav-link img {
    filter: brightness(0) invert(0.3) sepia(1) saturate(5) hue-rotate(200deg);
}

/* Dropdown menu */
.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 0.875rem;
    color: var(--cinza-700);
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: var(--cinza-900);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #1e2125;
    background-color: var(--cinza-200);
}

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--cor-primaria);
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1060; /* Aumentado para garantir que fique acima de outros elementos */
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1rem; /* Adicionado padding para evitar que o modal fique colado nas bordas */
}

.modal.show {
    display: block;
}

.modal-dialog {
    position: relative;
    width: auto;
    max-width: 100%;
    margin: 1.75rem auto;
    min-height: calc(100% - 3.5rem);
    display: flex;
    align-items: center;
    pointer-events: none;
}

.modal.fade .modal-dialog {
    transition: all 0.3s ease-out;
    transform: translateY(-50px);
    opacity: 0;
}

.modal.show .modal-dialog {
    transform: translateY(0);
    opacity: 1;
}

/* Ajuste para modais de tamanhos diferentes */
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }
    
    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
    }
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    outline: 0;
}

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}

.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: calc(0.3rem - 1px);
    border-bottom-left-radius: calc(0.3rem - 1px);
}

.modal-footer > * {
    margin: 0.25rem;
}

/* ==========================================================================
   MÓDULOS ESPECÍFICOS
   ========================================================================== */

/* Estilos para o módulo de Planejamento */
#itensPorPagina {
    width: auto;
}

/* Estilo para o canvas do gráfico */
#evolucaoFinanceira,
#graficoPizza {
    width: 100%;
    height: 300px;
}

/* Estilos para os botões de remoção */
.receita-item .btn-remover,
.despesa-item .btn-remover {
    display: flex;
    align-items: flex-end;
    height: 100%;
    padding-top: 24px; /* Alinha com os campos de entrada */
}

.receita-item .btn-danger,
.despesa-item .btn-danger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 38px; /* Altura padrão dos inputs do Bootstrap */
    background-color: transparent;
    border: none;
    color: var(--cor-perigo);
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    box-shadow: none;
    outline: none;
}

.receita-item .btn-danger:hover,
.despesa-item .btn-danger:hover {
    background-color: var(--cor-perigo);
    color: white;
}

.receita-item .btn-danger i,
.despesa-item .btn-danger i {
    font-size: 1.25rem;
}

/* Estilos para despesas parceladas */
.despesa-item {
    position: relative;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background-color: #fff;
    border-radius: var(--borda-radius);
    transition: all 0.2s ease;
}

.despesa-item:hover {
    background-color: var(--cinza-100);
}

.despesa-item.border-primary {
    border-left: 3px solid var(--cor-primaria) !important;
    background-color: #f8f9ff;
}

/* Estilos para edição em linha */
.editable {
    position: relative;
    min-width: 150px;
}

.editable[data-field="taxa"] .view-mode,
.editable[data-field="nome"] .view-mode {
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    transition: all 0.2s ease-in-out;
}

.editable[data-field="taxa"] .view-mode:hover,
.editable[data-field="nome"] .view-mode:hover {
    background-color: var(--cinza-100);
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.view-mode {
    display: block;
    padding: 0.25rem 0.5rem;
    min-height: 31px;
    line-height: 1.5;
}

.edit-mode {
    display: none;
}

tr.editing .edit-mode {
    display: block;
}

tr.editing .view-mode {
    display: none;
}

.btn-editar {
    display: inline-block;
}

.btn-salvar,
.btn-cancelar {
    display: none;
}

tr.editing .btn-editing {
    display: none;
}

tr.editing .btn-salvar,
tr.editing .btn-cancelar {
    display: inline-block;
}

/* Estilos para o modal de usuário */
#usuarioModal .modal-dialog {
    max-width: 800px;
}

#usuarioModal .modal-body {
    padding: 1.5rem;
}

/* Estilo para o switch de status */
.form-switch .form-check-input {
    width: 2.5em;
    margin-left: 0;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.form-switch .form-check-input:checked {
    background-color: var(--cor-sucesso);
    border-color: var(--cor-sucesso);
}

.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* Estilo para o indicador de carregamento */
.form-switch .spinner-border {
    width: 1.5em;
    height: 1.5em;
    border-width: 0.15em;
}

/* Estilo para os campos do formulário */
#formUsuario .form-label.required:after {
    content: " *";
    color: var(--cor-perigo);
}

/* Estilo para o botão de mostrar/ocultar senha */
.toggle-password {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
    min-width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-password .bi-eye,
.toggle-password .bi-eye-slash {
    font-size: 1rem;
}

/* Ajuste para o ícone dentro do botão */
.toggle-password i {
    line-height: 1;
}

/* Estilo para mensagens de validação */
.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--cor-perigo);
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-tooltip,
.form-control.is-invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-tooltip {
    display: block;
}

/* Estilo para a tabela de usuários */
#tabelaUsuarios {
    width: 100% !important;
}

#tabelaUsuarios th {
    white-space: nowrap;
}

/* Estilo para o botão de novo usuário */
.btn-novo-usuario {
    margin-right: 10px;
}

/* Estilo para os botões de ação na tabela */
.btn-action {
    margin: 0 2px;
}

/* ==========================================================================
   UTILITÁRIOS
   ========================================================================== */

/* Classes para larguras fixas */
.w-60 {
    width: 60px !important;
}

.w-80 {
    width: 80px !important;
}

.w-90 {
    width: 90px !important;
}

.w-100px {
    width: 100px !important;
}

.w-120 {
    width: 120px !important;
}

.w-150 {
    width: 150px !important;
}

.min-w-120 {
    min-width: 120px !important;
}

.min-w-150 {
    min-width: 150px !important;
}

.max-w-150 {
    max-width: 150px !important;
}

.max-w-200 {
    max-width: 200px !important;
}

/* Alturas fixas */
.h-250 {
    height: 250px !important;
}

/* Paddings personalizados */
.px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.p-1 {
    padding: 0.25rem !important;
}

/* Margens personalizadas */
.mx-1 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
}

/* Tamanhos de fonte personalizados */
.fs-smaller {
    font-size: 0.9rem !important;
}

/* Altura de linha personalizada */
.lh-sm {
    line-height: 1.2 !important;
}

/* Classe para selects personalizados */
.select-custom {
    min-width: 90px;
    padding: 0.25rem 1.75rem 0.25rem 0.75rem;
    font-size: 0.9rem;
    height: calc(1.5em + 0.5rem + 2px);
}

/* Classes para tabelas responsivas */
.table-responsive {
    border: 1px solid var(--cinza-200);
    border-radius: var(--borda-radius);
    overflow: hidden;
}

/* Classes para células de tabela */
.td-truncate {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Classes para cards */
.card-body-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    padding: 0.5rem !important;
}

/* Classes para barras de progresso */
.progress-thin {
    height: 4px !important;
}

/* Classes para dropdowns */
.dropdown-menu-custom {
    min-width: 250px;
}

/* Estilos para o menu lateral */
.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 48px 0 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
    transition: all 0.3s;
}

.sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 48px);
    padding-top: .5rem;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Estilo para os itens do menu */
.sidebar .nav-link {
    color: #333;
    padding: 0.5rem 1rem;
    margin: 0.2rem 0.5rem;
    border-radius: 0.25rem;
}

.sidebar .nav-link:hover, 
.sidebar .nav-link.active {
    background-color: #e9ecef;
    color: #0d6efd;
}

.sidebar .dropdown-menu {
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.sidebar .dropdown-item {
    padding: 0.5rem 1.5rem;
}

.sidebar .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #0d6efd;
}

/* Classes para badges */
.badge-truncate {
    max-width: 100%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Classes de utilidade para texto */
.texto-saldo-positivo {
    color: var(--cor-sucesso);
    font-weight: 500;
}

.texto-saldo-negativo {
    color: var(--cor-perigo);
    font-weight: 500;
}

/* Ícones */
.icon-tamanho-padrao {
    font-size: 1.2em;
    line-height: 1;
    display: block;
}

.metodo-pagamento-icon {
    font-size: 1.2em;
    line-height: 1;
    display: block;
    color: var(--cor-sucesso);
}

/* Mensagens de ajuda */
.info-ajuda {
    font-size: 0.8rem;
    color: var(--cinza-600);
    display: flex;
    align-items: center;
    margin-top: 0.25rem;
}

.info-ajuda i {
    margin-right: 0.25rem;
}

/* Alinhamentos */
.align-middle {
    vertical-align: middle;
}

.text-nowrap {
    white-space: nowrap !important;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Margens e paddings */
.mt-3 {
    margin-top: 1rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mr-2 {
    margin-right: 0.5rem !important;
}

.ml-2 {
    margin-left: 0.5rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

/* Flexbox */
.d-flex {
    display: flex !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.align-items-center {
    align-items: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

/* ==========================================================================
   RESPONSIVIDADE
   ========================================================================== */

@media (max-width: 768px) {
    /* Tabelas responsivas */
    .table-responsive {
        border: 1px solid var(--cinza-300);
        border-radius: var(--borda-radius);
        overflow: hidden;
        margin-bottom: 1rem;
    }
    
    .table {
        margin-bottom: 0;
    }
    
    .table thead {
        display: none;
    }
    
    .table, .table tbody, .table tr, .table td {
        display: block;
        width: 100%;
    }
    
    .table tr {
        margin-bottom: 1rem;
        border: 1px solid var(--cinza-300);
        border-radius: var(--borda-radius);
        padding: 0.5rem;
    }
    
    .table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
        border-bottom: 1px solid var(--cinza-200);
    }
    
    .table td::before {
        content: attr(data-label);
        position: absolute;
        left: 1rem;
        width: 45%;
        text-align: left;
        font-weight: 600;
    }
    
    /* Botões em telas pequenas */
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .btn-action {
        margin: 2px 0;
        display: block;
        width: 100%;
    }
    
    /* Ajustes para modais em telas pequenas */
    #usuarioModal .modal-dialog,
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
}

/* Animações */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

/* Personalização da barra de rolagem */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Classes de utilidade para texto */
.texto-saldo-positivo {
    color: var(--cor-sucesso);
    font-weight: 500;
}

.texto-saldo-negativo {
    color: var(--cor-perigo);
    font-weight: 500;
}

/* Ícones */
.icon-tamanho-padrao {
    font-size: 1.2em;
    line-height: 1;
    display: block;
}

.metodo-pagamento-icon {
    font-size: 1.2em;
    line-height: 1;
    display: block;
    color: var(--cor-sucesso);
}

/* Mensagens de ajuda */
.info-ajuda {
    font-size: 0.8rem;
    color: var(--cinza-600);
    display: flex;
    align-items: center;
    margin-top: 0.25rem;
}

.info-ajuda i {
    margin-right: 0.25rem;
}

/* Cards */
.card {
    border: 1px solid var(--cinza-300);
    border-radius: var(--borda-radius);
    box-shadow: var(--sombra-padrao);
    transition: var(--transicao-padrao);
}

.card:hover {
    box-shadow: var(--sombra-hover);
}

/* Formulários */
.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

/* Botões */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: var(--transicao-rapida);
}

.btn i {
    font-size: 1em;
}

/* Tabelas */
.table th {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Responsividade */
@media (max-width: 768px) {
    .table-responsive {
        border: 1px solid var(--cinza-300);
        border-radius: var(--borda-radius);
        overflow: hidden;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* --------------------------------------------------------------------------
   MENU LATERAL
   -------------------------------------------------------------------------- */
.nav-item {
    transition: background-color 0.2s ease-in-out;
}

.nav-item.active {
    background-color: #e9ecef;
    border-left: 4px solid #0d6efd;
}

.nav-item.active .nav-link,
.nav-item.active .nav-link span {
    font-weight: 700 !important;
}

.nav-item:hover {
    background-color: #f1f5f9;
}

.nav-link {
    color: #212529 !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-weight: 500;
}

.nav-link:hover {
    color: #212529 !important;
    background-color: #f1f5f9 !important;
    text-decoration: none !important;
}

a.nav-link:hover,
a.nav-link:focus,
a.nav-link:active,
a.nav-link:visited,
a.nav-link:link {
    color: #212529 !important;
    text-decoration: none !important;
}

/* Garante que o texto dentro do link não mude de cor */
.nav-link,
.nav-link span,
.nav-link:hover span,
.nav-link:focus span,
.nav-link:active span,
.nav-link:visited span,
.nav-link:link span {
    color: #212529 !important;
    text-decoration: none !important;
}

.nav-link i, .nav-link img {
    margin-right: 0.75rem;
    filter: brightness(0);
}

.nav-item.active .nav-link i,
.nav-item.active .nav-link img {
    filter: brightness(0) invert(0.5) sepia(1) saturate(5) hue-rotate(200deg);
}

.nav-item:hover .nav-link i,
.nav-item:hover .nav-link img {
    filter: brightness(0) invert(0.3) sepia(1) saturate(5) hue-rotate(200deg);
}

/* --------------------------------------------------------------------------
   TABELAS
   -------------------------------------------------------------------------- */

/* Estrutura básica da tabela */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    border-collapse: collapse;
}

/* Cabeçalho da tabela */
.table thead th {
    background-color: #f1f5f9;
    font-weight: 600;
    padding: 12px 8px;
    border-bottom: 2px solid #dee2e6;
    vertical-align: middle;
}

.table th i {
    color: #4b5563;
    margin-right: 0.5rem;
}

/* Corpo da tabela */
.table td {
    padding: 0.75rem;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
}

/* Linhas alternadas */
/* Estilos para tabela com linhas alternadas */
.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-bg-type: #f8f9fa;
    background-color: #f8f9fa;
}

.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #ffffff;
}

.table-striped > tbody > tr:hover {
    background-color: #e9ecef;
    transition: var(--transicao-rapida);
}

/* Efeito hover nas linhas */
.table-hover > tbody > tr:hover > * {
    --bs-table-bg-type: #e9ecef;
    background-color: rgba(0, 0, 0, 0.05);
}

/* --------------------------------------------------------------------------
   BOTÕES DE AÇÃO
   -------------------------------------------------------------------------- */

/* Botões de ação (editar, excluir) */
.btn-action {
    color: #6c757d;
    transition: all 0.3s;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
}

.btn-action:hover {
    transform: scale(1.2);
}

/* Estilo específico para os botões de ação na tabela de classificação */
.table .btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0;
}

.table .btn-action i {
    font-size: 16px;
}

.table .btn-edit {
    color: #0d6efd;
}

.table .btn-edit:hover {
    background-color: #0d6efd;
    color: white;
}

.table .btn-delete {
    color: #dc3545;
}

.table .btn-delete:hover {
    background-color: #dc3545;
    color: white;
}

/* Alinhamento dos botões de ação */
.table td {
    vertical-align: middle;
}

/* Espaçamento entre botões */
.btn-action + .btn-action {
    margin-left: 8px;
}

.btn-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    padding: 0;
}

.conta-cartao-badge {
    font-size: 0.75rem;
    border-radius: 999px;
    padding: 0.35rem 0.6rem;
    background-color: rgba(13, 110, 253, 0.1);
}

.conta-valor-positivo {
    color: #0d6efd !important;
}

.btn-edit {
    color: #0d6efd;
}

.btn-edit:hover {
    color: #0b5ed7;
    background-color: rgba(13, 110, 253, 0.1);
}

.btn-delete {
    color: #dc3545;
}

.btn-delete:hover {
    color: #bb2d3b;
    background-color: rgba(220, 53, 69, 0.1);
}

/* --------------------------------------------------------------------------
   FORMULÁRIOS E CAMPOS
   -------------------------------------------------------------------------- */

/* Campos de formulário */
.form-control, .form-select {
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus, .form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Grupos de entrada */
.input-group {
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   MODAIS
   -------------------------------------------------------------------------- */

/* Estilos para o modal de notificações */
#modalNotificacao .form-control,
#modalNotificacao .form-select {
    border: 1px solid #ced4da !important;
    background-color: #fff !important;
    color: #212529 !important;
    height: calc(1.5em + 0.75rem + 2px) !important;
    padding: 0.5rem 0.75rem !important;
    line-height: 1.5 !important;
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Ajuste para o campo de corpo para evitar sobreposição */
#modalNotificacao #corpo_editor {
    min-height: 200px;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    overflow: hidden;
}

/* Garante que os campos de link fiquem abaixo do campo corpo */
#modalNotificacao .link-fields-row {
    clear: both;
    margin-top: 2rem;
    padding-top: 1.5rem;
    position: relative;
    z-index: 2;
    background-color: #fff;
    border-top: 1px solid #eee;
}

/* Ajuste para as labels dos campos de link */
#modalNotificacao .link-fields-row .form-label {
    position: relative;
    z-index: 2;
    background-color: #fff;
    padding: 0.25rem 0.5rem;
    margin-top: -1.5rem;
    display: inline-block;
    margin-bottom: 0.5rem;
}

#modalNotificacao .form-control:focus,
#modalNotificacao .form-select:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Modal de confirmação (SweetAlert2) */
.swal2-popup {
    border-radius: 0.5rem;
    padding: 2rem;
    font-family: inherit;
}

.swal2-title {
    font-size: 1.5rem;
    color: #1f2937;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.swal2-html-container {
    font-size: 1.1rem;
    color: #4b5563;
    margin: 1.5rem 0;
}

.swal2-actions {
    margin: 1.5rem 0 0 0;
    gap: 0.75rem;
}

.swal2-styled {
    padding: 0.625rem 1.5rem;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
    font-size: 1rem;
}

.swal2-styled.swal2-confirm {
    background-color: #dc3545;
    border: none;
}

.swal2-styled.swal2-confirm:not([disabled]):hover {
    background-color: #bb2d3b;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.swal2-styled.swal2-cancel {
    background-color: #6c757d;
    border: none;
}

.swal2-styled.swal2-cancel:not([disabled]):hover {
    background-color: #5c636a;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.swal2-icon {
    margin-bottom: 1rem;
    width: 4em;
    height: 4em;
}

/* --------------------------------------------------------------------------
   COMPONENTES ESPECÍFICOS
   -------------------------------------------------------------------------- */

/* Bandeiras de cartão */
.card-brand {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    background-color: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.card-brand i {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

#visa { color: #1a1f71; } /* Azul Visa */
#mastercard { color: #eb001b; } /* Vermelho Mastercard */
#amex { color: #006fcf; } /* Azul American Express */
#generic { color: #6c757d; } /* Cinza para cartões genéricos */

/* Ícones de status */
.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

/* Paginação */
.pagination {
    margin: 1rem 0;
}

.pagination .page-link {
    color: #0d6efd;
    border: 1px solid #dee2e6;
    padding: 0.375rem 0.75rem;
}

.pagination .page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

/* Responsividade */
@media (max-width: 768px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        font-size: 0.9rem;
    }
    
    .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* Utilitários */
.text-nowrap {
    white-space: nowrap;
}

.text-center {
    text-align: center;
}

.text-end {
    text-align: right;
}

.align-middle {
    vertical-align: middle;
}

/* Estilos para validação de formulários */
.is-invalid {
    border-color: #dc3545 !important;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Estilos para o Relatório Financeiro */
.relatorio .badge-receita {
    background-color: #28a745;
}

.relatorio .badge-despesa {
    background-color: #dc3545;
}

.relatorio .valor-positivo {
    color: #28a745;
    font-weight: bold;
}

.relatorio .valor-negativo {
    color: #dc3545;
    font-weight: bold;
}

.relatorio .valor-neutro {
    color: #6c757d;
    font-weight: bold;
}

/* Estilos para os cards de resumo */
.relatorio .resumo-card {
    border-left: 4px solid;
    transition: transform 0.2s;
}

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

.relatorio .resumo-receita {
    border-left-color: #28a745;
}

.relatorio .resumo-despesa {
    border-left-color: #dc3545;
}

.relatorio .resumo-saldo {
    border-left-color: #17a2b8;
}

/* Estilos para o filtro de período */
.relatorio .filtro-periodo {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.relatorio .btn-filtrar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 8px 20px;
    border-radius: 5px;
    transition: all 0.3s;
}

.relatorio .btn-filtrar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.relatorio .btn-filtrar:active {
    transform: translateY(0);
}

/* Estilos para o botão de exportação */
.relatorio .btn-export {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    color: white;
}

.relatorio .btn-export:hover {
    background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
    color: white;
}

.relatorio .total-geral {
    font-size: 1.2rem;
    font-weight: 600;
}

.relatorio .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.relatorio .table-responsive {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ========== UTILITÁRIOS ========== */

/* Espaçamentos */
.mt-3 { margin-top: 1rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.mr-2 { margin-right: 0.5rem !important; }

/* Texto */
.text-nowrap { white-space: nowrap !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-start { text-align: left !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.fw-bold { font-weight: 600 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-light { font-weight: 300 !important; }
.fst-italic { font-style: italic !important; }

/* Cores de texto */
.text-primary { color: var(--cor-primaria) !important; }
.text-secondary { color: var(--cor-secundaria) !important; }
.text-success { color: var(--cor-sucesso) !important; }
.text-danger { color: var(--cor-perigo) !important; }
.text-warning { color: var(--cor-aviso) !important; }
.text-info { color: var(--cor-info) !important; }
.text-light { color: var(--cinza-200) !important; }
.text-dark { color: var(--cinza-900) !important; }
.text-muted { color: var(--cinza-600) !important; }

/* Cores de fundo */
.bg-primary { background-color: var(--cor-primaria) !important; }
.bg-secondary { background-color: var(--cor-secundaria) !important; }
.bg-success { background-color: var(--cor-sucesso) !important; }
.bg-danger { background-color: var(--cor-perigo) !important; }
.bg-warning { background-color: var(--cor-aviso) !important; }
.bg-info { background-color: var(--cor-info) !important; }
.bg-light { background-color: var(--cinza-100) !important; }
.bg-dark { background-color: var(--cinza-900) !important; }
.bg-white { background-color: #fff !important; }
.bg-transparent { background-color: transparent !important; }

/* Bordas */
.rounded { border-radius: var(--borda-radius) !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-1 { border-radius: var(--borda-radius-sm) !important; }
.rounded-2 { border-radius: var(--borda-radius) !important; }
.rounded-3 { border-radius: var(--borda-radius-lg) !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 50rem !important; }

/* Flexbox */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-fill { flex: 1 1 auto !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }
.align-self-auto { align-self: auto !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch { align-self: stretch !important; }

/* Tamanhos */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }
.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }
.min-vw-100 { min-width: 100vw !important; }
.min-vh-100 { min-height: 100vh !important; }
.vw-100 { width: 100vw !important; }
.vh-100 { height: 100vh !important; }

/* Margens e preenchimentos */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }
.m-auto { margin: auto !important; }
.mx-0 { margin-right: 0 !important; margin-left: 0 !important; }
.mx-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
.mx-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
.mx-3 { margin-right: 1rem !important; margin-left: 1rem !important; }
.mx-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
.mx-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-auto { margin-top: auto !important; }
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.me-auto { margin-right: auto !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mb-auto { margin-bottom: auto !important; }
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-4 { margin-left: 1.5rem !important; }
.ms-5 { margin-left: 3rem !important; }
.ms-auto { margin-left: auto !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }

/* Visibilidade */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* Responsividade */
@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
    .d-sm-block { display: block !important; }
    .d-sm-grid { display: grid !important; }
    .d-sm-table { display: table !important; }
    .d-sm-table-row { display: table-row !important; }
    .d-sm-table-cell { display: table-cell !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-inline-flex { display: inline-flex !important; }
    .d-sm-none { display: none !important; }
}

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-inline { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
    .d-md-block { display: block !important; }
    .d-md-grid { display: grid !important; }
    .d-md-table { display: table !important; }
    .d-md-table-row { display: table-row !important; }
    .d-md-table-cell { display: table-cell !important; }
    .d-md-flex { display: flex !important; }
    .d-md-inline-flex { display: inline-flex !important; }
    .d-md-none { display: none !important; }
}

@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-block { display: block !important; }
    .d-lg-grid { display: grid !important; }
    .d-lg-table { display: table !important; }
    .d-lg-table-row { display: table-row !important; }
    .d-lg-table-cell { display: table-cell !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-inline-flex { display: inline-flex !important; }
    .d-lg-none { display: none !important; }
}

@media (min-width: 1200px) {
    .d-xl-none { display: none !important; }
    .d-xl-inline { display: inline !important; }
    .d-xl-inline-block { display: inline-block !important; }
    .d-xl-block { display: block !important; }
    .d-xl-grid { display: grid !important; }
    .d-xl-table { display: table !important; }
    .d-xl-table-row { display: table-row !important; }
    .d-xl-table-cell { display: table-cell !important; }
    .d-xl-flex { display: flex !important; }
    .d-xl-inline-flex { display: inline-flex !important; }
    .d-xl-none { display: none !important; }
}

@media (min-width: 1400px) {
    .d-xxl-none { display: none !important; }
    .d-xxl-inline { display: inline !important; }
    .d-xxl-inline-block { display: inline-block !important; }
    .d-xxl-block { display: block !important; }
    .d-xxl-grid { display: grid !important; }
    .d-xxl-table { display: table !important; }
    .d-xxl-table-row { display: table-row !important; }
    .d-xxl-table-cell { display: table-cell !important; }
    .d-xxl-flex { display: flex !important; }
    .d-xxl-inline-flex { display: inline-flex !important; }
    .d-xxl-none { display: none !important; }
}

/* Impressão */
/* Estilos para impressão de relatórios */
@page { 
    size: A4; 
    margin: 1cm; 
}

/* Estilos gerais para o corpo do relatório de impressão */
.print-report {
    font-family: Arial, sans-serif; 
    font-size: 12px;
}

/* Cabeçalho do relatório */
.print-report .header { 
    text-align: center; 
    margin-bottom: 20px; 
}

.print-report .header h1 { 
    margin: 0; 
    font-size: 18px; 
}

.print-report .header .filters { 
    margin: 10px 0; 
    font-size: 14px; 
    color: #555; 
}

/* Tabela do relatório */
.print-report table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 10px; 
}

.print-report th, 
.print-report td { 
    border: 1px solid #ddd; 
    padding: 6px; 
    text-align: left; 
}

.print-report th { 
    background-color: #f2f2f2; 
    font-weight: bold; 
}

.print-report .text-right { 
    text-align: right; 
}

.print-report .total { 
    font-weight: bold; 
    margin-top: 15px; 
    text-align: right; 
}

.print-report .page-break { 
    page-break-after: always; 
}

.print-report .no-print { 
    display: none; 
}

/* Estilos padrão para impressão */
@media print {
    .d-print-none { display: none !important; }
    .d-print-inline { display: inline !important; }
    .d-print-inline-block { display: inline-block !important; }
    .d-print-block { display: block !important; }
    
    .print-footer {
        margin-top: 30px;
        text-align: right;
        font-size: 11px;
        color: #666;
    }
    .d-print-grid { display: grid !important; }
    .d-print-table { display: table !important; }
    .d-print-table-row { display: table-row !important; }
    .d-print-table-cell { display: table-cell !important; }
    .d-print-flex { display: flex !important; }
    .d-print-inline-flex { display: inline-flex !important; }
    .d-print-none { display: none !important; }
    
    .d-print-visible { display: block !important; }
    .d-print-hidden { display: none !important; }
    
    .d-print-table { width: 100% !important; }
    .d-print-table th,
    .d-print-table td { background-color: #fff !important; }
    
    .d-print-inline { display: inline !important; }
    .d-print-inline-block { display: inline-block !important; }
    
    .d-print-flex { display: flex !important; }
    .d-print-inline-flex { display: inline-flex !important; }
    
    .d-print-none { display: none !important; }
    
    .d-print-order-1 { order: 1 !important; }
    .d-print-order-2 { order: 2 !important; }
    .d-print-order-3 { order: 3 !important; }
    .d-print-order-4 { order: 4 !important; }
    .d-print-order-5 { order: 5 !important; }
    .d-print-order-6 { order: 6 !important; }
    .d-print-order-7 { order: 7 !important; }
    .d-print-order-8 { order: 8 !important; }
    .d-print-order-9 { order: 9 !important; }
    .d-print-order-10 { order: 10 !important; }
    .d-print-order-11 { order: 11 !important; }
    .d-print-order-12 { order: 12 !important; }
    
    .d-print-offset-1 { margin-left: 8.333333% !important; }
    .d-print-offset-2 { margin-left: 16.666667% !important; }
    .d-print-offset-3 { margin-left: 25% !important; }
    .d-print-offset-4 { margin-left: 33.333333% !important; }
    .d-print-offset-5 { margin-left: 41.666667% !important; }
    .d-print-offset-6 { margin-left: 50% !important; }
    .d-print-offset-7 { margin-left: 58.333333% !important; }
    .d-print-offset-8 { margin-left: 66.666667% !important; }
    .d-print-offset-9 { margin-left: 75% !important; }
    .d-print-offset-10 { margin-left: 83.333333% !important; }
    .d-print-offset-11 { margin-left: 91.666667% !important; }
    
    .d-print-m-0 { margin: 0 !important; }
    .d-print-mt-0 { margin-top: 0 !important; }
    .d-print-mr-0 { margin-right: 0 !important; }
    .d-print-mb-0 { margin-bottom: 0 !important; }
    .d-print-ml-0 { margin-left: 0 !important; }
    .d-print-mx-0 { margin-right: 0 !important; margin-left: 0 !important; }
    .d-print-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    
    .d-print-p-0 { padding: 0 !important; }
    .d-print-pt-0 { padding-top: 0 !important; }
    .d-print-pr-0 { padding-right: 0 !important; }
    .d-print-pb-0 { padding-bottom: 0 !important; }
    .d-print-pl-0 { padding-left: 0 !important; }
    .d-print-px-0 { padding-right: 0 !important; padding-left: 0 !important; }
    .d-print-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
}