/* Tema Compacto e Profissional */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    background: #f5f6f8;
    min-height: 100vh;
    color: #2d3748;
    font-size: 14px;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 15px;
}

/* Barra de ações sempre visível */
.page-actions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.page-actions-more {
    position: relative;
}

.page-actions-more > summary {
    list-style: none;
    cursor: pointer;
    padding: 7px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: white;
    color: #4a5568;
    font-size: 0.813rem;
    font-weight: 500;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
}

.page-actions-more > summary::-webkit-details-marker {
    display: none;
}

.page-actions-more[open] > summary {
    background: #edf2f7;
}

.page-actions-more-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    min-width: 160px;
    padding: 8px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.page-actions-more-menu .btn-secondary {
    width: 100%;
}

/* Toolbar lista: busca + agrupamento */
.lista-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.lista-toolbar .search-box {
    margin-bottom: 0;
    flex: 1 1 220px;
}

.lista-toolbar .search-box input {
    width: 100%;
    max-width: 360px;
}

.lista-toolbar .view-mode-buttons {
    margin: 0;
}

.view-mode-label {
    margin-right: 6px;
    color: #718096;
    font-weight: 500;
    font-size: 0.813rem;
}

.lista-contador {
    font-size: 0.75rem;
    color: #718096;
    margin-bottom: 10px;
}

.bulk-more-actions {
    position: relative;
}

.bulk-more-actions > summary {
    list-style: none;
    cursor: pointer;
}

.bulk-more-actions > summary::-webkit-details-marker {
    display: none;
}

.bulk-more-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    padding: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.form-transacao-erro {
    margin: 0 0 12px 0;
    padding: 10px 12px;
    background: #fff5f5;
    border: 1px solid #feb2b2;
    border-radius: 6px;
    color: #c53030;
    font-size: 0.85rem;
}

.sync-datas-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 400;
}

.bloco-serie strong {
    color: #1e293b;
    font-size: 0.9rem;
}

/* Header Compacto */
header {
    text-align: center;
    margin-bottom: 8px;
    background: white;
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-left: 3px solid #4a5568;
}

header h1 {
    font-size: 1rem;
    color: #1a202c;
    margin-bottom: 2px;
    font-weight: 600;
}

header p {
    font-size: 0.7rem;
    color: #718096;
    font-weight: 400;
}

/* Navegação Compacta */
.nav-menu {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
    justify-content: center;
}

.nav-link {
    padding: 4px 10px;
    background: white;
    color: #4a5568;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.75rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.nav-link:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

.nav-link.active {
    background: #4a5568;
    color: white;
    border-color: #4a5568;
}

/* Controles Compactos */
/* Container padrão para todos os grupos colapsáveis */
.controls,
.stats-container,
.budget-chips-panel {
    background: white;
    padding: 0;
    border-radius: 6px;
    margin-bottom: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Header padrão para todos os grupos colapsáveis */
.controls-header,
.stats-header,
.budget-chips-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f7fafc;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    user-select: none;
}

.controls-header:hover,
.stats-header:hover,
.budget-chips-header:hover {
    background: #edf2f7;
}

/* Título padrão para todos os grupos colapsáveis */
.controls-title,
.stats-title,
.budget-chips-title {
    font-weight: 600;
    font-size: 0.75rem;
    color: #2d3748;
}

/* Botão toggle padrão para todos os grupos colapsáveis */
.controls-toggle-btn,
.stats-toggle-btn,
.btn-toggle-budget {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.75rem;
    color: #4a5568;
    transition: transform 0.2s;
}

.controls-toggle-btn:hover,
.stats-toggle-btn:hover,
.btn-toggle-budget:hover {
    color: #2d3748;
}

/* Ícone toggle rotacionado quando colapsado */
.controls.collapsed .controls-toggle-icon,
.stats-container.collapsed .stats-toggle-icon,
.budget-chips-panel.collapsed .budget-toggle-icon {
    transform: rotate(-90deg);
}

/* Conteúdo padrão para grupos colapsáveis */
.controls-content {
    padding: 6px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Elementos que ocupam toda a largura dentro de controls-content */
.controls-content .view-mode-buttons,
.controls-content .filter-buttons,
.controls-content .advanced-filters,
.controls-content .saved-filters {
    width: 100%;
    flex: 1 1 100%;
}

.stats-content {
    padding: 6px 8px;
    display: block;
}

.budget-chips-content {
    padding: 6px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Estado colapsado */
.controls.collapsed .controls-content,
.stats-container.collapsed .stats-content,
.budget-chips-panel.collapsed .budget-chips-content {
    display: none;
}

/* Stats Container Colapsável - estilos unificados acima */

/* Stats header - estilos unificados acima */

/* Stats title - estilos unificados acima */

/* Stats toggle - estilos unificados acima */

/* Stats toggle icon - estilos unificados acima */

/* Stats content - estilos unificados acima */

.control-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.control-group label {
    font-weight: 500;
    color: #4a5568;
    font-size: 0.7rem;
}

.control-group select {
    padding: 3px 6px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 0.7rem;
    background: white;
    color: #2d3748;
    cursor: pointer;
}

.control-group select:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
}

.control-group input[type="text"],
.control-group input[type="date"],
.control-group input[type="number"] {
    padding: 3px 6px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 0.7rem;
    background: white;
    color: #2d3748;
}

.control-group input:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
}

/* Botões Compactos */
.btn-primary, .btn-secondary {
    padding: 3px 8px;
    border: none;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 28px; /* Área de toque mínima em desktop */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background: #4a5568;
    color: white;
}

.btn-primary:hover {
    background: #2d3748;
}

.btn-secondary {
    background: #edf2f7;
    color: #4a5568;
    border: 1px solid #cbd5e0;
}

.btn-secondary:hover {
    background: #e2e8f0;
}

/* Dashboard Compacto */
.dashboard {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

/* Gauges Plotly — resumo do período: em telas largas, 3 colunas; textos alinham no topo, base do arco alinhada embaixo */
.gauges-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch; /* mesma altura de linha = bases dos plots alinham com space-between */
    width: 100%;
}

.gauges-grid .gauge-cell {
    min-width: 0;
    min-height: 400px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Cabeçalho no topo, área do Plotly encostada no rodapé do cartão: bases alinhadas entre colunas */
    justify-content: space-between;
}

/* Texto do resumo fica fora do SVG (Plotly) para não ser cortado */
.gauges-grid .gauge-head {
    flex: 0 0 auto;
    padding: 4px 6px 2px 6px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #4a5568;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.gauges-grid .gauge-head strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 2px;
}

.gauges-grid .gauge-head .gauge-head-line {
    display: block;
    margin-top: 1px;
}

.gauges-grid .gauge-head .gauge-head-pct {
    font-weight: 600;
    color: #2d3748;
    white-space: normal;
}

.gauges-grid .gauge-head .gauge-head-note {
    display: block;
    margin-top: 4px;
    font-size: 0.65rem;
    color: #718096;
    line-height: 1.35;
}

/* Legenda compacta ao pé do gauge «Demais» */
.gauge-head-legenda-demais {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    font-size: 0.625rem;
    color: #4a5568;
    line-height: 1.35;
    text-align: left;
}

.gauge-leg-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 3px;
}

.gauge-leg-row:first-child {
    margin-top: 0;
}

.gauge-leg-s {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    margin-top: 2px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.gauge-leg-verm {
    background: linear-gradient(90deg, #e74c3c 60%, #c0392b);
}

.gauge-leg-teal {
    background: #0d9488;
}

.gauge-leg-roxo {
    background: #7c3aed;
}

.gauges-grid .gauge-plot {
    width: 100%;
    height: 332px;
    min-height: 332px;
    flex: 0 0 332px;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
    cursor: help;
    align-self: stretch;
}

.gauges-grid .gauge-plot-stack {
    position: relative;
    width: 100%;
    flex: 0 0 332px;
    min-height: 332px;
    align-self: stretch;
    box-sizing: border-box;
}

.gauges-grid .gauge-plot-stack .gauge-plot {
    align-self: stretch;
}

/* Plotly pode renderizar o centro só em Canvas (logs: innerHTML sem “Efetivado”). Marcação visível garantida sobre o mesmo slot. */
/* Centro só: não cobrir todo o velocímetro (evita marcador teal/canvas ficar atrás da camada HTML). */
.gauge-demais-efet-overlay {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: clamp(104px, 40%, 170px);
    height: clamp(68px, 20%, 96px);
    transform: translate(-50%, -50%);
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.gauge-demais-efet-overlay-inner {
    position: relative;
    text-align: center;
    width: 100%;
}

.gauge-demais-efet-lbl {
    display: block;
    font-size: 9px;
    color: #4a5568;
    font-weight: 600;
    line-height: 1.2;
}

.gauge-demais-efet-val {
    display: block;
    margin-top: 1px;
    font-size: 13px;
    font-weight: 700;
    color: #7c3aed;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.stat-card {
    background: white;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-left: 3px solid #4a5568;
}

.stat-card h3 {
    font-size: 0.7rem;
    color: #718096;
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 3px;
}

.stat-detail {
    font-size: 0.7rem;
    color: #a0aec0;
}

/* Tabs Compactas */
.visualization-tabs, .financial-sections {
    display: flex;
    gap: 4px;
    background: white;
    padding: 5px;
    border-radius: 6px;
    margin-top: 4px;
    margin-bottom: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    flex-wrap: wrap;
    justify-content: center;
}

.financial-sections a {
    text-decoration: none;
}

.tab-btn, .section-btn {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    color: #4a5568;
    transition: all 0.2s ease;
    font-size: 0.7rem;
}

.tab-btn:hover, .section-btn:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

.tab-btn.active, .section-btn.active {
    background: #4a5568;
    border-color: #4a5568;
    color: white;
}

.tab-content {
    display: none;
}

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

/* Charts Compactos */
.charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.chart-box, .chart-container {
    background: white;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.chart-box h3, .chart-container h3 {
    color: #2d3748;
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Tabelas Compactas */
.transacoes-table-container {
    background: white;
    border-radius: 6px;
    overflow-x: auto;
    overflow-y: visible;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.transacoes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    line-height: 1.2;
}

.transacoes-table th {
    background: #f7fafc;
    padding: 3px 5px;
    text-align: left;
    font-weight: 600;
    color: #4a5568;
    border-bottom: 2px solid #e2e8f0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.transacoes-table td {
    padding: 2px 5px;
    border-bottom: 1px solid #f7fafc;
    line-height: 1.2;
    vertical-align: middle;
}

.transacoes-table tbody tr:hover {
    background: #f7fafc;
}

/* Diferenciação visual por data de competência */
.transacoes-table tbody tr.competencia-past {
    background: #f8f9fa;
}

.transacoes-table tbody tr.competencia-today {
    background: #fff8e1;
}

.transacoes-table tbody tr.competencia-future {
    background: #e8f5e9;
}

/* Manter hover e seleção funcionando */
.transacoes-table tbody tr.competencia-past:hover {
    background: #e9ecef !important;
}

.transacoes-table tbody tr.competencia-today:hover {
    background: #ffe0b2 !important;
}

.transacoes-table tbody tr.competencia-future:hover {
    background: #c8e6c9 !important;
}

/* Badges Compactos */
.tipo-badge {
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    line-height: 1.2;
}

.tipo-receita {
    background: #c6f6d5;
    color: #22543d;
}

.tipo-despesa {
    background: #fed7d7;
    color: #742a2a;
}

.tipo-essencial {
    background: #c6f6d5;
    color: #22543d;
}

.tipo-nao-essencial {
    background: #fed7d7;
    color: #742a2a;
}

.tipo-construcao {
    background: #fefcbf;
    color: #744210;
}

.status-badge {
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.625rem;
    font-weight: 600;
    display: inline-block;
    line-height: 1.2;
}

.status-efetivada {
    background: #c6f6d5;
    color: #22543d;
}

.status-pendente {
    background: #feebc8;
    color: #7c2d12;
}

.status-atrasada {
    background: #fed7d7;
    color: #742a2a;
}

/* Valores */
.valor-cell {
    font-weight: 600;
    text-align: right;
}

.valor-receita {
    color: #38a169;
}

.valor-despesa {
    color: #e53e3e;
}

/* Ações Compactas */
.btn-acoes {
    display: flex;
    gap: 4px;
}

.btn-edit, .btn-duplicate, .btn-delete {
    padding: 4px 8px;
    border: none;
    border-radius: 3px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Botões de ação nas células da tabela */
.btn-action {
    padding: 2px 6px;
    border: none;
    border-radius: 3px;
    font-size: 0.813rem;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #4a5568;
    line-height: 1;
}

.btn-action:hover {
    background: #edf2f7;
}

.btn-action.edit {
    color: #4299e1;
}

.btn-action.edit:hover {
    background: #ebf8ff;
    color: #2b6cb0;
}

.btn-action.delete {
    color: #e53e3e;
}

.btn-action.delete:hover {
    background: #fff5f5;
    color: #c53030;
}

.btn-edit {
    background: #edf2f7;
    color: #4a5568;
}

.btn-edit:hover {
    background: #e2e8f0;
}

.btn-duplicate {
    background: #c6f6d5;
    color: #22543d;
}

.btn-duplicate:hover {
    background: #9ae6b4;
    color: #22543d;
}

.btn-delete {
    background: #fed7d7;
    color: #742a2a;
}

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

/* Filtros e Busca Compactos */
.transacoes-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.search-box {
    margin-bottom: 12px;
}

.search-box input {
    padding: 7px 12px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 0.813rem;
    width: 250px;
}

.search-box input:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
}

.filter-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 6px 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    color: #4a5568;
    transition: all 0.2s;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.filter-btn:hover {
    background: #edf2f7;
}

.filter-btn.active {
    background: #4a5568;
    color: white;
    border-color: #4a5568;
}

/* Barra de filtros ativos (sempre visível) */
.active-filters-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    padding: 10px 12px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

/* Banner de atrasadas (qualquer período) */
.atrasadas-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px 0;
    padding: 8px 12px;
    background: #fffbeb;
    border: 1px solid #f6ad55;
    border-radius: 8px;
    font-size: 0.813rem;
    color: #744210;
    line-height: 1.35;
}

.atrasadas-banner-text strong {
    color: #7b341e;
}

.atrasadas-banner-hint {
    color: #975a16;
    font-size: 0.75rem;
}

.atrasadas-banner-btn {
    margin-left: auto;
    flex-shrink: 0;
}

.active-filters-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #718096;
    white-space: nowrap;
}

.active-filters-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 4px 6px 4px 10px;
    background: #edf2f7;
    border: 1px solid #cbd5e0;
    border-radius: 999px;
    font-size: 0.75rem;
    color: #2d3748;
    line-height: 1.3;
}

.active-filter-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}

.active-filter-chip-remove {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #718096;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.active-filter-chip-remove:hover {
    background: #e2e8f0;
    color: #2d3748;
}

.active-filters-clear-all {
    flex-shrink: 0;
    padding: 4px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: white;
    color: #4a5568;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
}

.active-filters-clear-all:hover {
    background: #edf2f7;
}

.view-mode-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
}

.view-mode-btn {
    padding: 6px 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    color: #4a5568;
    transition: all 0.2s;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.view-mode-btn:hover {
    background: #edf2f7;
}

.view-mode-btn.active {
    background: #4a5568;
    color: white;
    border-color: #4a5568;
}

/* Cards Essenciais Compactos */
.essencial-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.essencial-card {
    background: white;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    gap: 12px;
    align-items: center;
}

.essencial-card.essencial {
    border-left: 3px solid #38a169;
}

.essencial-card.nao-essencial {
    border-left: 3px solid #e53e3e;
}

.essencial-card.construcao {
    border-left: 3px solid #d69e2e;
}

.essencial-card.nao-classificado {
    border-left: 3px solid #a0aec0;
}

.essencial-icon {
    font-size: 2rem;
}

.essencial-info h3 {
    font-size: 0.75rem;
    color: #718096;
    margin-bottom: 6px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.essencial-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 3px;
}

.essencial-detail {
    font-size: 0.75rem;
    color: #a0aec0;
}

.essencial-percent {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4a5568;
}

/* Previsão Compacta */
.previsao-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.previsao-card {
    background: white;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.previsao-card h3 {
    color: #718096;
    font-size: 0.75rem;
    margin-bottom: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.previsao-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 4px;
}

.previsao-count {
    font-size: 0.75rem;
    color: #a0aec0;
}

/* Barra de Ações em Massa Compacta */
.bulk-actions-bar {
    background: #4a5568;
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 0.813rem;
    position: sticky;
    top: calc(var(--jarvis-chrome-top, 70px) + 5px);
    z-index: 1000; /* Abaixo do menu principal mas acima do conteúdo */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bulk-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 500;
    flex: 1;
}

.bulk-info > div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.bulk-info span {
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: 600;
}

.btn-bulk-clear {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
}

.btn-bulk-clear:hover {
    background: rgba(255, 255, 255, 0.25);
}

.bulk-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
}

.bulk-buttons-group.bulk-buttons-primary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.bulk-buttons-group.bulk-buttons-danger {
    display: flex;
    margin-left: auto;
}

.bulk-actions-status {
    font-size: 0.75rem;
    font-weight: 600;
    color: #fefcbf !important;
    margin-left: 6px;
}

.btn-bulk {
    background: white;
    color: #4a5568;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.75rem;
    transition: all 0.2s;
}

.btn-bulk:hover {
    background: #edf2f7;
}

.btn-bulk-danger {
    background: #fc8181;
    color: white;
}

.btn-bulk-danger:hover {
    background: #e53e3e;
}

/* Modal Compacto */
.modal {
    display: none;
    position: fixed;
    z-index: var(--z-jarvis-modal, 3000);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}

.modal-content {
    background-color: white;
    margin: max(1rem, 3vh) auto;
    padding: 0;
    border-radius: 6px;
    /* Até ~920px ou quase a largura do viewport, o que for menor */
    width: min(100% - 1.5rem, min(920px, 94vw));
    max-width: min(100% - 1.5rem, min(920px, 94vw));
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.modal-compact {
    width: min(100% - 1.5rem, min(1040px, 93vw));
    max-width: min(100% - 1.5rem, min(1040px, 93vw));
    max-height: 90vh;
    max-height: min(90vh, 100dvh - 2rem);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.modal-compact.modal-compact--wide {
    width: min(100% - 1.25rem, min(1280px, 96vw));
    max-width: min(100% - 1.25rem, min(1280px, 96vw));
}

/* Cabeçalho fixo; miolo com scroll */
.modal-compact .modal-header-compact {
    flex-shrink: 0;
}

.modal-compact > .modal-body-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

.modal-compact > #lista-modelos-selecao {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 20px;
    box-sizing: border-box;
}

.modal-compact > .form-actions-compact {
    flex-shrink: 0;
}

/* Formulários filhos diretos do .modal-compact */
.modal-compact form#form-transacao,
.modal-compact form#form-modelo,
.modal-compact form#form-serie,
.modal-compact form#form-ocorrencia,
.modal-compact form#form-selecionar-mes,
.modal-compact form#form-parcelar,
.modal-compact form#form-rename-serie-agrupada {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

.modal-compact form#form-transacao > *:not(.form-actions-compact),
.modal-compact form#form-modelo > *:not(.form-actions-compact),
.modal-compact form#form-serie > *:not(.form-actions-compact),
.modal-compact form#form-ocorrencia > *:not(.form-actions-compact),
.modal-compact form#form-selecionar-mes > *:not(.form-actions-compact),
.modal-compact form#form-parcelar > *:not(.form-actions-compact),
.modal-compact form#form-rename-serie-agrupada > *:not(.form-actions-compact) {
    flex-shrink: 0;
}

.modal-compact .form-actions-compact {
    position: sticky;
    bottom: 0;
    background: #f7fafc;
    z-index: 10;
    margin-top: auto;
}

.modal-header-compact {
    background: #4a5568;
    color: white;
    padding: 12px 20px;
    border-radius: 6px 6px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header-compact h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.close {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.8;
}

.close:hover {
    opacity: 1;
}

/* Painel «Lançamentos desta série» no modal de transação */
.grupo-serie-table-scroll {
    max-height: min(45vh, 280px);
    overflow-x: auto;
    overflow-y: auto;
    margin-top: 4px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.grupo-serie-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.grupo-serie-table th,
.grupo-serie-table td {
    padding: 6px 8px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #e2e8f0;
}

.grupo-serie-table th {
    background: #edf2f7;
    color: #4a5568;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.grupo-serie-table tbody tr:hover:not(.grupo-serie-linha-atual) {
    background: #f7fafc;
}

.grupo-serie-linha-atual {
    background: #e0f2fe;
}

.grupo-serie-linha-atual td {
    border-color: #bae6fd;
}

.btn-grupo-serie-editar {
    background: none;
    border: none;
    color: #2563eb;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 2px 0;
    text-decoration: underline;
    font-family: inherit;
}

.btn-grupo-serie-editar:hover {
    color: #1d4ed8;
}

#grupo-serie-link-wrap a {
    color: #2563eb;
}

#grupo-serie-panel,
.grupo-serie-list-wrap {
    min-width: 0;
}

.grupo-serie-editor-wrap {
    margin-bottom: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;
}

.grupo-serie-total {
    line-height: 1.35;
}

/* Modal sem .modal-compact (transferência, backup) */
.modal > .modal-content:not(.modal-compact):not(.modal-categorias-content) {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    max-height: min(90vh, 100dvh - 2rem);
    width: min(100% - 1.5rem, min(1040px, 93vw));
    max-width: min(100% - 1.5rem, min(1040px, 93vw));
    overflow: hidden;
    box-sizing: border-box;
}

.modal > .modal-content:not(.modal-compact):not(.modal-categorias-content) > .modal-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #4a5568;
    color: white;
    border-radius: 6px 6px 0 0;
}

.modal > .modal-content:not(.modal-compact):not(.modal-categorias-content) > .modal-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.modal > .modal-content:not(.modal-compact):not(.modal-categorias-content) > .modal-header .close {
    color: white;
}

.modal > .modal-content:not(.modal-compact):not(.modal-categorias-content) > .modal-body-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 20px 20px;
    box-sizing: border-box;
}

.modal > .modal-content:not(.modal-compact):not(.modal-categorias-content) > form#form-transferencia {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

.modal > .modal-content:not(.modal-compact):not(.modal-categorias-content) > form#form-transferencia > .form-actions-compact {
    flex-shrink: 0;
    margin-top: auto;
}

/* Sankey: categorias (página não carrega financas-styles.css) */
.modal-content.modal-categorias-content {
    width: min(100% - 1.5rem, min(1040px, 93vw));
    max-width: min(100% - 1.5rem, min(1040px, 93vw));
    max-height: 90vh;
    max-height: min(90vh, 100dvh - 2rem);
    margin: max(1rem, 3vh) auto;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

.form-grid-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 20px;
}

.form-group-compact {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group-compact label {
    font-size: 0.813rem;
    font-weight: 500;
    color: #4a5568;
}

.form-group-compact input,
.form-group-compact select,
.form-group-compact textarea {
    padding: 7px 10px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 0.813rem;
}

.form-group-compact input:focus,
.form-group-compact select:focus,
.form-group-compact textarea:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1);
}

.form-actions-compact {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 15px 20px;
    background: #f7fafc;
    border-top: 1px solid #e2e8f0;
}

.btn-save-compact {
    background: #4a5568;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.813rem;
}

.btn-save-compact:hover {
    background: #2d3748;
}

.btn-cancel-compact {
    background: white;
    color: #4a5568;
    padding: 8px 16px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.813rem;
}

.btn-cancel-compact:hover {
    background: #edf2f7;
}

/* Checkbox Compacto */
.checkbox-container {
    display: inline-block;
    position: relative;
    cursor: pointer;
    user-select: none;
}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    height: 16px;
    width: 16px;
    background-color: white;
    border: 2px solid #cbd5e0;
    border-radius: 3px;
    display: inline-block;
}

.checkbox-container:hover .checkmark {
    border-color: #4a5568;
}

.checkbox-container input:checked ~ .checkmark {
    background-color: #4a5568;
    border-color: #4a5568;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

.checkbox-container .checkmark:after {
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Tooltips Compactos */
[title]:hover::before {
    font-size: 0.75rem;
    padding: 6px 10px;
}

/* Botão Flutuante Adicionar (Tamanho Compacto Padronizado) */
.floating-add-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: #4a5568;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-add-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: #2d3748;
}

.floating-add-btn:active {
    transform: translateY(-1px) scale(1.0);
}

.floating-add-btn::before {
    content: '+';
    font-size: 28px;
    line-height: 1;
}

/* Tooltip para o botão flutuante */
.floating-add-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.floating-add-btn:hover::after {
    opacity: 1;
}

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

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-row {
        grid-template-columns: 1fr;
    }
    
    /* Ocultar colunas menos importantes na tabela */
    .transacoes-table th:nth-child(4),
    .transacoes-table td:nth-child(4),
    .transacoes-table th:nth-child(6),
    .transacoes-table td:nth-child(6),
    .transacoes-table th:nth-child(7),
    .transacoes-table td:nth-child(7) {
        display: none;
    }
    
    .transacoes-table-container {
        overflow-x: auto;
    }
    
    .container {
        padding: 12px;
    }
    
    .control-group {
        width: 100%;
    }
    
    .control-group select,
    .control-group input {
        width: 100%;
    }
}

/* Mobile (480px - 768px) */
@media (max-width: 768px) {
    body {
        font-size: 13px;
    }
    
    .container {
        padding: 10px;
    }
    
    /* Botão flutuante menor em mobile */
    .floating-add-btn {
        bottom: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    
    .floating-add-btn::before {
        font-size: 24px;
    }
    
    .floating-add-btn::after {
        display: none; /* Sem tooltip em mobile */
    }
    
    /* Cards de Estatísticas - 1 coluna */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Empilha os três gauges; fluxo natural (sem “buraco” entre título e gráfico) */
    .gauges-grid {
        grid-template-columns: 1fr;
        align-items: stretch;
        overflow-x: visible;
        gap: 10px;
    }

    .gauges-grid .gauge-cell {
        min-height: 0;
        justify-content: flex-start;
    }

    .gauges-grid .gauge-head {
        font-size: 0.72rem;
    }

    .gauges-grid .gauge-plot {
        height: 332px;
        min-height: 332px;
        flex: 0 0 332px;
    }

    .gauges-grid .gauge-plot-stack {
        flex: 0 0 332px;
        min-height: 332px;
    }

    /* Tabela convertida para cards em mobile */
    .transacoes-table-container {
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }
    
    .transacoes-table,
    .transacoes-table thead,
    .transacoes-table tbody,
    .transacoes-table th,
    .transacoes-table td,
    .transacoes-table tr {
        display: block;
    }
    
    .transacoes-table thead {
        display: none;
    }
    
    /* ========== SEPARADORES DE DATA (AGRUPAMENTO) EM MOBILE ========== */
    .transacoes-table tbody tr.group-header {
        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
        border: none;
        border-radius: 10px;
        margin: 16px 0 10px 0;
        padding: 14px 16px;
        box-shadow: 0 3px 10px rgba(30, 64, 175, 0.25);
    }
    
    .transacoes-table tbody tr.group-header:first-child {
        margin-top: 8px;
    }
    
    .transacoes-table tbody tr.group-header td {
        padding: 0;
        color: white;
        font-size: 0.95rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .transacoes-table tbody tr.group-header td:before {
        display: none;
    }
    
    .transacoes-table tbody tr.group-header .expand-icon {
        font-size: 0.8rem;
        opacity: 0.85;
        color: white;
    }
    
    .transacoes-table tbody tr.group-header .group-stats {
        font-size: 0.8rem;
        font-weight: 500;
        opacity: 0.9;
        margin-left: auto;
    }
    
    .transacoes-table tbody tr.group-header .group-stats span {
        color: inherit !important;
    }
    
    /* Níveis de agrupamento com cores distintas */
    .transacoes-table tbody tr.group-header.group-level-1 {
        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    }
    
    .transacoes-table tbody tr.group-header.group-level-2 {
        background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
        margin: 12px 0 8px 0;
        padding: 12px 14px;
        box-shadow: 0 2px 8px rgba(13, 148, 136, 0.25);
    }
    
    .transacoes-table tbody tr.group-header.group-level-3 {
        background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
        margin: 10px 0 8px 0;
        padding: 10px 12px;
        font-size: 0.9rem;
        box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25);
    }
    
    /* ========== CARDS DE TRANSAÇÃO REDESENHADOS ========== */
    .transacoes-table tbody tr:not(.group-header) {
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        margin-bottom: 10px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        position: relative;
        min-height: auto;
        line-height: 1.35;
    }
    
    .transacoes-table tbody tr.competencia-past:not(.group-header) {
        background: #fafbfc;
        border-color: #e5e7eb;
    }
    
    .transacoes-table tbody tr.competencia-today:not(.group-header) {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        border-color: #fcd34d;
        border-width: 2px;
    }
    
    .transacoes-table tbody tr.competencia-future:not(.group-header) {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        border-color: #6ee7b7;
    }
    
    .transacoes-table td {
        border: none;
        padding: 0;
        text-align: left;
        position: static;
        margin-bottom: 0;
        line-height: 1.35;
    }
    
    /* Ocultar labels automáticos em mobile */
    .transacoes-table td:before {
        display: none;
    }
    
    /* ===== LINHA 1: Checkbox à esquerda, Categoria no centro, Ações à direita ===== */
    .transacoes-table td:first-child {
        position: absolute;
        top: 16px;
        left: 16px;
        padding: 0;
        width: auto;
    }
    
    .transacoes-table td:nth-child(2) {
        position: absolute;
        top: 16px;
        left: 52px;
        padding: 0;
        width: auto;
    }
    
    .transacoes-table td:last-child {
        position: absolute;
        top: 12px;
        right: 12px;
        padding: 0;
        width: auto;
    }
    
    /* Categoria como título principal do card */
    .transacoes-table td[data-label="Categ."] {
        display: block;
        padding-left: 40px;
        padding-right: 70px;
        font-size: 1rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Subcategoria discreta abaixo da categoria */
    .transacoes-table td[data-label="Subcat."] {
        display: block;
        padding-left: 40px;
        font-size: 0.8rem;
        font-weight: 500;
        color: #64748b;
        margin-bottom: 8px;
    }
    
    /* Subcategoria "Sem subcategoria" menos intrusiva */
    .transacoes-table td[data-label="Subcat."]:empty,
    .transacoes-table td[data-label="Subcat."] .subcat-none {
        display: none;
    }
    
    /* ===== LINHA 2: Descrição ===== */
    .transacoes-table td[data-label="Descrição"] {
        display: block;
        padding-left: 40px;
        padding-right: 16px;
        font-size: 0.875rem;
        color: #475569;
        line-height: 1.45;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    
    /* ===== LINHA 3: Valor | Status | Data ===== */
    .transacoes-table td.valor-cell {
        display: inline-block;
        padding-left: 40px;
        font-size: 1.35rem;
        font-weight: 800;
        border: none;
        margin: 0;
        padding-top: 10px;
        padding-bottom: 4px;
        border-top: 1px solid #e2e8f0;
        width: calc(100% - 40px);
        position: relative;
    }
    
    /* Status ao lado do valor */
    .transacoes-table td[data-label="Status"] {
        position: absolute;
        right: 16px;
        bottom: 16px;
        padding: 0;
        width: auto;
    }
    
    .transacoes-table td[data-label="Status"] .status-badge {
        font-size: 0.75rem;
        padding: 4px 10px;
        white-space: nowrap;
        border-radius: 8px;
        font-weight: 600;
    }
    
    /* Data de competência discreta */
    .transacoes-table td[data-label="Comp."] {
        display: inline-block;
        position: absolute;
        left: 56px;
        bottom: 20px;
        font-size: 0.75rem;
        color: #64748b;
        margin-left: 12px;
    }
    
    /* Ocultar campos menos importantes em mobile */
    .transacoes-table td[data-label="Venc."],
    .transacoes-table td[data-label="Tipo"],
    .transacoes-table td[data-label="Conta"],
    .transacoes-table td[data-label="Sér."] {
        display: none;
    }
    
    /* Controles e Filtros - Stack vertical */
    .controls,
    .stats-container,
    .budget-chips-panel {
        margin-bottom: 10px;
    }
    
    /* Headers e conteúdo em mobile - padding ajustado */
    .controls-header,
    .stats-header,
    .budget-chips-header {
        padding: 8px 12px;
    }
    
    .controls-content {
        padding: 8px 10px;
        gap: 8px;
        flex-direction: column;
    }
    
    .stats-content,
    .budget-chips-content {
        padding: 8px 10px;
    }
    
    .control-group {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 5px;
    }
    
    .control-group label {
        font-size: 0.813rem;
        font-weight: 600;
        color: #2d3748;
    }
    
    .control-group select,
    .control-group input {
        width: 100%;
        padding: 12px 14px;
        font-size: 0.938rem;
        min-height: 48px;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
    }
    
    .controls .btn-primary,
    .controls .btn-secondary {
        width: 100%;
        padding: 14px 16px;
        min-height: 48px;
        font-size: 0.938rem;
        margin-top: 5px;
    }
    
    #filtros-data-personalizada {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin-top: 15px !important;
        padding: 15px;
        background: #f7fafc;
        border-radius: 8px;
    }
    
    #filtros-data-personalizada .control-group {
        margin-bottom: 0;
    }
    
    /* Busca - Full width */
    .search-box {
        width: 100%;
    }
    
    .search-box input {
        width: 100%;
        padding: 10px 12px;
        font-size: 0.875rem;
        min-height: 44px;
    }
    
    /* Filtros Avançados - Accordion */
    .advanced-filters {
        margin: 10px 0;
        padding: 12px;
    }
    
    .filter-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .filter-group input,
    .filter-group select {
        min-height: 44px;
        font-size: 0.875rem;
    }
    
    /* Botões de Filtro */
    .filter-buttons {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .filter-btn {
        padding: 10px 14px;
        font-size: 0.813rem;
        min-height: 44px;
        flex: 1 1 auto;
        min-width: calc(50% - 4px);
    }
    
    
    /* Modo de Visualização */
    .view-mode-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 15px 0;
    }
    
    .view-mode-btn {
        flex: 1 1 auto;
        min-width: calc(33.333% - 6px);
        padding: 10px 12px;
        min-height: 44px;
        font-size: 0.813rem;
    }
    
    /* Barra de Ações em Massa - Stack vertical */
    .bulk-actions-bar {
        flex-direction: column;
        gap: 15px;
        top: 40px;
        padding: 16px;
        font-size: 0.875rem;
        border-radius: 12px;
    }
    
    .bulk-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        line-height: 1.5;
    }
    
    .bulk-info > div {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .bulk-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    
    .bulk-buttons-group.bulk-buttons-primary {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
    }
    
    .bulk-buttons-group.bulk-buttons-danger {
        margin-left: 0;
        width: 100%;
    }
    
    .bulk-buttons-group.bulk-buttons-danger .btn-bulk {
        width: 100%;
    }
    
    .btn-bulk {
        width: 100%;
        padding: 12px 14px;
        min-height: 48px;
        font-size: 0.875rem;
        white-space: normal;
        word-wrap: break-word;
    }
    
    .btn-bulk-clear {
        width: 100%;
        padding: 12px;
        min-height: 48px;
        font-size: 0.875rem;
    }
    
    /* Tabs de Visualização - Scroll horizontal */
    .visualization-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        flex-wrap: nowrap;
        padding: 5px;
        gap: 8px;
    }
    
    .visualization-tabs::-webkit-scrollbar {
        height: 4px;
    }
    
    .tab-btn {
        padding: 10px 16px;
        font-size: 0.813rem;
        min-height: 44px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* Modais - full viewport (padding quebraria height:100vh no conteúdo) */
    .modal {
        padding: 0;
    }
    
    .modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    .modal-compact {
        width: 100%;
        max-width: 100%;
        margin: 0;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    .modal-header-compact {
        padding: 16px;
        flex-shrink: 0;
    }
    
    .modal-header-compact h2 {
        font-size: 1.125rem;
    }
    
    /* Formulário do modal com scroll */
    .modal-compact > .modal-body-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 16px;
    }

    .modal-compact > #lista-modelos-selecao {
        padding: 12px 16px;
    }

    .modal-compact form#form-transacao,
    .modal-compact form#form-modelo,
    .modal-compact form#form-serie,
    .modal-compact form#form-ocorrencia,
    .modal-compact form#form-selecionar-mes,
    .modal-compact form#form-parcelar,
    .modal-compact form#form-rename-serie-agrupada {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow-y: auto;
        min-height: 0; /* Importante para permitir scroll em flex containers */
        padding: 0;
    }
    
    .form-grid-compact {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 20px 16px;
        flex-shrink: 0;
    }
    
    /* Container para os campos do formulário */
    .modal-compact form#form-transacao > *:not(.form-actions-compact),
    .modal-compact form#form-modelo > *:not(.form-actions-compact),
    .modal-compact form#form-serie > *:not(.form-actions-compact),
    .modal-compact form#form-ocorrencia > *:not(.form-actions-compact),
    .modal-compact form#form-selecionar-mes > *:not(.form-actions-compact),
    .modal-compact form#form-parcelar > *:not(.form-actions-compact),
    .modal-compact form#form-rename-serie-agrupada > *:not(.form-actions-compact) {
        flex-shrink: 0;
    }

    .modal > .modal-content:not(.modal-compact):not(.modal-categorias-content) > .modal-body-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 12px 16px 20px;
    }

    .modal-content.modal-categorias-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
    
    .form-group-compact {
        margin-bottom: 0;
    }
    
    .form-group-compact label {
        font-size: 0.875rem;
        margin-bottom: 6px;
    }
    
    .form-group-compact input,
    .form-group-compact select,
    .form-group-compact textarea {
        min-height: 48px;
        font-size: 1rem;
        padding: 12px 14px;
        width: 100%;
    }
    
    /* Garantir que os botões fiquem fixos no final */
    .modal-compact .form-actions-compact {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
        flex-shrink: 0;
        border-top: 1px solid #e2e8f0;
        background: #f7fafc;
        position: sticky;
        bottom: 0;
        z-index: 10;
        margin-top: auto;
    }
    
    .btn-save-compact,
    .btn-cancel-compact {
        width: 100%;
        min-height: 48px;
        padding: 14px;
        font-size: 1rem;
    }
    
    /* Cards Essenciais */
    .essencial-cards {
        grid-template-columns: 1fr;
    }
    
    .essencial-card {
        flex-direction: row;
        text-align: left;
    }
    
    /* Charts */
    .charts-row {
        grid-template-columns: 1fr;
    }
    
    .chart-box,
    .chart-container {
        padding: 12px;
    }
    
    /* Backup responsivo */
    .backup-tabs {
        flex-direction: column;
    }
    
    .backup-tab-btn {
        border-bottom: none;
        border-right: 2px solid transparent;
        text-align: left;
        min-height: 44px;
    }
    
    .backup-tab-btn.active {
        border-bottom: none;
        border-right-color: #007bff;
    }
    
    .backup-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .backup-actions-item {
        width: 100%;
        justify-content: flex-end;
    }
    
    .btn-restore {
        min-height: 44px;
        padding: 10px 16px;
    }
    
    /* Budget chips responsivo */
    .budget-chips-content {
        max-height: 200px;
    }
    
    .budget-chip {
        min-width: 100%;
    }
    
    /* Categoria details responsivo */
    .categoria-details-table {
        font-size: 0.75rem;
    }
    
    .categoria-details-table th,
    .categoria-details-table td {
        padding: 8px;
    }
    
    /* Section buttons */
    .section-btn {
        padding: 10px 14px;
        font-size: 0.813rem;
        min-height: 44px;
    }
    
    /* Container geral */
    .container {
        padding: 12px;
    }
    
    /* Filtros salvos */
    .saved-filters-list {
        flex-direction: column;
    }
    
    .saved-filter-item {
        width: 100%;
        justify-content: space-between;
    }
    
    /* Melhorar espaçamento geral */
    .dashboard {
        gap: 20px;
    }
    
    .stats-grid {
        gap: 12px;
    }
    
    .transacoes-controls {
        margin-bottom: 20px;
        gap: 12px;
    }
    
    .main-menu {
        gap: 20px;
    }
    
    /* Budget chips panel - estilos unificados acima */
    
    /* Charts */
    .chart-box,
    .chart-container {
        margin-bottom: 20px;
    }
    
    /* Tabs */
    .visualization-tabs {
        margin-top: 4px;
        margin-bottom: 4px;
    }
    
    /* Seções com mais espaço */
    .tab-content {
        padding-top: 10px;
    }
    
    /* Melhorar legibilidade - mais compacto */
    .transacoes-table td {
        font-size: 0.813rem;
        line-height: 1.4;
    }
    
    .transacoes-table td:before {
        font-size: 0.7rem;
        line-height: 1.3;
    }
    
    /* Reduzir espaçamento entre cards */
    .transacoes-table tbody tr {
        margin-bottom: 10px;
    }
}

/* Mobile pequeno (≤480px) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    
    .container {
        padding: 8px;
    }
    
    /* ========== CARDS DE TRANSAÇÃO AJUSTADOS PARA MOBILE PEQUENO ========== */
    .transacoes-table tbody tr:not(.group-header) {
        padding: 12px;
        margin-bottom: 8px;
        border-radius: 10px;
    }
    
    /* Separadores de grupo menores */
    .transacoes-table tbody tr.group-header {
        padding: 10px 12px;
        margin: 12px 0 8px 0;
        border-radius: 8px;
    }
    
    .transacoes-table tbody tr.group-header td {
        font-size: 0.85rem;
    }
    
    .transacoes-table tbody tr.group-header .group-stats {
        font-size: 0.7rem;
    }
    
    /* Posicionamento mais compacto */
    .transacoes-table td:first-child {
        top: 12px;
        left: 12px;
    }
    
    .transacoes-table td:nth-child(2) {
        top: 12px;
        left: 44px;
    }
    
    .transacoes-table td:last-child {
        top: 8px;
        right: 8px;
    }
    
    /* Categoria menor */
    .transacoes-table td[data-label="Categ."] {
        padding-left: 36px;
        padding-right: 60px;
        font-size: 0.9rem;
    }
    
    /* Subcategoria mais discreta */
    .transacoes-table td[data-label="Subcat."] {
        padding-left: 36px;
        font-size: 0.75rem;
        margin-bottom: 6px;
    }
    
    /* Descrição menor */
    .transacoes-table td[data-label="Descrição"] {
        padding-left: 36px;
        padding-right: 12px;
        font-size: 0.8rem;
        margin-bottom: 8px;
    }
    
    /* Valor um pouco menor mas ainda proeminente */
    .transacoes-table td.valor-cell {
        padding-left: 36px;
        font-size: 1.15rem;
        padding-top: 8px;
        width: calc(100% - 36px);
    }
    
    /* Status menor */
    .transacoes-table td[data-label="Status"] {
        right: 12px;
        bottom: 12px;
    }
    
    .transacoes-table td[data-label="Status"] .status-badge {
        font-size: 0.65rem;
        padding: 3px 8px;
    }
    
    /* Data de competência */
    .transacoes-table td[data-label="Comp."] {
        left: 48px;
        bottom: 16px;
        font-size: 0.7rem;
    }
    
    
    /* Barra de ações em massa - 1 coluna */
    .bulk-buttons {
        grid-template-columns: 1fr;
    }
    
    /* Tabs ainda menores */
    .tab-btn {
        padding: 8px 12px;
        font-size: 0.75rem;
        min-height: 44px;
    }
    
    /* Modais em mobile pequeno - full screen */
    .modal-content,
    .modal-compact {
        width: 100%;
        max-width: 100%;
        margin: 0;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        overflow: hidden;
    }

    .modal-content.modal-categorias-content {
        overflow-x: hidden;
        overflow-y: auto;
    }
    
    /* Cards de estatísticas mais compactos */
    .stat-card {
        padding: 12px;
    }
    
    .stat-value {
        font-size: 1.1rem;
    }
    
    /* Controles mais compactos - padding removido, mantém padding: 0 do estilo base */
    
    .control-group select,
    .control-group input {
        padding: 8px;
        font-size: 0.813rem;
        min-height: 44px;
    }
    
    /* Botões menores mas ainda tocáveis */
    .btn-primary,
    .btn-secondary {
        padding: 10px 12px;
        font-size: 0.813rem;
        min-height: 44px;
    }
    
    /* Checkboxes maiores para touch */
    .checkbox-container {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .checkmark {
        width: 24px;
        height: 24px;
    }
    
    /* Badges menores */
    .tipo-badge, .status-badge {
        font-size: 0.65rem;
        padding: 2px 4px;
    }
    
    /* Botões de ação compactos mas tocáveis */
    .btn-action {
        min-width: 36px;
        min-height: 36px;
        padding: 6px;
        font-size: 0.9rem;
        margin: 0 2px;
    }
    
    .btn-edit, .btn-duplicate, .btn-delete {
        min-width: 36px;
        min-height: 36px;
        padding: 6px;
        font-size: 0.9rem;
    }
    
    /* Espaçamento entre elementos clicáveis */
    .transacoes-table tbody tr {
        margin-bottom: 4px;
    }
    
    .filter-btn {
        margin-bottom: 8px;
    }
    
    /* Aumentar área de toque em todos os botões */
    button,
    .btn-primary,
    .btn-secondary,
    .filter-btn,
    .tab-btn,
    .view-mode-btn,
    .btn-bulk,
    .btn-bulk-clear {
        min-height: 44px;
        touch-action: manipulation; /* Remove delay de toque duplo */
    }
    
    /* Espaçamento adicional entre elementos interativos */
    .transacoes-controls > * + * {
        margin-top: 10px;
    }
    
    .filter-buttons .filter-btn + .filter-btn {
        margin-left: 0;
    }
    
    /* Melhorar contraste e legibilidade */
    .transacoes-table td {
        line-height: 1.5;
    }
    
    .transacoes-table td:before {
        line-height: 1.5;
    }
}

/* Importar do financas-styles.css apenas os estilos necessários */
.categoria-details, .essencial-details, .previsao-section {
    background: white;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.categoria-details h3, .essencial-details h3 {
    color: #2d3748;
    margin-bottom: 12px;
    font-size: 0.938rem;
    font-weight: 600;
}

.categoria-details-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.813rem;
}

.categoria-details-table th,
.categoria-details-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #f7fafc;
}

.categoria-details-table th {
    background: #f7fafc;
    font-weight: 600;
    color: #4a5568;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.categoria-details-table tbody tr:hover {
    background: #f7fafc;
}

.progress-bar {
    position: relative;
    width: 100%;
    height: 24px;
    background: #edf2f7;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #4a5568;
    transition: width 0.3s ease;
}

.progress-fill.progress-essencial {
    background: #38a169;
}

.progress-fill.progress-nao-essencial {
    background: #e53e3e;
}

.progress-fill.progress-construcao {
    background: #d69e2e;
}

.progress-fill.progress-nao-classificado {
    background: #a0aec0;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    color: #2d3748;
    font-size: 0.75rem;
}

.row-selected {
    background: #ebf8ff !important;
    border-left: 2px solid #4299e1;
}

.transacao-pendente {
    /* Transações não efetivadas: destaque normal (sem transparência) */
    opacity: 1;
    font-weight: 500;
}

.transacao-efetivada {
    /* Transações já efetivadas: mais discretas com transparência */
    opacity: 0.5;
}

.transacoes-table tbody tr.transacao-efetivada.demais-despesa-efetivada-marca {
    /* Demais já efetivada: mantém grupo visível sob o gauge Demais sem confundir com atrasada */
    opacity: 0.72;
    border-left: 3px solid #047857;
    box-sizing: border-box;
}

.transacao-atrasada {
    /* Transações atrasadas: destaque com cor de alerta */
    background: #fff5f5 !important;
    border-left: 2px solid #fc8181;
    opacity: 1 !important;
    font-weight: 500;
}

.essencial-controls {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.gerenciar-classificacao {
    text-align: center;
    padding: 15px;
}

.modal-confirm {
    display: none;
    position: fixed;
    z-index: var(--z-jarvis-modal-confirm, 3100);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}

.modal-confirm-content {
    background: white;
    margin: max(8vh, 2rem) auto;
    padding: 20px;
    border-radius: 6px;
    width: min(100% - 2rem, min(560px, 90vw));
    max-width: min(100% - 2rem, min(560px, 90vw));
    max-height: 85vh;
    max-height: min(85vh, 100dvh - 2rem);
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.modal-confirm-content h3 {
    margin-bottom: 12px;
    font-size: 1.1rem;
    color: #2d3748;
}

.modal-confirm-content #confirm-message {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.modal-confirm-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.modal-confirm-buttons .btn-confirm,
.modal-confirm-buttons .btn-cancel {
    min-width: min(100%, 140px);
    flex: 1 1 auto;
}

.btn-confirm, .btn-cancel {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.813rem;
}

.btn-confirm {
    background: #e53e3e;
    color: white;
}

.btn-confirm:hover {
    background: #c53030;
}

.btn-cancel {
    background: #edf2f7;
    color: #4a5568;
}

.btn-cancel:hover {
    background: #e2e8f0;
}

@media (max-width: 480px) {
    .modal-confirm-content {
        margin: 0.75rem auto;
        width: min(100% - 1rem, min(560px, 92vw));
        max-width: min(100% - 1rem, min(560px, 92vw));
    }

    .modal-confirm-buttons {
        flex-direction: column;
    }

    .modal-confirm-buttons .btn-confirm,
    .modal-confirm-buttons .btn-cancel {
        width: 100%;
        min-width: 0;
    }
}

.financial-section {
    display: none;
}

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

/* Budget Panel - estilos unificados acima */

.budget-chips-content::-webkit-scrollbar {
    width: 6px;
}

.budget-chips-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.budget-chips-content::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

.budget-chip {
    display: inline-flex;
    flex-direction: column;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 140px;
    transition: all 0.2s ease;
}

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

.budget-chip.ok {
    border-color: #27ae60;
    background: linear-gradient(135deg, #ffffff 0%, #f0fff4 100%);
}

.budget-chip.alerta {
    border-color: #f39c12;
    background: linear-gradient(135deg, #ffffff 0%, #fffbf0 100%);
}

.budget-chip.excedido {
    border-color: #e74c3c;
    background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
}

.budget-chip-category {
    font-size: 0.75rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
}

.budget-chip-bar-container {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.budget-chip-bar {
    height: 100%;
    transition: width 0.3s ease;
}

.budget-chip-bar.ok {
    background: #27ae60;
}

.budget-chip-bar.alerta {
    background: #f39c12;
}

.budget-chip-bar.excedido {
    background: #e74c3c;
}

.budget-chip-info {
    font-size: 0.7rem;
    color: #7f8c8d;
    display: flex;
    justify-content: space-between;
}

.budget-chip-percent {
    font-weight: 600;
}

/* Budget content collapsed - estilos unificados acima */

/* Filtros Avançados */
.advanced-filters {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 10px;
}

.filter-row:last-child {
    margin-bottom: 0;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.filter-group input,
.filter-group select {
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 13px;
    background: white;
    transition: all 0.2s ease;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.btn-clear-filters {
    background: #dc3545;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: flex-end;
    margin-top: 20px;
}

.btn-clear-filters:hover {
    background: #c82333;
    transform: translateY(-1px);
}

/* Filtros Salvos */
.saved-filters {
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 8px;
    padding: 12px;
    margin: 10px 0;
}

.saved-filters label {
    font-size: 12px;
    font-weight: 600;
    color: #1976d2;
    margin-bottom: 8px;
    display: block;
}

.saved-filters-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.saved-filter-item {
    background: white;
    border: 1px solid #90caf9;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    color: #1976d2;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.saved-filter-item:hover {
    background: #1976d2;
    color: white;
}

.saved-filter-item .remove-filter {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 10px;
    padding: 0;
    margin-left: 5px;
}

.saved-filter-item .remove-filter:hover {
    color: #ffcdd2;
}

/* Indicador de Filtros Ativos */
.filter-indicator {
    background: #28a745;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 5px;
}

/* Melhorias na busca */
.search-box {
    position: relative;
}

.search-box input {
    padding-right: 40px;
}

.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.search-suggestion {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f4;
    font-size: 13px;
    transition: background 0.2s ease;
}

.search-suggestion:hover {
    background: #f8f9fa;
}

.search-suggestion:last-child {
    border-bottom: none;
}

.search-suggestion .highlight {
    background: #fff3cd;
    padding: 1px 2px;
    border-radius: 2px;
}


/* Responsivo para filtros avançados */
@media (max-width: 768px) {
    .filter-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .saved-filters-list {
        flex-direction: column;
    }
    
    .saved-filter-item {
        justify-content: space-between;
    }
}


/* Estilos para Modal de Backup */
.backup-tabs {
    display: flex;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 20px;
}

.backup-tab-btn {
    background: none;
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.backup-tab-btn:hover {
    color: #495057;
    background: #f8f9fa;
}

.backup-tab-btn.active {
    color: #007bff;
    border-bottom-color: #007bff;
}

.backup-tab-content {
    display: none;
}

.backup-tab-content.active {
    display: block;
}

.backup-info {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.backup-info h3 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 16px;
}

.backup-info p {
    color: #495057;
    margin-bottom: 15px;
    line-height: 1.5;
}

.backup-info ul {
    color: #495057;
    padding-left: 20px;
}

.backup-info li {
    margin-bottom: 5px;
}

.backup-actions {
    text-align: center;
    padding: 20px 0;
}

.backup-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

.backup-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f1f3f4;
    transition: background 0.2s ease;
}

.backup-item:hover {
    background: #f8f9fa;
}

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

.backup-item-info {
    flex: 1;
}

.backup-filename {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.backup-details {
    font-size: 12px;
    color: #6c757d;
}

.backup-actions-item {
    display: flex;
    gap: 10px;
}

.btn-restore {
    background: #28a745;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-restore:hover {
    background: #218838;
}

.backup-stats {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e9ecef;
}

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

.stat-label {
    font-weight: 600;
    color: #495057;
}

.stat-value {
    color: #2c3e50;
    font-weight: 700;
}

.loading {
    text-align: center;
    padding: 40px;
    color: #6c757d;
    font-style: italic;
}

/* Responsivo para backup */
@media (max-width: 768px) {
    .backup-tabs {
        flex-direction: column;
    }
    
    .backup-tab-btn {
        border-bottom: none;
        border-right: 2px solid transparent;
    }
    
    .backup-tab-btn.active {
        border-bottom: none;
        border-right-color: #007bff;
    }
    
    .backup-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .backup-actions-item {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Transações: pré-visualização agrupar série, índice análises, coluna série */
.agrupar-serie-preview-wrap {
    margin-bottom: 16px;
    padding: 12px;
    background: #f7fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.agrupar-serie-preview {
    max-height: 200px;
    overflow: auto;
}

.agrupar-serie-preview-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}

.agrupar-serie-preview-table th,
.agrupar-serie-preview-table td {
    border-bottom: 1px solid #edf2f7;
    padding: 4px 6px;
    text-align: left;
}

.agrupar-serie-preview-totais {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: #4a5568;
}

.analises-toc {
    position: sticky;
    top: 44px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.96);
    padding: 10px 0;
    margin: 0 0 16px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.analises-toc a {
    color: #3498db;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
}

.analises-toc a:hover {
    text-decoration: underline;
}

.serie-cell {
    text-align: center;
    width: 40px;
}

.serie-indicador {
    cursor: help;
    font-size: 1rem;
    opacity: 0.9;
}

/* Séries: filtro e destaque na URL */
.series-filtros-tipo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.series-filtro-btn {
    padding: 8px 14px;
    border: 1px solid #cbd5e0;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
}

.series-filtro-btn.active {
    background: #3498db;
    color: #fff;
    border-color: #3498db;
}

.serie-row-highlight {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

/* Próximas transações: linha projetada a partir de série (sem lançamento ainda) */
.proxima-previsao-serie td {
    background: rgba(237, 233, 254, 0.75);
}

.proximas-table .badge-prev-serie {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 4px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 600;
    vertical-align: middle;
    background: #6366f1;
    color: #fff;
}

.filtro-serie-chip {
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 12px;
    padding: 10px 14px;
    background: #ebf8ff;
    border: 1px solid #90cdf4;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #2c5282;
}

.filtro-serie-chip #filtro-serie-chip-limpar {
    padding: 6px 12px;
    font-size: 0.8125rem;
}


/* Ordenação por coluna */
th.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th.sortable-th:hover {
    color: #2b6cb0;
}
th.sortable-th.sort-active {
    color: #2c5282;
}
th.sortable-th .sort-indicator {
    font-size: 0.75em;
    margin-left: 2px;
}

/* Prévia transferência */
.transferencia-preview {
    margin: 12px 0 4px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}
.transferencia-preview.is-muted {
    background: #edf2f7;
    color: #718096;
}
.transferencia-preview.is-warning {
    background: #fef3c7;
    color: #92400e;
}
.transferencia-preview.is-ok {
    background: #e6fffa;
    color: #234e52;
}

/* Drawer detalhe transação — abaixo do chrome fixo (status-bar + menu) */
.drawer-transacao {
    position: fixed;
    inset: 0;
    z-index: 1000000; /* acima da status bar para o backdrop/painel não ficarem por baixo */
    pointer-events: none;
    background: transparent;
    transition: background 0.2s ease;
}
.drawer-transacao.is-open {
    pointer-events: auto;
    background: rgba(15, 23, 42, 0.35);
}
.drawer-transacao-panel {
    position: absolute;
    top: var(--jarvis-chrome-top, 70px);
    right: 0;
    bottom: 0;
    width: min(420px, 100%);
    height: auto;
    max-height: calc(100% - var(--jarvis-chrome-top, 70px));
    background: #fff;
    box-shadow: -8px 0 24px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s ease;
}
.drawer-transacao.is-open .drawer-transacao-panel {
    transform: translateX(0);
}
.drawer-transacao-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #e2e8f0;
}
.drawer-transacao-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: #2d3748;
}
.drawer-close {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer;
    color: #718096;
    line-height: 1;
}
.drawer-transacao-body {
    flex: 1;
    overflow: auto;
    padding: 16px 18px;
}
.drawer-dl {
    margin: 0;
    display: grid;
    gap: 12px;
}
.drawer-dl > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px;
    align-items: start;
}
.drawer-dl dt {
    margin: 0;
    color: #718096;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}
.drawer-dl dd {
    margin: 0;
    color: #2d3748;
    font-size: 0.95rem;
}
.drawer-atraso {
    color: #c53030;
    font-weight: 700;
}
.drawer-transacao-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid #e2e8f0;
    background: #f7fafc;
}

/* Página Hoje */
.hoje-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}
.hoje-page h1 {
    margin: 0 0 8px;
    font-size: 1.75rem;
    color: #1a202c;
}
.hoje-page .hoje-sub {
    color: #718096;
    margin-bottom: 24px;
}
.hoje-grid {
    display: grid;
    gap: 16px;
}
@media (min-width: 800px) {
    .hoje-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.hoje-block {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px;
}
.hoje-block h2 {
    margin: 0 0 12px;
    font-size: 1.1rem;
    color: #2d3748;
}
.hoje-metric {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
}
.hoje-metric-sub {
    color: #718096;
    font-size: 0.9rem;
    margin-top: 4px;
}
.hoje-block-atrasadas {
    border-left: 4px solid #e53e3e;
}
.hoje-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}
.hoje-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid #edf2f7;
    font-size: 0.9rem;
}
.hoje-cta {
    display: inline-block;
    margin-top: 14px;
}

.hoje-feedback {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
}
.hoje-feedback[hidden] {
    display: none !important;
}
.hoje-feedback.is-success {
    background: #c6f6d5;
    color: #22543d;
}
.hoje-feedback.is-error {
    background: #fed7d7;
    color: #822727;
}
.hoje-feedback.is-info {
    background: #bee3f8;
    color: #2a4365;
}

.hoje-list .hoje-item {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.hoje-item-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.hoje-item-label {
    color: #2d3748;
    line-height: 1.35;
}
.hoje-item-valor {
    white-space: nowrap;
    font-weight: 700;
}
.hoje-item-valor.valor-receita {
    color: #276749;
}
.hoje-item-valor.valor-despesa {
    color: #c53030;
}
.hoje-item-empty {
    color: #a0aec0;
    border-top: none;
    justify-content: flex-start;
}
.btn-hoje-efetivar {
    align-self: flex-end;
    border: 1px solid #c6f6d5;
    background: #f0fff4;
    color: #276749;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
}
.btn-hoje-efetivar:hover:not(:disabled) {
    background: #c6f6d5;
}
.btn-hoje-efetivar:disabled {
    opacity: 0.6;
    cursor: wait;
}
@media (min-width: 520px) {
    .hoje-list .hoje-item {
        flex-direction: row;
        align-items: center;
    }
    .btn-hoje-efetivar {
        align-self: center;
        flex-shrink: 0;
    }
}

/* Forma de pagamento no modal */
.forma-pagamento-block {
    margin-bottom: 14px;
}
.forma-pagamento-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.forma-pagamento-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #2d3748;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    max-width: 100%;
}
.forma-pagamento-chip:hover {
    border-color: #a0aec0;
    background: #edf2f7;
}
.forma-pagamento-chip.is-active {
    border-color: #3182ce;
    background: #ebf8ff;
    box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.2);
    color: #2b6cb0;
}
.forma-pagamento-icon {
    font-size: 1.1rem;
    line-height: 1;
}
.forma-pagamento-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}
.forma-pagamento-select-fallback {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.forma-pagamento-hint {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: #4a5568;
    background: #edf2f7;
    padding: 6px 10px;
    border-radius: 6px;
}
.forma-pagamento-hint[hidden] {
    display: none !important;
}

/* ========== MELHORIAS UX MOBILE - MODAL TRANSAÇÃO ========== */

@media (max-width: 768px) {
    /* Modal ocupa tela toda em mobile */
    .modal-compact form#form-transacao {
        padding: 16px;
    }
    
    /* ===== CHIPS DE FORMA DE PAGAMENTO ===== */
    .forma-pagamento-block {
        margin-bottom: 20px;
    }
    
    .forma-pagamento-block > label {
        font-size: 0.9rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 10px;
        display: block;
    }
    
    .forma-pagamento-picker {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
        padding: 4px 0 12px 0;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .forma-pagamento-picker::-webkit-scrollbar {
        display: none;
    }
    
    .forma-pagamento-chip {
        flex-shrink: 0;
        padding: 12px 16px;
        border-radius: 12px;
        font-size: 0.9rem;
        min-height: 48px;
        border-width: 2px;
    }
    
    .forma-pagamento-chip.is-active {
        border-width: 2px;
        box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.2);
    }
    
    .forma-pagamento-label {
        max-width: none;
        white-space: nowrap;
    }
    
    .forma-pagamento-icon {
        font-size: 1.3rem;
    }
    
    /* ===== GRID DO FORMULÁRIO - 1 COLUNA ===== */
    .modal-compact .form-grid-compact {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0;
        margin-bottom: 16px;
    }
    
    /* ===== CAMPO VALOR DESTACADO ===== */
    .modal-compact .form-group-valor {
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
        border: 2px solid #86efac !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin-bottom: 8px !important;
    }
    
    .modal-compact .form-group-valor label {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        color: #166534 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    .modal-compact .form-group-valor input,
    .modal-compact #valor {
        font-size: 1.75rem !important;
        font-weight: 800 !important;
        text-align: center !important;
        padding: 16px !important;
        border: 2px solid #22c55e !important;
        border-radius: 10px !important;
        background: white !important;
        color: #166534 !important;
    }
    
    .modal-compact .form-group-valor input:focus,
    .modal-compact #valor:focus {
        border-color: #16a34a !important;
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2) !important;
    }
    
    .modal-compact .form-group-valor input::placeholder,
    .modal-compact #valor::placeholder {
        color: #86efac !important;
        font-weight: 600 !important;
    }
    
    /* ===== CAMPOS DE DATA ===== */
    .modal-compact .form-group-data {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        padding: 14px !important;
    }
    
    .modal-compact .form-group-data input[type="date"],
    .modal-compact #data,
    .modal-compact #data-efetivacao {
        font-size: 1rem !important;
        padding: 14px !important;
        min-height: 52px !important;
        border-radius: 8px !important;
    }
    
    /* ===== CHECKBOX EFETIVADA DESTACADO ===== */
    .modal-compact .form-group-efetivada {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
        border: 2px solid #93c5fd !important;
        border-radius: 12px !important;
        padding: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .modal-compact .form-group-efetivada .checkbox-label {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #1e40af !important;
        gap: 12px !important;
    }
    
    .modal-compact .form-group-efetivada input[type="checkbox"] {
        width: 28px !important;
        height: 28px !important;
        accent-color: #2563eb !important;
    }
    
    /* ===== SYNC DATAS CHECKBOX ===== */
    .sync-datas-label {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: #f1f5f9;
        border-radius: 8px;
        margin-top: 10px;
        font-size: 0.85rem;
        min-height: 44px;
    }
    
    .sync-datas-label input[type="checkbox"] {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }
    
    /* ===== SELECTS (TIPO, CATEGORIA, SUBCATEGORIA) ===== */
    .modal-compact .form-group-compact select {
        font-size: 1rem;
        padding: 14px;
        min-height: 52px;
        border-radius: 8px;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a5568' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        padding-right: 40px;
    }
    
    /* ===== TEXTAREA DESCRIÇÃO ===== */
    .modal-compact .form-group-compact textarea {
        font-size: 1rem;
        padding: 14px;
        min-height: 80px;
        border-radius: 8px;
        resize: vertical;
    }
    
    /* ===== LABELS DOS CAMPOS ===== */
    .modal-compact .form-group-compact > label {
        font-size: 0.85rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 8px;
        display: block;
    }
    
    /* ===== BOTÕES DE AÇÃO ===== */
    .modal-compact .form-actions-compact {
        flex-direction: column-reverse;
        gap: 12px;
        padding: 20px 16px;
        margin: 0 -16px -16px -16px;
        background: linear-gradient(to top, #f8fafc, white);
        border-top: 1px solid #e2e8f0;
    }
    
    .modal-compact .btn-save-compact {
        min-height: 56px;
        font-size: 1.1rem;
        font-weight: 700;
        border-radius: 12px;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    }
    
    .modal-compact .btn-cancel-compact {
        min-height: 48px;
        font-size: 1rem;
        border-radius: 10px;
    }
    
    /* ===== BLOCO MODO LANÇAMENTO ===== */
    .bloco-modo-lancamento {
        margin: 0 0 20px 0 !important;
        padding: 16px !important;
        border-radius: 12px !important;
    }
    
    .bloco-modo-lancamento strong {
        font-size: 0.95rem;
        color: #1e293b;
    }
    
    .modo-lancamento-radios {
        gap: 10px !important;
    }
    
    .modo-lancamento-radios label {
        padding: 12px 16px;
        background: white;
        border: 2px solid #e2e8f0;
        border-radius: 10px;
        flex: 1;
        text-align: center;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 0.9rem;
    }
    
    /* Estilo para radio selecionado - via CSS sem :has() */
    .modo-lancamento-radios input[type="radio"]:checked {
        accent-color: #3b82f6;
    }
    
    .modo-lancamento-radios input[type="radio"]:checked + span,
    .modo-lancamento-radios label.is-selected {
        color: #1e40af;
        font-weight: 600;
    }
    
    .modo-lancamento-radios input[type="radio"] {
        width: 20px;
        height: 20px;
    }
    
    /* ===== HEADER DO MODAL ===== */
    .modal-compact .modal-header-compact {
        padding: 18px 20px;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .modal-compact .modal-header-compact h2 {
        font-size: 1.25rem;
    }
    
    .modal-compact .modal-header-compact .close {
        font-size: 2rem;
        padding: 8px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Mobile pequeno - ajustes adicionais */
@media (max-width: 480px) {
    .modal-compact #valor {
        font-size: 1.5rem;
        padding: 14px;
    }
    
    .forma-pagamento-chip {
        padding: 10px 14px;
        font-size: 0.85rem;
    }
    
    .modal-compact .btn-save-compact {
        min-height: 52px;
        font-size: 1rem;
    }
}

/* ========== MELHORIAS UX MOBILE - TRANSAÇÕES ========== */

/* Transação atrasada em mobile - destaque claro */
@media (max-width: 768px) {
    .transacoes-table tbody tr.transacao-atrasada:not(.group-header) {
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
        border: 2px solid #f87171 !important;
        box-shadow: 0 2px 8px rgba(248, 113, 113, 0.25);
    }
    
    /* Valores de receita com cor verde vibrante */
    .transacoes-table td.valor-cell.valor-receita {
        color: #059669;
    }
    
    /* Valores de despesa com cor vermelha clara */
    .transacoes-table td.valor-cell.valor-despesa {
        color: #dc2626;
    }
    
    /* Área de toque mínima para checkboxes */
    .transacoes-table td:first-child .checkbox-container {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Botões de ação com área de toque adequada */
    .transacoes-table td:last-child .btn-action {
        min-width: 40px;
        min-height: 40px;
        padding: 8px;
        font-size: 1.1rem;
        border-radius: 8px;
        background: #f1f5f9;
        margin: 0 2px;
    }
    
    .transacoes-table td:last-child .btn-action:hover,
    .transacoes-table td:last-child .btn-action:active {
        background: #e2e8f0;
    }
    
    /* Subcategoria vazia ou "-" fica oculta */
    .transacoes-table td[data-label="Subcat."]:empty {
        display: none !important;
    }
    
    /* Estilo para linhas selecionadas em mobile */
    .transacoes-table tbody tr.row-selected:not(.group-header) {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
        border: 2px solid #3b82f6 !important;
    }
    
    /* Badge de status mais legível */
    .status-efetivada {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #065f46;
        border: 1px solid #6ee7b7;
    }
    
    .status-pendente {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #92400e;
        border: 1px solid #fcd34d;
    }
    
    .status-atrasada {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #991b1b;
        border: 1px solid #f87171;
        animation: pulse-atrasada 2s ease-in-out infinite;
    }
    
    @keyframes pulse-atrasada {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.8; }
    }
}

/* ========== MELHORIAS DESKTOP - VALORES GRANDES ========== */

/* Formatação de valores financeiros grandes */
.valor-cell {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}