@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700&display=swap');

* {
    box-sizing: border-box;
}

:root {
    --cor-primaria: #0F4C81;
    --cor-secundaria: #1DB954;
    --cor-fundo: #F8FAFC;
    --cor-superficie: #FFFFFF;
    --cor-texto-principal: #111827;
    --cor-texto-secundario: #6B7280;
    --cor-receita: #22C55E;
    --cor-despesa: #EF4444;
    --cor-informacao: #2563EB;
    --cor-aviso: #F59E0B;
    --cor-erro: #DC2626;
    --cor-destaque: #8B5CF6;
    --cor-borda: #E5E7EB;
    --cor-secundaria-suave: color-mix(in srgb, var(--cor-secundaria) 12%, var(--cor-superficie));
    --cor-receita-suave: color-mix(in srgb, var(--cor-receita) 14%, var(--cor-superficie));
    --cor-despesa-suave: color-mix(in srgb, var(--cor-despesa) 12%, var(--cor-superficie));
    --cor-informacao-suave: color-mix(in srgb, var(--cor-informacao) 10%, var(--cor-superficie));
    --cor-aviso-suave: color-mix(in srgb, var(--cor-aviso) 16%, var(--cor-superficie));
    --cor-erro-suave: color-mix(in srgb, var(--cor-erro) 10%, var(--cor-superficie));
    --sidebar-logo-filter: brightness(0) saturate(100%) invert(24%) sepia(28%) saturate(2113%) hue-rotate(169deg) brightness(92%) contrast(92%);
    --sidebar-icon-color: var(--cor-primaria);
    --sidebar-active-bg: var(--cor-primaria);
    --sidebar-active-color: #FFFFFF;
    --sidebar-hover-bg: #EEF4FF;
    --sidebar-hover-color: var(--cor-primaria);
    --font-xs: 11px;
    --font-sm: 12px;
    --font-md: 13px;
    --font-base: 14px;
    --font-lg: 16px;
    --font-xl: 22px;
    --font-2xl: 24px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 14px;
    --space-lg: 18px;
    --control-height: 40px;
    --color-primary: var(--cor-secundaria);
    --color-secondary: var(--cor-primaria);
    --color-success: var(--cor-receita);
    --color-danger: var(--cor-erro);
    --button-radius: var(--radius-md);
    --button-padding: 10px 16px;
    --button-font-weight: 600;
    --page-title-size: 28px;
    --page-title-line-height: 1.16;
    --page-title-margin: 0;
    --page-subtitle-size: 14px;
    --page-subtitle-line-height: 1.45;
    --page-subtitle-margin-top: 6px;
    --page-subtitle-max-width: 720px;
    --card-padding: 24px;
    --card-padding-mobile: 18px;
    --card-radius: 20px;
    --content-gap: 24px;
    --mobile-more-overlay-z: 1040;
    --mobile-more-sheet-z: 1050;
    --mobile-nav-z: 1120;
    --mobile-action-z: 1130;
    --modal-overlay-z: 1200;
    --modal-content-z: 1210;
    --tour-overlay-z: 1300;
    --tour-highlight-z: 1310;
    --tour-popover-z: 1320;
    --dark-background: #071525;
    --dark-text: #F8FAFC;
}

html.theme-dark,
html.theme-dark body {
    background-color: var(--dark-background, #071525);
    color: var(--dark-text, #F8FAFC);
}

:root[data-theme="dark"] {
    --cor-fundo: #071525;
    --cor-superficie: #0D2034;
    --cor-texto-principal: #F8FAFC;
    --cor-texto-secundario: #A8B4C5;
    --cor-borda: #24384D;
    --sidebar-logo-filter: brightness(0) invert(1);
    --sidebar-icon-color: var(--cor-secundaria);
    --sidebar-active-bg: var(--cor-secundaria);
    --sidebar-hover-bg: #132A42;
    --sidebar-hover-color: #FFFFFF;
    --table-row-dark: var(--cor-superficie);
    --table-row-alt-dark: color-mix(in srgb, var(--cor-superficie) 94%, var(--cor-texto-principal));
    --table-row-hover-dark: color-mix(in srgb, var(--cor-informacao) 12%, var(--cor-superficie));
    --table-row-selected-dark: color-mix(in srgb, var(--cor-informacao) 20%, var(--cor-superficie));
}

:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .input-control,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background-color: var(--cor-superficie);
    color: var(--cor-texto-principal);
}

.demo-mode-badge {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 1200;
    padding: 7px 12px;
    border: 1px solid color-mix(in srgb, var(--cor-aviso) 42%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--cor-aviso) 14%, var(--cor-superficie));
    color: var(--cor-texto-principal);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
    font-size: 0.75rem;
    font-weight: 700;
}

[data-demo-bloqueado="true"] {
    opacity: 0.48;
    cursor: not-allowed !important;
    filter: saturate(0.45);
}

@media (max-width: 768px) {
    .demo-mode-badge {
        top: 10px;
        right: 12px;
    }
}

body {
    font-family: 'Sora', Arial, sans-serif;
    background: var(--cor-fundo);
    color: var(--cor-texto-principal);
    font-size: var(--font-base);
    margin: 0;
}

.password-reset-page {
    align-items: center;
    background:
        radial-gradient(circle at 10% 0%, rgba(15, 76, 129, .82), transparent 38%),
        linear-gradient(145deg, var(--cor-primaria) 0%, #061A2E 48%, #061A2E 100%);
    color: var(--cor-superficie);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

.password-reset-card {
    background: rgba(6, 26, 46, .88);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .32);
    display: grid;
    gap: 22px;
    max-width: 440px;
    padding: 40px;
    width: 100%;
}

.password-reset-brand {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.password-reset-brand .brand-symbol { height: 58px; width: 58px; }
.password-reset-brand .brand-wordmark { height: auto; width: 124px; }
.password-reset-card h1 { color: var(--cor-superficie); font-size: 26px; }
.password-reset-card > div > p { color: #CBD5E1; line-height: 1.5; margin: 8px 0 0; }
.password-reset-form { display: grid; gap: 16px; }
.password-reset-form .form-group { margin: 0; }
.password-reset-card .password-reset-form label { color: #E2E8F0; }
.password-reset-form small { color: #CBD5E1; line-height: 1.45; }
.password-reset-form .input-control {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
    color: var(--cor-superficie);
    min-height: 48px;
    width: 100%;
}
.password-reset-form .input-control:focus {
    border-color: var(--cor-informacao);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .22);
    outline: none;
}
.password-reset-field { position: relative; }
.password-reset-field .input-control { padding-right: 48px; }
.password-reset-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #CBD5E1;
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
}
.password-reset-toggle:hover,
.password-reset-toggle:focus-visible {
    background: rgba(255, 255, 255, .06);
    color: var(--cor-superficie);
    outline: none;
}
.password-reset-toggle svg {
    height: 19px;
    stroke: currentColor;
    width: 19px;
}
.password-reset-toggle::after {
    background: currentColor;
    border-radius: 2px;
    content: "";
    height: 1.5px;
    opacity: 0;
    position: absolute;
    transform: rotate(45deg);
    width: 20px;
}
.password-reset-toggle[aria-pressed="true"]::after { opacity: 1; }
.password-reset-card .password-strength { display: grid; gap: 6px; }
.password-reset-card .password-strength-track {
    background: rgba(255, 255, 255, .1);
    border-radius: 999px;
    height: 5px;
    overflow: hidden;
}
.password-reset-card .password-strength-track span {
    background: var(--cor-erro);
    display: block;
    height: 100%;
    transition: width .2s ease, background-color .2s ease;
    width: 0;
}
.password-reset-card .password-strength strong { color: #FCA5A5; }
.password-reset-card .password-strength.media .password-strength-track span { background: var(--cor-aviso); }
.password-reset-card .password-strength.media strong { color: #FCD34D; }
.password-reset-card .password-strength.forte .password-strength-track span { background: var(--cor-receita); }
.password-reset-card .password-strength.forte strong { color: #86EFAC; }
.password-reset-alert {
    border-radius: 10px;
    display: none;
    font-size: 13px;
    line-height: 1.5;
    padding: 12px 14px;
}
.password-reset-alert.visivel { display: block; }
.password-reset-alert { white-space: pre-line; }
.password-reset-alert.erro { background: rgba(220, 38, 38, .14); color: #FCA5A5; }
.password-reset-alert.sucesso { background: rgba(29, 185, 84, .14); color: #86EFAC; }
.password-reset-back {
    color: #93C5FD;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

@media (max-width: 480px) {
    .password-reset-card { padding: 28px 22px; }
}

h1 {
    font-size: var(--page-title-size);
    margin: 0;
    font-weight: 700;
    line-height: var(--page-title-line-height);
}

h2 {
    margin-top: 0;
    font-size: var(--font-lg);
    font-weight: 600;
}

/* ==========================
   LAYOUT COM SIDEBAR
========================== */

.layout {
    display: flex;
    min-height: 100vh;
    background: var(--cor-fundo);
}

.sidebar {
    width: 260px;
    height: 100vh;
    min-height: 100vh;
    background: var(--cor-superficie);
    color: var(--cor-texto-principal);
    border-right: 1px solid var(--cor-borda);
    padding: 26px 18px 22px;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 20;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin-bottom: 30px;
    padding: 0 10px;
}

.app-brand {
    align-items: center;
    display: inline-flex;
    gap: 11px;
    max-width: 100%;
    text-decoration: none;
}

.app-brand-symbol {
    display: block;
    flex: 0 0 auto;
    height: 42px;
    object-fit: contain;
    width: 42px;
}

.app-brand-wordmark {
    background: transparent;
    border: 0;
    display: block;
    filter: var(--sidebar-logo-filter);
    height: auto;
    max-width: 104px;
    object-fit: contain;
    width: 96px;
}

.brand-symbol {
    display: block;
    flex-shrink: 0;
    max-width: 100%;
    object-fit: contain;
}

.brand-logo {
    align-items: center;
    color: var(--cor-primaria);
    display: inline-flex;
    font-family: 'Sora', Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    gap: 12px;
    letter-spacing: 0;
    line-height: 1;
}

.brand-logo .brand-symbol {
    width: 44px;
    height: 44px;
}

.sidebar-logo .brand-logo {
    color: var(--cor-superficie);
}

.sidebar-logo .brand-logo .brand-symbol {
    width: 46px;
    height: 46px;
}

.brand-logo > span {
    display: block;
}

.brand-logo > span > strong,
.brand-logo > span > small {
    display: block;
}

.brand-logo > span > small {
    color: var(--cor-texto-secundario);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 4px;
}

.brand-logo-compact {
    gap: 0;
}

.brand-logo-compact > span {
    display: none;
}

.menu {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
    scrollbar-width: thin;
}

.menu-item {
    align-items: center;
    color: var(--cor-texto-secundario);
    display: flex;
    gap: 12px;
    text-decoration: none;
    min-height: 46px;
    padding: 11px 14px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.menu-item:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-color);
    transform: translateX(2px);
}

.menu-item.ativo {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-color);
    box-shadow: 0 8px 20px rgba(15, 76, 129, 0.16);
}

.menu-icon {
    aspect-ratio: 1;
    color: var(--sidebar-icon-color);
    display: inline-block;
    flex: 0 0 auto;
    height: 20px;
    min-height: 20px;
    min-width: 20px;
    opacity: 0.82;
    width: 20px;
}

.nav-icon {
    fill: none;
    stroke: none;
}

.menu-item.ativo .menu-icon {
    color: var(--sidebar-active-color);
    opacity: 1;
}

.admin-menu-item:not(.admin-visible) {
    pointer-events: none;
    visibility: hidden;
}

.sidebar-footer {
    margin-top: auto;
    border-top: 1px solid var(--cor-borda);
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 12px;
}

.sidebar-footer span {
    color: var(--cor-texto-secundario);
    font-size: 13px;
    font-weight: 600;
}

.btn-sidebar-sair {
    background: var(--cor-erro-suave);
    color: var(--cor-despesa);
    border: 1px solid color-mix(in srgb, var(--cor-despesa) 28%, var(--cor-superficie));
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

.btn-sidebar-sair:hover {
    background: var(--cor-erro);
    color: var(--cor-superficie);
}

.main-content {
    margin-left: 260px;
    min-width: 0;
    width: calc(100% - 260px);
    padding: 30px 34px 36px;
}

.mobile-bottom-nav,
.mobile-more-overlay,
.mobile-filter-summary,
.mobile-filter-sheet-actions {
    display: none;
}

.mobile-only {
    display: none;
}

.mobile-page-progress {
    background: linear-gradient(90deg, var(--cor-primaria), var(--cor-secundaria));
    height: 3px;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    right: 100%;
    top: 0;
    transition: right .16s ease, opacity .16s ease;
    z-index: 1300;
}

/* Configurações da conta */

.configuracoes-header {
    margin-bottom: 24px;
}

.configuracoes-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 20px;
}

.configuracao-card {
    min-width: 0;
}

.configuracao-card-header {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.configuracao-card-header h2,
.configuracao-danger-zone h2 {
    color: var(--cor-texto-principal);
    font-size: 20px;
    margin: 0;
}

.configuracao-card-header p,
.configuracao-danger-zone p {
    color: var(--cor-texto-secundario);
    font-size: 13px;
    line-height: 1.5;
    margin: 6px 0 0;
}

.configuracao-form {
    display: grid;
    gap: 16px;
}

.configuracao-form .form-group {
    margin: 0;
}

.configuracao-form .form-group small {
    color: var(--cor-texto-secundario);
    display: block;
    font-size: 11px;
    line-height: 1.45;
    margin-top: 6px;
}

.configuracao-info-row,
.configuracao-sobre > div {
    align-items: center;
    border-top: 1px solid var(--cor-borda);
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
}

.configuracao-info-row span,
.configuracao-sobre dt {
    color: var(--cor-texto-secundario);
    font-size: 13px;
}

.configuracao-info-row strong,
.configuracao-sobre dd {
    color: var(--cor-texto-principal);
    font-size: 13px;
    font-weight: 700;
    margin: 0;
}

.configuracao-actions {
    display: flex;
    justify-content: flex-end;
}

.configuracao-actions button,
.configuracao-danger-zone button {
    min-height: var(--control-height);
    padding: 10px 16px;
}

.configuracao-preferencias input:disabled {
    background: var(--cor-fundo);
    color: var(--cor-texto-secundario);
    cursor: not-allowed;
    opacity: 1;
}

.configuracao-toggle {
    align-items: center;
    color: var(--cor-texto-principal);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 10px;
    min-height: var(--control-height);
}

.configuracao-toggle input {
    accent-color: var(--cor-primaria);
    height: 18px;
    width: 18px;
}

.configuracao-sobre {
    display: grid;
    gap: 14px;
    margin: 0 0 20px;
}

.configuracao-links {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}

.configuracao-links .button-info-soft {
    justify-content: flex-start;
    width: 100%;
}

.configuracao-links small {
    color: var(--cor-texto-secundario);
    display: block;
    font-size: 12px;
    line-height: 1.45;
}

.configuracao-danger-zone {
    align-items: center;
    border-color: color-mix(in srgb, var(--cor-erro) 26%, var(--cor-borda));
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 24px;
}

@media (max-width: 900px) {
    .configuracoes-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .configuracao-card,
    .configuracao-danger-zone {
        padding: 20px;
    }

    .configuracao-danger-zone {
        align-items: stretch;
        flex-direction: column;
    }

    .configuracao-actions,
    .configuracao-actions button,
    .configuracao-danger-zone button {
        width: 100%;
    }
}

.header-dashboard {
    margin-bottom: 24px;
}

.header-dashboard h1 {
    font-size: var(--page-title-size);
    color: var(--cor-texto-principal);
    line-height: var(--page-title-line-height);
}

/* ==========================
   SEÇÕES
========================== */

.card,
.grafico-section,
.resumo-section,
.table-section,
.filtro-section,
.form-section {
    background: var(--cor-superficie);
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.055);
    border: 1px solid var(--cor-borda);
}

.premium-card,
.dashboard-card,
.chart-card {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--card-radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.dashboard-page .header-dashboard {
    margin-bottom: 26px;
}

.dashboard-page .header-dashboard h1 {
    font-size: var(--page-title-size);
    line-height: var(--page-title-line-height);
}

.dashboard-welcome p {
    color: var(--cor-texto-secundario);
    font-size: var(--page-subtitle-size);
    font-weight: 400;
    line-height: var(--page-subtitle-line-height);
    margin: var(--page-subtitle-margin-top) 0 0;
    max-width: var(--page-subtitle-max-width);
}

.dashboard-page .filtro-section,
.dashboard-page .dashboard-contas,
.dashboard-page .grafico-section,
.dashboard-page .resumo-section,
.dashboard-page .table-section {
    padding: 18px;
}

.dashboard-page .dashboard-periodo {
    margin-bottom: 24px;
    padding: 18px;
}

.dashboard-periodo .transacoes-periodo-row,
.relatorios-toolbar .transacoes-periodo-row {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.dashboard-periodo-header {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.dashboard-periodo-header h2,
.dashboard-section-heading h2 {
    color: var(--cor-texto-principal);
    margin: 0;
}

.dashboard-periodo-header small,
.dashboard-section-heading p {
    color: var(--cor-texto-secundario);
    display: block;
    font-size: 13px;
    line-height: 1.45;
    margin: 5px 0 0;
}

.dashboard-page .dashboard-periodo .navegador-mes {
    flex: 0 0 auto;
    margin: 0;
}

.dashboard-page .dashboard-periodo .filtro-periodo {
    align-items: end;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.dashboard-page .dashboard-periodo .form-group {
    flex: 1 1 170px;
    max-width: 220px;
}

.dashboard-section-heading {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dashboard-central-financeira {
    border-top: 3px solid var(--cor-primaria);
    box-shadow: 0 12px 30px rgba(15, 76, 129, 0.08);
    margin-bottom: 32px;
    padding: 24px;
}

.central-financeira-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
}

.central-financeira-grid > .empty-state {
    grid-column: 1 / -1;
}

.central-financeira-item {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 4px 22px;
}

.central-financeira-item:first-child {
    padding-left: 0;
}

.central-financeira-item + .central-financeira-item {
    border-left: 1px solid var(--cor-borda);
}

.central-financeira-item > span,
.central-financeira-item > small {
    color: var(--cor-texto-secundario);
}

.central-financeira-item > span {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.central-financeira-item > strong {
    font-size: 19px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.central-financeira-item > small {
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.dashboard-page .dashboard-chart-primary {
    margin-bottom: 32px;
    min-height: 420px;
    padding: 22px;
}

.dashboard-page .grafico-container-principal {
    height: 330px;
}

.dashboard-page .dashboard-primary-cards {
    gap: 20px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 20px;
}

.dashboard-primary-cards .dashboard-card {
    min-height: 132px;
}

.dashboard-primary-cards .dashboard-card-saldo {
    border-top: 3px solid var(--cor-informacao);
}

.dashboard-primary-cards [data-detalhe-dashboard="RECEITA"] {
    border-top: 3px solid var(--cor-receita);
}

.dashboard-primary-cards [data-detalhe-dashboard="DESPESA"] {
    border-top: 3px solid var(--cor-despesa);
}

.dashboard-primary-cards [data-detalhe-dashboard="PENDENTE"] {
    border-top: 3px solid var(--cor-aviso);
}

.dashboard-primary-cards [data-detalhe-dashboard="ATRASADO"] {
    border-top: 3px solid var(--cor-erro);
}

.dashboard-realized {
    border-top: 1px solid var(--cor-borda);
    margin-top: 22px;
    padding-top: 20px;
}

.dashboard-realized-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-realized-grid > div {
    display: grid;
    gap: 6px;
    padding: 2px 22px;
}

.dashboard-realized-grid > div:first-child {
    padding-left: 0;
}

.dashboard-realized-grid > div + div {
    border-left: 1px solid var(--cor-borda);
}

.dashboard-realized-grid span {
    color: var(--cor-texto-secundario);
    font-size: var(--font-sm);
    font-weight: 600;
}

.dashboard-realized-grid strong {
    font-size: 20px;
    line-height: 1.3;
}

.dashboard-card-variation {
    display: block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    margin-top: 8px;
}

.dashboard-card-variation.is-favorable {
    color: var(--cor-receita);
}

.dashboard-card-variation.is-unfavorable {
    color: var(--cor-despesa);
}

.dashboard-card-variation.is-stable {
    color: var(--cor-texto-secundario);
}

.dashboard-balance-details {
    display: grid;
    gap: 0;
}

.dashboard-balance-details > div {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 13px 0;
}

.dashboard-balance-details > div + div {
    border-top: 1px solid var(--cor-borda);
}

.dashboard-intelligence {
    margin-bottom: 32px;
    padding: 24px;
}

.insights-list {
    display: grid;
    gap: 0;
}

.insight-item {
    align-items: flex-start;
    display: grid;
    gap: 16px;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 16px 0;
}

.insight-item + .insight-item {
    border-top: 1px solid var(--cor-borda);
}

.insight-item strong {
    color: var(--cor-texto-principal);
    display: block;
    font-size: var(--font-base);
    margin-bottom: 5px;
}

.insight-item p {
    color: var(--cor-texto-secundario);
    font-size: var(--font-md);
    line-height: 1.55;
    margin: 0;
}

.insight-badge {
    min-width: 78px;
    text-align: center;
}

.insight-positivo {
    background: var(--cor-receita-suave);
    border: 1px solid color-mix(in srgb, var(--cor-receita) 28%, transparent);
    color: var(--cor-receita);
}

.insight-negativo {
    background: var(--cor-despesa-suave);
    border: 1px solid color-mix(in srgb, var(--cor-despesa) 28%, transparent);
    color: var(--cor-despesa);
}

.insight-neutro {
    background: var(--cor-informacao-suave);
    border: 1px solid color-mix(in srgb, var(--cor-informacao) 24%, transparent);
    color: var(--cor-informacao);
}

.insight-alerta {
    background: var(--cor-aviso-suave);
    border: 1px solid color-mix(in srgb, var(--cor-aviso) 30%, transparent);
    color: #9A6700;
}

.dashboard-forecast-center {
    margin-bottom: 32px;
}

.forecast-heading {
    margin-bottom: 16px;
}

.forecast-summary-grid,
.forecast-main-grid,
.forecast-secondary-grid {
    display: grid;
    gap: 16px;
}

.forecast-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px;
}

.forecast-summary-card {
    border-top: 3px solid var(--cor-informacao);
    min-height: 124px;
}

.forecast-summary-card strong {
    color: var(--cor-informacao);
}

.forecast-alert {
    font-size: var(--font-md);
    font-weight: 600;
    margin-bottom: 16px;
    padding: 14px 18px;
}

.forecast-alert-safe {
    background: var(--cor-receita-suave);
    border-color: color-mix(in srgb, var(--cor-receita) 24%, transparent);
    color: #15803D;
}

.forecast-alert-warning {
    background: var(--cor-aviso-suave);
    border-color: color-mix(in srgb, var(--cor-aviso) 30%, transparent);
    color: #9A6700;
}

.forecast-main-grid {
    align-items: start;
    grid-template-areas:
        "chart events"
        "secondary events";
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    margin-bottom: 16px;
}

.forecast-secondary-grid {
    align-items: start;
    grid-area: secondary;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.forecast-chart-card {
    grid-area: chart;
}

.forecast-events-card {
    grid-area: events;
}

.forecast-chart-card,
.forecast-events-card,
.forecast-goals-card,
.forecast-invoice-card {
    min-width: 0;
    padding: 20px;
}

.forecast-chart-container {
    height: 280px;
}

.forecast-events-list,
.forecast-goals-list {
    display: grid;
}

.forecast-event-item {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    padding: 12px 0;
}

.forecast-event-item + .forecast-event-item,
.forecast-goal-item + .forecast-goal-item {
    border-top: 1px solid var(--cor-borda);
}

.forecast-event-item time,
.forecast-event-item span,
.forecast-goal-item span,
.forecast-invoice-content span {
    color: var(--cor-texto-secundario);
    font-size: var(--font-sm);
}

.forecast-event-item div,
.forecast-goal-item > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.forecast-event-item strong,
.forecast-goal-item strong,
.forecast-invoice-content > strong {
    color: var(--cor-texto-principal);
    font-size: var(--font-md);
}

.forecast-event-item > strong {
    text-align: right;
    white-space: nowrap;
}

.forecast-goal-item {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr);
    padding: 14px 0;
}

.forecast-goal-values {
    align-content: start;
}

.forecast-invoice-content {
    display: grid;
    gap: 14px;
}

.forecast-invoice-content > div:not(.empty-state) {
    align-items: center;
    border-top: 1px solid var(--cor-borda);
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
}

.dashboard-secondary-metrics .dashboard-card {
    min-height: 100px;
    padding: 16px;
}

.dashboard-secondary-metrics .dashboard-card p {
    font-size: 20px;
    margin: 10px 0 0;
}

.dashboard-metas-section {
    margin-bottom: 24px;
}

.dashboard-metas-section .meta-geral-card {
    margin: 0;
}

.dashboard-planning-grid {
    align-items: stretch;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    margin-bottom: 24px;
}

.dashboard-planning-grid .dashboard-contas,
.dashboard-planning-grid .dashboard-metas-section {
    margin-bottom: 0;
    min-width: 0;
}

.dashboard-planning-grid .dashboard-metas-section {
    display: flex;
    flex-direction: column;
}

.dashboard-planning-grid .meta-geral-card {
    flex: 1 1 auto;
}

.dashboard-page .dashboard-insights-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
    margin-bottom: 24px;
}

.dashboard-page .dashboard-category-card {
    min-height: 420px;
}

.dashboard-page .grafico-container-categorias {
    height: 310px;
}

#graficoGastosCategoria {
    height: 100% !important;
    width: 100% !important;
}

.filtro-section {
    padding: 22px;
    margin-bottom: 22px;
}

.navegador-mes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 4px auto 18px;
    padding: 0;
}

.btn-mes-nav,
.mes-atual-label {
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn-mes-nav {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: var(--cor-texto-secundario);
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-mes-nav:hover {
    transform: scale(1.05);
    color: var(--cor-secundaria);
}

.mes-atual-label {
    min-width: 150px;
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1.5px solid var(--cor-borda);
    background: transparent;
    color: var(--cor-texto-principal);
    font-size: 15px;
    font-weight: 700;
}

.mes-atual-label:hover {
    background: var(--cor-fundo);
    border-color: var(--cor-secundaria);
    color: var(--cor-secundaria);
}

.mes-atual-label:active,
.btn-mes-nav:active {
    transform: scale(0.96);
}

.filtro-periodo {
    display: flex;
    align-items: end;
    gap: 14px;
    flex-wrap: wrap;
}

.period-filter {
    padding: 12px 14px;
}

.period-filter .transacoes-periodo-row {
    align-items: center;
    border-top: 0;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr auto;
    margin: 0;
    padding: 0;
}

.period-selector {
    gap: 8px;
    justify-self: center;
    margin: 0;
}

.period-selector .btn-mes-nav {
    border-radius: 999px;
    font-size: 26px;
    height: 32px;
    width: 32px;
}

.period-selector .mes-atual-label {
    min-width: 172px;
    height: 36px;
    padding: 0 16px;
}

.period-calendar-button {
    align-items: center;
    background: var(--cor-informacao-suave);
    border: 1px solid color-mix(in srgb, var(--cor-informacao) 18%, var(--cor-borda));
    border-radius: 999px;
    color: var(--cor-informacao);
    cursor: pointer;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    justify-self: end;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    width: 36px;
}

.period-calendar-button svg {
    height: 18px;
    width: 18px;
}

.period-calendar-button:hover,
.period-calendar-button:focus-visible,
.period-calendar-button[aria-expanded="true"] {
    background: color-mix(in srgb, var(--cor-informacao) 16%, var(--cor-superficie));
    border-color: var(--cor-informacao);
    outline: 2px solid color-mix(in srgb, var(--cor-informacao) 28%, transparent);
    outline-offset: 2px;
}

.period-custom-fields {
    align-items: end;
    background: color-mix(in srgb, var(--cor-fundo) 78%, var(--cor-superficie));
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-lg);
    display: grid;
    gap: 10px;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(140px, 1fr)) auto auto auto;
    padding: 10px;
}

.period-custom-fields[hidden] {
    display: none;
}

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

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cor-texto-principal);
}

input,
select {
    width: 100%;
    min-height: var(--control-height);
    padding: 10px 12px;
    font-size: var(--font-md);
    font-family: inherit;
    border: 1.5px solid var(--cor-borda);
    border-radius: var(--radius-md);
    outline: none;
    background: var(--cor-superficie);
    color: var(--cor-texto-principal);
}

input:focus,
select:focus {
    border-color: var(--cor-secundaria);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

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

#btnFiltrar,
#btnMesAtual,
#btnNovaTransacao,
#btnGerenciarCategorias {
    transition: all 0.2s ease;
}

#btnFiltrar,
#btnMesAtual {
    min-height: var(--control-height);
    padding: 10px 16px;
    font-size: var(--font-md);
    font-family: inherit;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
}

#btnFiltrar {
    background: var(--cor-secundaria);
    color: var(--cor-superficie);
    border: none;
}

#btnFiltrar:hover {
    background: var(--cor-secundaria);
}

#btnFiltrar:active {
    background: var(--cor-receita);
    transform: scale(0.97);
}

#btnMesAtual {
    background: var(--cor-superficie);
    color: var(--cor-informacao);
    border: 1.5px solid var(--cor-informacao);
}

#btnMesAtual:hover {
    background: var(--cor-informacao-suave);
}

#btnMesAtual:active {
    background: var(--cor-informacao-suave);
    transform: scale(0.97);
}

.topo-formulario {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 18px;
}

#btnNovaTransacao {
    background: var(--cor-secundaria);
    color: var(--cor-superficie);
    border: none;
    min-height: var(--control-height);
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

#btnNovaTransacao:hover {
    background: var(--cor-secundaria);
}

#btnGerenciarCategorias {
    background: var(--cor-superficie);
    color: var(--cor-secundaria);
    border: 1.5px solid var(--cor-secundaria);
    min-height: var(--control-height);
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

#btnGerenciarCategorias:hover {
    background: var(--cor-receita-suave);
}

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

.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
    min-width: 0;
}

.cards-menores {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.card {
    padding: 16px;
}

.dashboard-card {
    min-height: 132px;
    padding: 18px;
}

.card-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--cor-texto-secundario);
}

.card p {
    font-size: 22px;
    font-weight: 700;
    margin: 10px 0 6px;
}

.dashboard-card p {
    font-size: 24px;
    line-height: 1.15;
    margin: 12px 0 7px;
}

.card small {
    color: var(--cor-texto-secundario);
    font-size: 12px;
}

.card-click {
    cursor: pointer;
    transition: 0.2s;
}

.card-click:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.13);
}

.card-click:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cor-informacao) 30%, transparent);
    outline-offset: 3px;
}

@media (max-width: 1024px) {
    .central-financeira-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 18px;
    }

    .central-financeira-item:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }
}

@media (max-width: 600px) {
    .dashboard-central-financeira {
        padding: 18px;
    }

    .central-financeira-grid {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .central-financeira-item,
    .central-financeira-item:first-child,
    .central-financeira-item:nth-child(odd) {
        border-left: 0;
        padding: 13px 0;
    }

    .central-financeira-item + .central-financeira-item {
        border-left: 0;
        border-top: 1px solid var(--cor-borda);
    }

    .dashboard-balance-details > div,
    .detalhe-transacao {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
}

#receitas,
.positivo {
    color: var(--cor-receita);
}

#despesas {
    color: var(--cor-despesa);
}

.negativo,
#atrasadas {
    color: var(--cor-erro);
}

#pendentes {
    color: var(--cor-aviso);
}

.dashboard-page #saldo,
.dashboard-page #saldoReal,
.dashboard-page #resumoSaldo,
.dashboard-page #dashboardSaldoContas {
    color: var(--cor-informacao);
}

.dashboard-contas {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 20px;
    padding: 18px;
    margin-bottom: 22px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
}

.dashboard-contas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.dashboard-contas-header h2 {
    margin: 0 0 4px;
}

.dashboard-contas-header small {
    color: var(--cor-texto-secundario);
    font-size: 13px;
}

.btn-link-section {
    background: var(--cor-receita-suave);
    color: var(--cor-secundaria);
    border: 1px solid var(--cor-receita-suave);
    border-radius: 8px;
    padding: 10px 14px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.btn-link-section:hover {
    background: var(--cor-receita-suave);
}

.dashboard-contas-resumo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.dashboard-contas-resumo div {
    border: 0;
    border-left: 3px solid var(--cor-informacao);
    border-radius: 0;
    padding: 16px;
    background: var(--cor-fundo);
}

.dashboard-contas-resumo span {
    display: block;
    color: var(--cor-texto-secundario);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.dashboard-contas-resumo strong {
    font-size: 24px;
}

.dashboard-lista-contas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-conta-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    padding: 14px;
}

.dashboard-conta-item div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dashboard-conta-item strong {
    color: var(--cor-texto-principal);
    font-size: 14px;
    word-break: break-word;
}

.dashboard-conta-item small {
    color: var(--cor-texto-secundario);
    font-size: 12px;
}

.dashboard-conta-item span {
    flex-shrink: 0;
    font-weight: 800;
}

/* ==========================
   DASHBOARD
========================== */

.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
    margin-bottom: 30px;
    min-width: 0;
}

.relatorios-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.grafico-section,
.resumo-section,
.table-section,
.form-section {
    padding: 18px;
}

.relatorios-grid-detalhes {
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
}

/* Relatórios premium */

.relatorios-toolbar {
    margin-bottom: 24px;
    padding: 18px;
}

.relatorios-periodo-header {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.relatorios-periodo-header h2 {
    color: var(--cor-texto-principal);
    font-size: 18px;
    margin: 0;
}

.relatorios-periodo-header p {
    color: var(--cor-texto-secundario);
    font-size: 13px;
    margin: 5px 0 0;
}

.relatorios-periodo-header .navegador-mes {
    flex: 0 0 auto;
    margin: 0;
}

.relatorios-filter-bar {
    align-items: end;
    flex-wrap: nowrap;
}

.relatorios-filter-bar .form-group {
    flex: 1 1 180px;
    max-width: 260px;
}

.relatorios-resumo {
    gap: 16px;
    margin-bottom: 24px;
}

.relatorio-card {
    border-top: 3px solid var(--cor-borda);
    min-height: 118px;
    padding: 18px;
}

.relatorio-card p {
    font-size: 22px;
    margin: 10px 0 0;
}

.relatorio-card-receita { border-top-color: var(--cor-receita); }
.relatorio-card-despesa { border-top-color: var(--cor-despesa); }
.relatorio-card-saldo { border-top-color: var(--cor-informacao); }
.relatorio-card-pendente { border-top-color: var(--cor-aviso); }
.relatorio-card-atrasada { border-top-color: var(--cor-erro); }

.relatorio-card-receita p { color: var(--cor-receita); }
.relatorio-card-despesa p { color: var(--cor-despesa); }
.relatorio-card-pendente p { color: var(--cor-aviso); }
.relatorio-card-atrasada p { color: var(--cor-erro); }

.relatorio-chart-card,
.relatorio-table-card,
.relatorio-auditoria-card {
    min-width: 0;
    padding: 20px;
}

.relatorio-chart-card {
    min-height: 410px;
}

.relatorio-chart-card .grafico-container {
    height: 320px;
}

.relatorio-table-card .table-responsive,
.relatorio-auditoria-card .table-responsive {
    max-width: 100%;
    overflow-x: hidden;
}

.relatorios-page .tabela-relatorio {
    min-width: 0;
    table-layout: fixed;
    width: 100%;
}

.relatorios-page .tabela-relatorio th,
.relatorios-page .tabela-relatorio td {
    overflow-wrap: anywhere;
    white-space: normal;
}

.relatorios-page .relatorio-table-card .tabela-relatorio th:nth-child(1) { width: 16%; }
.relatorios-page .relatorio-table-card .tabela-relatorio th:nth-child(2) { width: 28%; }
.relatorios-page .relatorio-table-card .tabela-relatorio th:nth-child(3) { width: 20%; }
.relatorios-page .relatorio-table-card .tabela-relatorio th:nth-child(4) { width: 18%; }
.relatorios-page .relatorio-table-card .tabela-relatorio th:nth-child(5) { width: 18%; }

.relatorios-page .tabela-relatorio th:last-child,
.relatorios-page .tabela-relatorio td:last-child {
    text-align: right;
}

.relatorios-page .tabela-auditoria th:last-child,
.relatorios-page .tabela-auditoria td:last-child {
    text-align: left;
}

.content-card,
.premium-card,
.summary-card,
.chart-card,
.table-card {
    min-width: 0;
}

.grafico-section {
    min-height: 390px;
}

.chart-card h2 {
    margin-bottom: 18px;
}

.grafico-container {
    position: relative;
    width: 100%;
    height: 320px;
}

#graficoResumo {
    width: 100% !important;
    height: 100% !important;
}

.resumo-linha {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--cor-borda);
    color: var(--cor-texto-secundario);
    font-size: 14px;
}

.resumo-linha strong {
    color: var(--cor-texto-principal);
}

.resumo-linha.total {
    border-bottom: none;
    font-size: 17px;
    font-weight: 700;
}

/* ==========================
   TRANSAÇÕES PREMIUM
========================== */

.transacoes-page .transacoes-header {
    margin-bottom: 24px;
}

.transacoes-header h1 {
    color: var(--cor-texto-principal);
    font-size: var(--page-title-size);
    font-weight: 700;
    letter-spacing: 0;
    line-height: var(--page-title-line-height);
    margin: 0;
}

.transacoes-header p {
    color: var(--cor-texto-secundario);
    font-size: 15px;
    line-height: 1.5;
    margin: 7px 0 0;
}

.transacoes-toolbar {
    margin-bottom: 20px;
    padding: 14px;
}

.transacoes-toolbar-main,
.transacoes-page .filter-toolbar-main {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(280px, 1fr) auto auto;
}

.transacoes-toolbar-main .form-group,
.filter-toolbar-panel .form-group,
.transacoes-periodo-row .form-group {
    min-width: 0;
}

.transacoes-toolbar-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.transacoes-toolbar-actions .btn-secondary,
.transacoes-toolbar-actions .button-success-solid,
.transacoes-toolbar-actions #btnNovaTransacao {
    min-height: var(--control-height);
    padding: 10px 15px;
    white-space: nowrap;
}

.transacoes-toolbar-actions .btn-secondary {
    background: var(--cor-superficie);
    border: 1.5px solid var(--cor-borda);
    border-radius: var(--radius-md);
    color: var(--cor-texto-principal);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-md);
    font-weight: 600;
}

.transacoes-toolbar-actions .btn-secondary:hover {
    background: var(--cor-fundo);
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
}

.transacoes-toolbar-actions #btnNovaTransacao {
    background: var(--cor-primaria);
    box-shadow: 0 8px 18px rgba(15, 76, 129, .16);
}

.transacoes-toolbar-actions #btnNovaTransacao:hover {
    background: var(--cor-primaria);
    box-shadow: 0 10px 22px rgba(15, 76, 129, .22);
}

.transacoes-periodo-row {
    align-items: end;
    border-top: 1px solid var(--cor-borda);
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(135px, .6fr) auto minmax(135px, .7fr) minmax(135px, .7fr) auto auto auto;
    margin-top: 0;
    padding-top: 12px;
}

.transacoes-periodo-label strong,
.transacoes-periodo-label span {
    display: block;
}

.transacoes-periodo-label strong {
    color: var(--cor-texto-principal);
    font-size: 14px;
}

.transacoes-periodo-label span {
    color: var(--cor-texto-secundario);
    font-size: 12px;
    line-height: 1.4;
    margin-top: 5px;
}

.transacoes-periodo-row .navegador-mes {
    margin: 0;
}

.filter-toolbar input,
.filter-toolbar select,
.filter-toolbar .input-control {
    min-height: 40px;
}

.filter-toolbar #btnFiltrar,
.filter-toolbar #btnMesAtual,
.filter-toolbar #btnLimparFiltrosTransacoes {
    min-height: 40px;
    padding: 9px 12px;
    white-space: nowrap;
}

.transacoes-resumo {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 24px;
}

.transacoes-resumo-card {
    min-height: 112px;
    padding: 18px;
}

.transacoes-resumo-filter-card {
    cursor: pointer;
    position: relative;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.transacoes-resumo-filter-card::after {
    border-radius: 999px;
    content: "Filtro ativo";
    display: none;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 6px 8px;
    position: absolute;
    right: 14px;
    top: 14px;
}

.transacoes-resumo-filter-card:hover {
    transform: translateY(-1px);
}

.transacoes-resumo-filter-card:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cor-informacao) 35%, transparent);
    outline-offset: 3px;
}

.transacoes-resumo-card span {
    color: var(--cor-texto-secundario);
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.transacoes-resumo-card strong {
    display: block;
    font-size: 24px;
    line-height: 1.15;
}

.transacoes-resumo-receita {
    border-top: 3px solid var(--cor-receita);
}

.transacoes-resumo-receita strong {
    color: var(--cor-receita);
}

.transacoes-resumo-receita.is-active {
    background: color-mix(in srgb, var(--cor-receita) 9%, var(--cor-superficie));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--cor-receita) 14%, transparent);
}

.transacoes-resumo-receita.is-active::after {
    background: color-mix(in srgb, var(--cor-receita) 14%, var(--cor-superficie));
    color: var(--cor-receita);
    display: inline-flex;
}

.transacoes-resumo-despesa {
    border-top: 3px solid var(--cor-despesa);
}

.transacoes-resumo-despesa strong {
    color: var(--cor-despesa);
}

.transacoes-resumo-despesa.is-active {
    background: color-mix(in srgb, var(--cor-despesa) 8%, var(--cor-superficie));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--cor-despesa) 12%, transparent);
}

.transacoes-resumo-despesa.is-active::after {
    background: color-mix(in srgb, var(--cor-despesa) 12%, var(--cor-superficie));
    color: var(--cor-despesa);
    display: inline-flex;
}

.transacoes-resumo-saldo {
    border-top: 3px solid var(--cor-informacao);
}

.transacoes-resumo-saldo strong {
    color: var(--cor-informacao);
}

.transacoes-resumo-saldo.is-active {
    background: color-mix(in srgb, var(--cor-informacao) 8%, var(--cor-superficie));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--cor-informacao) 12%, transparent);
}

.transacoes-resumo-saldo.is-active::after {
    background: color-mix(in srgb, var(--cor-informacao) 12%, var(--cor-superficie));
    color: var(--cor-informacao);
    display: inline-flex;
}

.transacoes-table-card {
    overflow: hidden;
    padding: 0;
}

.transacoes-table-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 18px 18px 15px;
}

.historico-mes-controles {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.navegador-mes-compacto {
    gap: 4px;
    margin: 0;
}

.navegador-mes-compacto .btn-mes-nav {
    font-size: 24px;
    height: 30px;
    width: 30px;
}

.historico-mes-label {
    color: var(--cor-texto-principal);
    font-size: 13px;
    font-weight: 600;
    min-width: 118px;
    text-align: center;
}

.btn-mes-atual-compacto {
    background: transparent;
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-md);
    color: var(--cor-texto-secundario);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    min-height: 32px;
    padding: 6px 10px;
}

.btn-mes-atual-compacto:hover {
    background: var(--cor-informacao-suave);
    border-color: var(--cor-informacao);
    color: var(--cor-primaria);
}

@media (max-width: 1280px) {
    .transacoes-page .filter-toolbar-main,
    .transacoes-toolbar-main {
        grid-template-columns: minmax(220px, 1fr) auto;
    }

    .transacoes-toolbar-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .transacoes-periodo-row {
        grid-template-columns: minmax(150px, 1fr) auto minmax(135px, 1fr) minmax(135px, 1fr);
    }

    .transacoes-periodo-row #btnFiltrar,
    .transacoes-periodo-row #btnMesAtual,
    .transacoes-periodo-row #btnLimparFiltrosTransacoes {
        width: fit-content;
    }
}

.transacoes-resultado-texto {
    color: var(--cor-texto-secundario);
    display: block;
    font-size: 12px;
    margin-top: 5px;
}

.transacoes-table-heading h2 {
    margin: 0;
}

.transacoes-table-heading p {
    color: var(--cor-texto-secundario);
    font-size: 13px;
    margin: 6px 0 0;
}

.transacoes-page .transacoes-table-card .table-responsive {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
}

.btn-ordenar-tabela {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: inherit;
    gap: 6px;
    padding: 0;
}

.btn-ordenar-tabela span {
    color: var(--cor-texto-secundario);
    font-size: 13px;
}

.btn-ordenar-tabela.ativo,
.btn-ordenar-tabela.ativo span {
    color: var(--cor-primaria);
}

.btn-ordenar-tabela:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--cor-informacao);
    outline-offset: 4px;
}

.transacoes-page #tabelaTransacoes {
    margin-top: 0;
    min-width: 1180px;
}

.transacoes-page #tabelaTransacoes th {
    background: var(--cor-fundo);
    box-shadow: inset 0 -1px 0 var(--cor-borda);
    position: sticky;
    top: 0;
    z-index: 2;
}

.transacoes-page #tabelaTransacoes th,
.transacoes-page #tabelaTransacoes td {
    padding: 12px 11px;
    vertical-align: middle;
}

.transacoes-page #tabelaTransacoes tbody tr:nth-child(even) {
    background: rgba(248, 250, 252, .72);
}

.transacoes-page #tabelaTransacoes tbody tr {
    transition: background-color .16s ease;
}

.transacoes-page #tabelaTransacoes tbody tr:hover {
    background: var(--cor-informacao-suave);
}

:root[data-theme="dark"] .transacoes-page #tabelaTransacoes tbody tr {
    background: var(--table-row-dark);
}

:root[data-theme="dark"] .transacoes-page #tabelaTransacoes tbody tr:nth-child(even) {
    background: var(--table-row-alt-dark);
}

:root[data-theme="dark"] .transacoes-page #tabelaTransacoes tbody tr:hover {
    background: var(--table-row-hover-dark);
}

:root[data-theme="dark"] .transacoes-page #tabelaTransacoes tbody tr:is(.selected, .selecionada, [aria-selected="true"]) {
    background: var(--table-row-selected-dark);
}

.transacoes-page #tabelaTransacoes th:nth-child(8),
.transacoes-page #tabelaTransacoes td:nth-child(8) {
    text-align: right;
}

.transacoes-page #tabelaTransacoes .valor-receita,
.transacoes-page #tabelaTransacoes .valor-despesa {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.transacoes-page #tabelaTransacoes .status-badge,
.transacoes-page #tabelaTransacoes .tipo-badge {
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: .2px;
    padding: 6px 9px;
}

.transacoes-page #tabelaTransacoes .acoes {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.transacoes-page #tabelaTransacoes .button-success-soft,
.transacoes-page #tabelaTransacoes .button-info-soft,
.transacoes-page #tabelaTransacoes .button-danger-soft {
    border-radius: var(--radius-sm);
    font-size: 12px;
    min-height: 32px;
    padding: 6px 9px;
}

/* ==========================
   TABELA
========================== */

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

table {
    width: 100%;
    margin-top: 16px;
    border-collapse: collapse;
    background: var(--cor-superficie);
    min-width: 980px;
}

th,
td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--cor-borda);
    text-align: left;
    font-size: 13px;
}

th {
    background: var(--cor-fundo);
    color: var(--cor-texto-principal);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

tr.receita {
    border-left: 4px solid var(--cor-secundaria);
}

tr.despesa {
    border-left: 4px solid var(--cor-erro);
}

tr:hover {
    background: var(--cor-fundo);
}

.valor-receita {
    color: var(--cor-secundaria);
    font-weight: 700;
}

.valor-despesa {
    color: var(--cor-erro);
    font-weight: 700;
}

.categoria-badge,
.tipo-badge,
.status-badge {
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
    white-space: nowrap;
}

.categoria-badge {
    color: var(--cor-superficie);
}

.tag-receita,
.status-pago {
    color: var(--cor-secundaria);
    background: var(--cor-receita-suave);
    border: 1px solid var(--cor-receita-suave);
}

.tag-despesa,
.status-atrasado {
    color: var(--cor-erro);
    background: var(--cor-erro-suave);
    border: 1px solid var(--cor-erro-suave);
}

.status-pendente {
    color: var(--cor-aviso);
    background: var(--cor-aviso-suave);
    border: 1px solid var(--cor-aviso-suave);
}

.status-texto {
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.acoes {
    display: flex;
    gap: 8px;
}

.btn-excluir-categoria {
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    font-weight: 600;
    background: var(--color-danger);
    border: 1.5px solid var(--color-danger);
    color: #FFFFFF;
}

.btn-excluir-categoria:hover {
    background: color-mix(in srgb, var(--color-danger) 88%, #000000);
}

.sem-registros {
    text-align: center;
    padding: 28px;
    color: var(--cor-texto-secundario);
    font-size: 14px;
}

/* ==========================
   MODAIS
========================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 30px;
    overflow-y: auto;
    z-index: var(--modal-overlay-z, 1200);
}

.modal {
    width: 100%;
    max-width: 420px;
    max-height: calc(100dvh - 60px);
    background: var(--cor-superficie);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
    margin: auto 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: var(--modal-content-z, 1210);
}

.modal-editando {
    border: 2px solid var(--cor-secundaria);
    box-shadow: 0 22px 64px rgba(22, 163, 74, 0.18);
}

.modal-edicao-badge {
    align-items: center;
    background: var(--cor-receita-suave);
    border: 1px solid var(--cor-receita-suave);
    border-radius: 999px;
    color: var(--cor-receita);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 12px;
    padding: 6px 10px;
    text-transform: uppercase;
}

.modal-edicao-badge[hidden] {
    display: none;
}

.modal-grande {
    max-width: 680px;
}

.modal-texto-alerta {
    color: var(--cor-texto-secundario);
    line-height: 1.55;
    margin: 0 0 16px;
}

.exclusao-conta-resumo {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 16px 0;
}

.exclusao-conta-resumo div {
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-md);
    padding: 12px;
}

.exclusao-conta-resumo span {
    color: var(--cor-texto-secundario);
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.exclusao-conta-resumo strong {
    color: var(--cor-texto);
    font-size: 20px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.btn-modal-salvar,
.btn-modal-cancelar {
    min-width: 128px;
    height: var(--control-height);
    padding: 9px 16px;
    border-radius: var(--radius-md);
    border: none;
    font-weight: 700;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

.btn-modal-salvar {
    background: var(--cor-secundaria);
    color: var(--cor-superficie);
}

.btn-modal-salvar:hover {
    background: var(--cor-secundaria);
}

.btn-modal-cancelar {
    background: transparent;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
}

.btn-modal-cancelar:hover {
    background: var(--cor-informacao-suave);
}

.lista-categorias,
.lista-detalhes-transacoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
}

.categoria-item,
.detalhe-transacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--cor-borda);
    border-radius: 10px;
    background: var(--cor-fundo);
}

.categoria-item div,
.detalhe-transacao div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.categoria-item small,
.detalhe-transacao small {
    color: var(--cor-texto-secundario);
    font-size: 12px;
}

.total-detalhes {
    margin-top: 12px;
    padding: 16px;
    border-top: 2px solid var(--cor-borda);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
    font-weight: 700;
    background: var(--cor-fundo);
    border-radius: 10px;
}

.modal-transacao-mobile {
    max-width: 420px;
}

.detalhe-transacao-mobile-conteudo {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.detalhe-transacao-mobile-linha {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.detalhe-transacao-mobile-linha > span:last-child {
    max-width: 55%;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detalhe-transacao-mobile-valor strong {
    font-size: 20px;
}

.detalhe-transacao-mobile-actions {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
}

.detalhe-transacao-mobile-actions .button-info-soft,
.detalhe-transacao-mobile-actions .button-danger-soft {
    min-height: var(--control-height);
    padding: 9px 14px;
    width: 100%;
}

.action-sheet-divider {
    background: var(--cor-borda);
    height: 1px;
    margin: 2px 0 0;
    opacity: .8;
    width: 100%;
}

.action-sheet-close {
    justify-self: center;
    margin-top: 0;
    min-height: var(--control-height-compact);
    padding: 8px 14px;
    width: auto;
}

/* ==========================
   MODAL NOVA TRANSACAO
========================== */

#areaFormulario {
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 30px;
    overflow-y: auto;
}

#areaFormulario .modal-transacao {
    width: 95%;
    max-width: 900px;
    margin: 0 auto;
}

#areaFormulario #formTransacao {
    display: block;
}

.form-grid-modal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 16px;
}

.campo-maior {
    grid-column: span 2;
}

#areaFormulario input:not([type="checkbox"]),
#areaFormulario select {
    width: 100%;
    height: var(--control-height);
}

.select-control-hidden {
    display: none;
}

.segmented-control {
    background: color-mix(in srgb, var(--cor-fundo) 78%, var(--cor-superficie));
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-md);
    display: grid;
    gap: 4px;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    padding: 4px;
}

.segmented-option {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: calc(var(--radius-md) - 2px);
    color: var(--cor-texto-secundario);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    justify-content: center;
    min-height: var(--control-height-compact);
    padding: 7px 10px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.segmented-option:hover,
.segmented-option:focus-visible {
    background: color-mix(in srgb, var(--cor-informacao) 10%, var(--cor-superficie));
    color: var(--cor-informacao);
    outline: 3px solid color-mix(in srgb, var(--cor-informacao) 20%, transparent);
    outline-offset: 2px;
}

.segmented-option.is-active {
    background: color-mix(in srgb, var(--cor-informacao) 14%, var(--cor-superficie));
    border-color: color-mix(in srgb, var(--cor-informacao) 36%, var(--cor-borda));
    color: var(--cor-informacao);
}

.segmented-receita.is-active,
.segmented-efetuado.is-active {
    background: color-mix(in srgb, var(--cor-receita) 16%, var(--cor-superficie));
    border-color: color-mix(in srgb, var(--cor-receita) 38%, var(--cor-borda));
    color: color-mix(in srgb, var(--cor-receita) 78%, #166534);
}

.segmented-despesa.is-active {
    background: color-mix(in srgb, var(--cor-despesa) 14%, var(--cor-superficie));
    border-color: color-mix(in srgb, var(--cor-despesa) 36%, var(--cor-borda));
    color: color-mix(in srgb, var(--cor-despesa) 78%, #991B1B);
}

.campo-valor-prioritario input {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    height: 54px !important;
    letter-spacing: 0;
}

.campo-origem-financeira[hidden],
#grupoContaTransacao[hidden],
#grupoCartaoTransacao[hidden] {
    display: none;
}

.advanced-options {
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-md);
    grid-column: 1 / -1;
    overflow: hidden;
}

.advanced-options summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    list-style: none;
    padding: 11px 13px;
}

.advanced-options summary::-webkit-details-marker {
    display: none;
}

.advanced-options summary span {
    color: var(--cor-texto-principal);
    font-weight: 700;
}

.advanced-options summary small {
    background: var(--cor-informacao-suave);
    border-radius: 999px;
    color: var(--cor-informacao);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
}

.advanced-options-grid {
    border-top: 1px solid var(--cor-borda);
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 13px;
}

.advanced-options .form-group small,
.switch-texto small {
    color: var(--cor-texto-secundario);
    display: block;
    font-size: 11px;
    line-height: 1.35;
    margin-top: 4px;
}

.resumo-transacao-inteligente {
    background: color-mix(in srgb, var(--cor-informacao) 8%, var(--cor-superficie));
    border: 1px solid color-mix(in srgb, var(--cor-informacao) 24%, var(--cor-borda));
    border-radius: var(--radius-md);
    color: var(--cor-texto-principal);
    font-size: 13px;
    grid-column: 1 / -1;
    line-height: 1.45;
    padding: 12px 13px;
}

.resumo-transacao-inteligente strong {
    display: block;
    font-size: 14px;
    margin-bottom: 3px;
}

#areaFormulario .categoria-container {
    display: flex;
    gap: 10px;
}

#areaFormulario .categoria-container select {
    flex: 1;
}

#areaFormulario .btn-nova-categoria {
    width: var(--control-height);
    height: var(--control-height);
    flex-shrink: 0;
    background: var(--cor-informacao);
    color: var(--cor-superficie);
    border: none;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

#areaFormulario .btn-nova-categoria:hover {
    background: var(--cor-informacao);
}

/* ==========================
   SWITCH REPETIR MENSALMENTE
========================== */

#areaFormulario .checkbox-area {
    grid-column: span 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 10px;
    padding-left: 4px;
}

#areaFormulario .advanced-options .checkbox-area {
    grid-column: auto;
    margin-top: 0;
    padding-left: 0;
}

.switch {
    position: relative;
    width: 52px;
    height: 28px;
    display: inline-block;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: var(--cor-borda);
    border-radius: 50px;
    transition: 0.3s;
}

.slider::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    background: var(--cor-superficie);
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
}

.switch input:checked + .slider {
    background: var(--cor-secundaria);
}

.switch input:checked + .slider::before {
    transform: translateX(24px);
}

.switch-texto {
    font-size: 15px;
    font-weight: 600;
    color: var(--cor-texto-principal);
}

.aviso-fatura-cartao {
    grid-column: span 2;
    background: var(--cor-receita-suave);
    border: 1px solid var(--cor-receita-suave);
    border-left: 4px solid var(--cor-secundaria);
    border-radius: 8px;
    color: var(--cor-receita);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
}

.aviso-fatura-cartao[hidden] {
    display: none;
}

.aviso-fatura-cartao strong {
    font-size: 13px;
}

.aviso-fatura-cartao span {
    font-size: 13px;
    line-height: 1.45;
}

/* ==========================
   FLATPICKR
========================== */

.flatpickr-calendar {
    z-index: 99999 !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.18) !important;
    overflow: hidden;
}

.flatpickr-months {
    background: var(--cor-secundaria);
}

.flatpickr-current-month {
    color: var(--cor-superficie);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-top: 0;
}

.flatpickr-current-month .cur-month {
    margin: 0 6px 0 0;
    font-weight: 600;
    line-height: 28px;
}

.flatpickr-current-month .numInputWrapper {
    width: 7ch;
    height: 28px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year {
    color: var(--cor-superficie) !important;
    font-weight: 600;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    line-height: 28px !important;
}

.flatpickr-weekdays {
    background: var(--cor-fundo);
}

.flatpickr-weekday {
    color: var(--cor-texto-secundario) !important;
    font-weight: 600;
}

.flatpickr-day.selected {
    background: var(--cor-secundaria) !important;
    border-color: var(--cor-secundaria) !important;
}

.flatpickr-day.today {
    border-color: var(--cor-informacao) !important;
}

.flatpickr-day:hover {
    background: var(--cor-receita-suave) !important;
}

/* ==========================
   FOOTER
========================== */

footer {
    text-align: center;
    color: var(--cor-texto-secundario);
    padding: 20px;
    font-size: 13px;
}

.app-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    letter-spacing: 0;
    padding-top: 18px;
}

.app-footer-version {
    color: var(--cor-texto-principal);
    font-size: 13px;
    font-weight: 700;
}

.app-footer-copyright {
    color: var(--cor-texto-secundario);
    font-size: 12px;
    font-weight: 500;
}

.institutional-page {
    background:
        radial-gradient(circle at top left, rgba(15, 76, 129, 0.12), transparent 28%),
        radial-gradient(circle at top right, rgba(29, 185, 84, 0.09), transparent 24%),
        var(--cor-fundo);
    min-height: 100vh;
}

.institutional-shell {
    margin: 0 auto;
    max-width: 920px;
    padding: 32px 20px 40px;
}

.institutional-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.institutional-header-actions {
    align-items: center;
    display: flex;
    gap: 12px;
}

.institutional-brand {
    text-decoration: none;
}

.institutional-brand .app-brand-symbol {
    width: 46px;
    height: 46px;
}

.institutional-brand .app-brand-wordmark {
    width: 104px;
}

.institutional-card {
    margin-bottom: 18px;
    padding: 28px;
}

.institutional-card h1 {
    color: var(--cor-texto-principal);
    font-size: 32px;
    line-height: 1.15;
    margin-bottom: 10px;
}

.institutional-card p {
    color: var(--cor-texto-secundario);
    line-height: 1.65;
}

.institutional-meta-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 24px 0;
}

.institutional-meta-item {
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: 12px;
    padding: 16px;
}

.institutional-meta-item span {
    color: var(--cor-texto-secundario);
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.institutional-meta-item strong {
    color: var(--cor-texto-principal);
    font-size: 15px;
}

.institutional-sections {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.institutional-section {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.institutional-section h2 {
    color: var(--cor-texto-principal);
    font-size: 18px;
    margin-bottom: 10px;
}

.institutional-section ul {
    color: var(--cor-texto-secundario);
    line-height: 1.6;
    margin: 0;
    padding-left: 18px;
}

.institutional-nav {
    align-items: center;
    background: color-mix(in srgb, var(--cor-superficie) 94%, transparent);
    border: 1px solid var(--cor-borda);
    border-radius: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 18px;
    padding: 6px;
}

.institutional-link {
    border-radius: 10px;
    color: var(--cor-texto-secundario);
    font-size: 14px;
    font-weight: 600;
    padding: 9px 12px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.institutional-link:hover,
.institutional-link:focus-visible {
    background: #EEF4FF;
    color: var(--cor-primaria);
    outline: none;
}

.institutional-link.is-current {
    background: color-mix(in srgb, var(--cor-primaria) 10%, var(--cor-superficie));
    color: var(--cor-primaria);
}

.institutional-footer {
    color: var(--cor-texto-secundario);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    padding: 12px 0 4px;
    text-align: center;
}

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

@media (max-width: 1500px) {
    .cards-menores {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1300px) {
    .transacoes-toolbar-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transacoes-toolbar-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .transacoes-periodo-row {
        grid-template-columns: minmax(145px, .7fr) auto repeat(2, minmax(145px, 1fr));
    }

    .transacoes-periodo-row #btnFiltrar,
    .transacoes-periodo-row #btnMesAtual {
        width: 100%;
    }
}

@media (max-width: 1100px) {
    .cards-menores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-page .dashboard-insights-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-planning-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-page .dashboard-primary-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .forecast-main-grid,
    .forecast-secondary-grid {
        grid-template-columns: 1fr;
    }

    .forecast-main-grid {
        grid-template-areas:
            "chart"
            "events"
            "secondary";
    }

    .transacoes-periodo-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .layout {
        flex-direction: column;
    }

    .sidebar {
        position: relative;
        width: 100%;
        min-height: auto;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 20px;
    }

    .menu {
        flex-direction: row;
        overflow-x: auto;
    }

    .menu-item {
        white-space: nowrap;
    }

    .cards,
    .cards-menores,
    .dashboard-contas-resumo,
    .dashboard-lista-contas,
    .dashboard-grid,
    .relatorios-grid {
        grid-template-columns: 1fr;
    }

    .filtro-periodo {
        flex-direction: column;
        align-items: stretch;
    }

    .navegador-mes {
        gap: 8px;
    }

    .mes-atual-label {
        min-width: 142px;
        height: 38px;
        padding: 0 14px;
        font-size: 14px;
    }

    #btnFiltrar,
    #btnMesAtual {
        width: 100%;
    }

    .topo-formulario {
        flex-direction: column;
    }

    .dashboard-page .header-dashboard {
        margin-bottom: 24px;
    }

    .dashboard-periodo-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .dashboard-page .dashboard-periodo .filtro-periodo {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-page .dashboard-periodo .form-group {
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
    }

    .dashboard-page .dashboard-chart-primary {
        min-height: 400px;
        padding: 22px;
    }

    .relatorios-periodo-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .relatorios-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .relatorios-filter-bar .form-group {
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
    }

    .dashboard-page .grafico-container-principal {
        height: 310px;
    }

    .institutional-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .institutional-header-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .institutional-header-actions .status-badge {
        align-self: flex-start;
    }

    .institutional-meta-grid {
        grid-template-columns: 1fr;
    }

    .institutional-nav {
        flex-direction: column;
    }

    .institutional-link {
        text-align: center;
        width: 100%;
    }

    .transacoes-page .transacoes-header {
        margin-bottom: 24px;
    }

    .transacoes-toolbar-main,
    .transacoes-periodo-row,
    .transacoes-resumo {
        grid-template-columns: 1fr;
    }

    .dashboard-page .dashboard-primary-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transacoes-toolbar-actions {
        grid-column: auto;
        width: 100%;
    }

    .transacoes-toolbar-actions .btn-secondary,
    .transacoes-toolbar-actions .button-success-solid,
    .transacoes-toolbar-actions #btnNovaTransacao {
        flex: 1 1 0;
    }

    .transacoes-periodo-row {
        align-items: stretch;
    }

    .transacoes-periodo-row .navegador-mes {
        justify-content: flex-start;
    }

}

@media (min-width: 768px) and (max-width: 900px) {
    .dashboard-page .layout {
        flex-direction: row;
    }

    .dashboard-page .sidebar {
        height: 100vh;
        min-height: 100vh;
        position: fixed;
        width: 240px;
    }

    .dashboard-page .main-content {
        margin-left: 240px;
        padding: 20px;
        width: calc(100% - 240px);
    }

    .dashboard-page .menu {
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .dashboard-page .menu-item {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .form-grid-modal {
        grid-template-columns: 1fr;
    }

    .aviso-fatura-cartao,
    .campo-maior,
    #areaFormulario .checkbox-area {
        grid-column: span 1;
    }

    .modal-actions {
        flex-direction: column;
    }

    .btn-modal-cancelar,
    .btn-modal-salvar {
        width: 100%;
    }

    .exclusao-conta-resumo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 22px;
    }

    .card p {
        font-size: 24px;
    }

    .grafico-section {
        min-height: 340px;
    }

    .dashboard-page .dashboard-welcome h1 {
        font-size: var(--page-title-size);
    }

    .dashboard-page .dashboard-periodo,
    .dashboard-page .dashboard-intelligence,
    .dashboard-page .dashboard-chart-primary,
    .dashboard-page .dashboard-category-card,
    .dashboard-page .resumo-section,
    .dashboard-page .dashboard-contas,
    .dashboard-page .table-section {
        padding: 20px;
    }

    .dashboard-page .dashboard-realized {
        padding-top: 18px;
    }

    .dashboard-page .dashboard-primary-cards,
    .dashboard-realized-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-realized-grid > div,
    .dashboard-realized-grid > div:first-child {
        padding: 13px 0;
    }

    .dashboard-realized-grid > div + div {
        border-left: 0;
        border-top: 1px solid var(--cor-borda);
    }

    .dashboard-page .dashboard-chart-primary {
        min-height: 360px;
    }

    .dashboard-page .grafico-container-principal,
    .dashboard-page .grafico-container-categorias {
        height: 270px;
    }

    .transacoes-header h1 {
        font-size: var(--page-title-size);
    }

    .transacoes-toolbar,
    .transacoes-resumo-card,
    .transacoes-table-heading {
        padding: 20px;
    }

    .transacoes-table-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    .historico-mes-controles {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .navegador-mes-compacto {
        justify-content: space-between;
        width: 100%;
    }

    .btn-mes-atual-compacto {
        width: 100%;
    }

    .transacoes-toolbar-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .transacoes-resumo-card {
        min-height: 116px;
    }

    .transacoes-resumo-card strong {
        font-size: 24px;
    }

    .relatorios-toolbar,
    .relatorio-chart-card,
    .relatorio-table-card,
    .relatorio-auditoria-card {
        padding: 18px;
    }

    .relatorio-chart-card {
        min-height: 360px;
    }

    .relatorio-chart-card .grafico-container {
        height: 270px;
    }

    .relatorios-page .relatorio-table-card .table-responsive,
    .relatorios-page .relatorio-auditoria-card .table-responsive {
        overflow: visible;
    }

    .relatorios-page .tabela-relatorio,
    .relatorios-page .tabela-relatorio tbody,
    .relatorios-page .tabela-relatorio tr,
    .relatorios-page .tabela-relatorio td {
        display: block;
        width: 100%;
    }

    .relatorios-page .tabela-relatorio thead {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .relatorios-page .tabela-relatorio tr {
        border: 1px solid var(--cor-borda);
        border-radius: var(--radius-md);
        margin-bottom: 12px;
        overflow: hidden;
    }

    .relatorios-page .tabela-relatorio td {
        align-items: start;
        border-bottom: 1px solid var(--cor-borda);
        display: grid;
        gap: 12px;
        grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
        padding: 11px 12px;
        text-align: left !important;
    }

    .relatorios-page .tabela-relatorio td:last-child {
        border-bottom: 0;
    }

    .relatorios-page .tabela-relatorio td::before {
        color: var(--cor-texto-secundario);
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .relatorios-page .tabela-relatorio .sem-registros {
        display: block;
        text-align: center !important;
    }

    .relatorios-page .tabela-relatorio .sem-registros::before {
        content: none;
    }
}

@media (max-width: 600px) {
    .dashboard-intelligence {
        padding: 20px;
    }

    .insight-item {
        gap: 10px;
        grid-template-columns: 1fr;
    }

    .insight-badge {
        min-width: 0;
        width: fit-content;
    }

    .forecast-summary-grid {
        grid-template-columns: 1fr;
    }

    .forecast-chart-card,
    .forecast-events-card,
    .forecast-goals-card,
    .forecast-invoice-card {
        padding: 18px;
    }

    .forecast-chart-container {
        height: 240px;
    }

    .forecast-event-item,
    .forecast-goal-item {
        grid-template-columns: 1fr;
    }

    .forecast-event-item > strong {
        text-align: left;
    }
}

/* =====================================
   CATEGORIAS
===================================== */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--content-gap);
}

.page-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.page-header p {
    margin: var(--page-subtitle-margin-top) 0 0;
    color: var(--cor-texto-secundario);
    font-size: var(--page-subtitle-size);
    line-height: var(--page-subtitle-line-height);
    max-width: var(--page-subtitle-max-width);
}

.page-title,
.page-header h1,
.header-dashboard h1 {
    color: var(--cor-texto-principal);
    font-size: var(--page-title-size);
    font-weight: 700;
    letter-spacing: 0;
    line-height: var(--page-title-line-height);
    margin: var(--page-title-margin);
}

.btn-primary {
    background: var(--color-primary);
    color: #FFFFFF;
    border: 1px solid var(--color-primary);
    border-radius: var(--button-radius);
    min-height: var(--control-height);
    padding: 10px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.btn-primary:hover {
    background: color-mix(in srgb, var(--color-primary) 88%, #000000);
}

.categorias-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.categoria-bloco {
    background: var(--cor-superficie);
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

.categoria-bloco-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.categoria-bloco-header h2 {
    margin: 0;
}

.categoria-bloco-header small {
    color: var(--cor-texto-secundario);
}

.categoria-contador {
    background: var(--cor-fundo);
    color: var(--cor-texto-principal);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.lista-categorias-pagina {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.categoria-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-md);
    padding: 14px;
    transition: 0.2s;
}

.categoria-card:hover {
    border-color: var(--cor-borda);
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.categoria-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.categoria-info strong {
    font-size: 20px;
}

.categoria-badge-receita {
    display: inline-block;
    background: var(--cor-receita-suave);
    color: var(--cor-receita);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.categoria-badge-despesa {
    display: inline-block;
    background: var(--cor-erro-suave);
    color: var(--cor-erro);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.categoria-acoes {
    display: flex;
    gap: 10px;
}

.btn-editar-categoria {
    background: var(--cor-informacao-suave);
    color: var(--cor-informacao);
    border: 1px solid var(--cor-informacao-suave);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 600;
}

.btn-editar-categoria:hover {
    background: var(--cor-informacao-suave);
}

.btn-excluir-categoria {
    background: var(--cor-erro-suave);
    color: var(--cor-erro);
    border: 1px solid var(--cor-erro-suave);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 600;
}

.btn-excluir-categoria:hover {
    background: var(--cor-erro-suave);
}

/* Componentes reutilizáveis do Design System */

.content-card {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--card-radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    padding: var(--card-padding);
}

.filter-bar {
    align-items: end;
    display: grid;
    gap: 16px;
}

.search-box {
    min-width: 0;
}

.input-control {
    font-family: inherit;
}

.primary-button,
.secondary-button,
.outline-button,
.danger-button,
.ghost-button,
.button-success-solid,
.button-success-soft,
.button-info-solid,
.button-info-soft,
.button-danger-solid,
.button-danger-soft,
.button-neutral,
.button-month-current,
.button-cancel-solid {
    align-items: center;
    appearance: none;
    border-radius: var(--button-radius);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: var(--font-base);
    font-weight: var(--button-font-weight);
    justify-content: center;
    line-height: 1.2;
    min-height: var(--control-height);
    padding: var(--button-padding);
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.outline-button:focus-visible,
.danger-button:focus-visible,
.ghost-button:focus-visible,
.button-success-solid:focus-visible,
.button-success-soft:focus-visible,
.button-info-solid:focus-visible,
.button-info-soft:focus-visible,
.button-danger-solid:focus-visible,
.button-danger-soft:focus-visible,
.button-neutral:focus-visible,
.button-month-current:focus-visible,
.button-cancel-solid:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cor-informacao) 28%, transparent);
    outline-offset: 2px;
}

.primary-button {
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #FFFFFF;
}

.primary-button:hover {
    background: color-mix(in srgb, var(--color-primary) 88%, #000000);
    border-color: color-mix(in srgb, var(--color-primary) 88%, #000000);
    box-shadow: 0 7px 16px color-mix(in srgb, var(--color-primary) 22%, transparent);
    transform: translateY(-1px);
}

.secondary-button {
    background: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    color: #FFFFFF;
}

.secondary-button:hover {
    background: color-mix(in srgb, var(--color-secondary) 88%, #000000);
    border-color: color-mix(in srgb, var(--color-secondary) 88%, #000000);
}

.outline-button {
    background: transparent;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
}

.outline-button:hover {
    background: var(--cor-informacao-suave);
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
}

.danger-button {
    background: var(--color-danger);
    border: 1px solid var(--color-danger);
    color: #FFFFFF;
}

.danger-button:hover {
    background: color-mix(in srgb, var(--color-danger) 88%, #000000);
    border-color: color-mix(in srgb, var(--color-danger) 88%, #000000);
}

.button-success-solid,
.primary-button,
#btnNovaTransacao,
#btnFiltrar,
.btn-modal-salvar,
.btn-pagar-fatura,
#areaFormulario .btn-nova-categoria,
.btn-primary {
    background: var(--cor-secundaria);
    border: 1px solid var(--cor-secundaria);
    color: #FFFFFF;
}

.button-success-solid:hover,
.primary-button:hover,
#btnNovaTransacao:hover,
#btnFiltrar:hover,
.btn-modal-salvar:hover,
.btn-pagar-fatura:hover,
#areaFormulario .btn-nova-categoria:hover,
.btn-primary:hover {
    background: color-mix(in srgb, var(--cor-secundaria) 86%, #000000);
    border-color: color-mix(in srgb, var(--cor-secundaria) 86%, #000000);
}

.button-success-soft {
    background: color-mix(in srgb, var(--cor-receita) 13%, var(--cor-superficie));
    border: 1px solid color-mix(in srgb, var(--cor-receita) 32%, var(--cor-superficie));
    color: color-mix(in srgb, var(--cor-receita) 72%, #064E3B);
}

.button-success-soft:hover {
    background: color-mix(in srgb, var(--cor-receita) 20%, var(--cor-superficie));
    border-color: color-mix(in srgb, var(--cor-receita) 44%, var(--cor-superficie));
}

.button-success-soft:active {
    background: color-mix(in srgb, var(--cor-receita) 24%, var(--cor-superficie));
    border-color: color-mix(in srgb, var(--cor-receita) 50%, var(--cor-superficie));
}

.button-info-solid,
.button-month-current,
#btnMesAtual,
.btn-mes-atual-compacto,
.mes-atual-label {
    background: var(--cor-informacao);
    border: 1px solid var(--cor-informacao);
    color: #FFFFFF;
}

.button-info-solid:hover,
.button-month-current:hover,
#btnMesAtual:hover,
.btn-mes-atual-compacto:hover,
.mes-atual-label:hover {
    background: color-mix(in srgb, var(--cor-informacao) 86%, #000000);
    border-color: color-mix(in srgb, var(--cor-informacao) 86%, #000000);
    color: #FFFFFF;
}

.button-info-soft,
.btn-editar-categoria {
    background: color-mix(in srgb, var(--cor-informacao) 11%, var(--cor-superficie));
    border: 1px solid color-mix(in srgb, var(--cor-informacao) 30%, var(--cor-superficie));
    color: color-mix(in srgb, var(--cor-informacao) 82%, #0F4C81);
}

.button-info-soft:hover,
.btn-editar-categoria:hover {
    background: color-mix(in srgb, var(--cor-informacao) 18%, var(--cor-superficie));
    border-color: color-mix(in srgb, var(--cor-informacao) 44%, var(--cor-superficie));
}

.button-info-soft:active {
    background: color-mix(in srgb, var(--cor-informacao) 22%, var(--cor-superficie));
    border-color: color-mix(in srgb, var(--cor-informacao) 50%, var(--cor-superficie));
}

.button-danger-solid,
.button-cancel-solid,
.danger-button {
    background: var(--cor-erro);
    border: 1px solid var(--cor-erro);
    color: #FFFFFF;
}

.button-danger-solid:hover,
.button-cancel-solid:hover,
.danger-button:hover {
    background: color-mix(in srgb, var(--cor-erro) 88%, #000000);
    border-color: color-mix(in srgb, var(--cor-erro) 88%, #000000);
}

.button-danger-soft,
.btn-excluir-categoria,
.btn-desfazer-pagamento,
.btn-limpar-auditoria {
    background: color-mix(in srgb, var(--cor-erro) 11%, var(--cor-superficie));
    border: 1px solid color-mix(in srgb, var(--cor-erro) 30%, var(--cor-superficie));
    color: color-mix(in srgb, var(--cor-erro) 82%, #7F1D1D);
}

.button-danger-soft:hover,
.btn-excluir-categoria:hover,
.btn-desfazer-pagamento:hover,
.btn-limpar-auditoria:hover {
    background: color-mix(in srgb, var(--cor-erro) 18%, var(--cor-superficie));
    border-color: color-mix(in srgb, var(--cor-erro) 44%, var(--cor-superficie));
}

.button-danger-soft:active {
    background: color-mix(in srgb, var(--cor-erro) 22%, var(--cor-superficie));
    border-color: color-mix(in srgb, var(--cor-erro) 50%, var(--cor-superficie));
}

.button-neutral {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto-principal);
}

.button-neutral:hover {
    background: var(--cor-fundo);
    border-color: var(--cor-informacao);
    color: var(--cor-informacao);
}

.primary-button:disabled,
.secondary-button:disabled,
.outline-button:disabled,
.danger-button:disabled,
.button-success-solid:disabled,
.button-success-soft:disabled,
.button-info-solid:disabled,
.button-info-soft:disabled,
.button-danger-solid:disabled,
.button-danger-soft:disabled,
.button-neutral:disabled,
.button-month-current:disabled,
.button-cancel-solid:disabled,
.btn-modal-salvar:disabled,
.btn-modal-cancelar:disabled,
.btn-pagar-fatura:disabled {
    cursor: not-allowed;
    opacity: .58;
    transform: none;
}

:root[data-theme="dark"] .button-success-soft {
    background: color-mix(in srgb, var(--cor-receita) 18%, var(--cor-superficie));
    border-color: color-mix(in srgb, var(--cor-receita) 42%, var(--cor-superficie));
    color: #BBF7D0;
}

:root[data-theme="dark"] .button-info-soft,
:root[data-theme="dark"] .btn-editar-categoria {
    background: color-mix(in srgb, var(--cor-informacao) 18%, var(--cor-superficie));
    border-color: color-mix(in srgb, var(--cor-informacao) 42%, var(--cor-superficie));
    color: #BFDBFE;
}

:root[data-theme="dark"] .button-danger-soft,
:root[data-theme="dark"] .btn-excluir-categoria,
:root[data-theme="dark"] .btn-desfazer-pagamento,
:root[data-theme="dark"] .btn-limpar-auditoria {
    background: color-mix(in srgb, var(--cor-erro) 18%, var(--cor-superficie));
    border-color: color-mix(in srgb, var(--cor-erro) 42%, var(--cor-superficie));
    color: #FECACA;
}

.ghost-button {
    background: transparent;
    border: 1px solid transparent;
    color: var(--cor-texto-secundario);
}

.ghost-button:hover {
    background: var(--cor-informacao-suave);
    color: var(--cor-informacao);
}

.button-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

:root[data-theme="dark"] .outline-button {
    border-color: color-mix(in srgb, var(--cor-informacao) 72%, var(--cor-borda));
    color: color-mix(in srgb, var(--cor-informacao) 64%, #FFFFFF);
}

:root[data-theme="dark"] .outline-button:hover {
    background: color-mix(in srgb, var(--cor-informacao) 16%, var(--cor-superficie));
    border-color: var(--cor-informacao);
    color: #FFFFFF;
}

.empty-state {
    color: var(--cor-texto-secundario);
    padding: 32px 16px;
    text-align: center;
}

/* Categorias premium */

.categorias-page-premium .categorias-header {
    margin-bottom: 24px;
}

.categorias-header h1 {
    color: var(--cor-texto-principal);
    font-size: var(--page-title-size);
    font-weight: 700;
    letter-spacing: 0;
    line-height: var(--page-title-line-height);
}

.categorias-header p {
    font-size: 15px;
    line-height: 1.5;
    margin-top: 8px;
}

.categorias-toolbar {
    margin-bottom: 24px;
}

.categorias-filter-bar {
    grid-template-columns: minmax(260px, 1fr) minmax(180px, .35fr) auto;
}

.categorias-filter-bar .primary-button {
    min-height: var(--control-height);
    padding: 9px 16px;
    white-space: nowrap;
}

.categorias-resumo {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 24px;
}

.categorias-resumo-total {
    border-top: 3px solid var(--cor-informacao);
}

.categorias-resumo-total > strong {
    color: var(--cor-informacao);
}

.categorias-resumo-receitas {
    border-top: 3px solid var(--cor-receita);
}

.categorias-resumo-receitas > strong {
    color: var(--cor-receita);
}

.categorias-resumo-despesas {
    border-top: 3px solid var(--cor-despesa);
}

.categorias-resumo-despesas > strong {
    color: var(--cor-despesa);
}

.categorias-lists-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.categoria-grupo {
    min-width: 0;
}

.categorias-page-premium .categoria-bloco-header {
    margin-bottom: 16px;
}

.categorias-page-premium .categoria-bloco-header h2 {
    font-size: 22px;
    font-weight: 600;
}

.categorias-page-premium .categoria-contador {
    background: var(--cor-fundo);
    color: var(--cor-texto-secundario);
    padding: 5px 10px;
}

.categorias-grid {
    gap: 16px;
}

.categoria-item-card {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-start;
    min-width: 0;
    padding: 16px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.categoria-item-card:hover {
    border-color: color-mix(in srgb, var(--cor-primaria) 28%, var(--cor-borda));
    box-shadow: 0 11px 28px rgba(15, 23, 42, .075);
    transform: translateY(-2px);
}

.categoria-card-header {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.categoria-item-card .categoria-info {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    gap: 12px;
    min-width: 0;
}

.categoria-item-card .categoria-info > div {
    min-width: 0;
}

.categoria-item-card .categoria-info strong {
    color: var(--cor-texto-principal);
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 7px;
    overflow-wrap: anywhere;
}

.categoria-cor {
    border: 3px solid var(--cor-superficie);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--cor-borda);
    flex: 0 0 auto;
    height: 28px;
    width: 28px;
}

.categoria-cor-inline {
    display: inline-block;
    height: 14px;
    margin-right: 8px;
    vertical-align: -1px;
    width: 14px;
}

.categoria-paleta {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(6, minmax(28px, 1fr));
}

.categoria-paleta-opcao {
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 6px 14px rgba(15, 23, 42, .08);
    cursor: pointer;
    min-height: 32px;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    width: 100%;
}

.categoria-paleta-opcao:hover,
.categoria-paleta-opcao:focus-visible {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 10px 20px rgba(15, 23, 42, .12);
    outline: none;
    transform: translateY(-1px);
}

.categoria-paleta-opcao.selecionada {
    border-color: var(--cor-texto-principal);
    box-shadow: 0 0 0 3px var(--cor-superficie), 0 0 0 5px var(--cor-primaria);
}

.categoria-status-cadastrada {
    background: var(--cor-fundo);
    color: var(--cor-texto-secundario);
}

.categoria-card-meta {
    border-bottom: 1px solid var(--cor-borda);
    border-top: 1px solid var(--cor-borda);
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px 0;
}

.categoria-card-meta span,
.categoria-card-meta strong {
    display: block;
}

.categoria-card-meta span {
    color: var(--cor-texto-secundario);
    font-size: 13px;
    margin-bottom: 6px;
}

.categoria-card-meta strong {
    align-items: center;
    color: var(--cor-texto-principal);
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 7px;
    overflow-wrap: anywhere;
}

.categoria-card-meta i {
    border: 1px solid var(--cor-borda);
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    height: 14px;
    width: 14px;
}

.categoria-item-card .categoria-acoes {
    justify-content: flex-end;
}

.categoria-item-card .categoria-acoes button {
    min-height: 34px;
    padding: 7px 11px;
}

.btn-limpar-auditoria {
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    min-height: 36px;
    padding: 8px 12px;
}

@media (max-width: 1100px) {
    .categorias-lists-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .categorias-filter-bar,
    .categorias-resumo {
        grid-template-columns: 1fr;
    }

    .categorias-filter-bar .primary-button {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .categorias-header h1 {
        font-size: var(--page-title-size);
    }

    .content-card {
        padding: 20px;
    }

    .categoria-card-header {
        flex-direction: column;
    }

    .categoria-card-meta {
        grid-template-columns: 1fr;
    }

    .categoria-item-card .categoria-acoes {
        width: 100%;
    }

    .categoria-item-card .categoria-acoes button {
        flex: 1 1 0;
    }
}

/* =====================================
   CONTAS / CARTEIRAS
===================================== */

.contas-page .contas-header {
    margin-bottom: 24px;
}

.contas-header h1 {
    color: var(--cor-texto-principal);
    font-size: var(--page-title-size);
    font-weight: 700;
    letter-spacing: 0;
    line-height: var(--page-title-line-height);
}

.contas-header p {
    font-size: var(--page-subtitle-size);
    line-height: var(--page-subtitle-line-height);
    margin-top: var(--page-subtitle-margin-top);
    max-width: var(--page-subtitle-max-width);
}

.contas-toolbar {
    margin-bottom: 20px;
    padding: 18px;
}

.contas-toolbar-main {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(260px, 1.5fr) minmax(170px, .75fr) minmax(150px, .65fr) auto;
}

.contas-toolbar-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.contas-toolbar-actions .btn-secondary,
.contas-toolbar-actions .btn-primary {
    min-height: var(--control-height);
    padding: 10px 16px;
    white-space: nowrap;
}

.contas-toolbar-actions .btn-secondary {
    background: var(--cor-superficie);
    border: 1.5px solid var(--cor-borda);
    color: var(--cor-texto-principal);
}

.contas-toolbar-actions .btn-secondary:hover {
    background: var(--cor-fundo);
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
}

.contas-toolbar-actions .btn-primary {
    background: var(--cor-secundaria);
    border-color: var(--cor-secundaria);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--cor-secundaria) 18%, transparent);
}

.contas-resumo {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.contas-resumo-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 122px;
    padding: 18px;
}

.contas-resumo span,
.conta-saldo small {
    color: var(--cor-texto-secundario);
    font-size: 13px;
    font-weight: 600;
}

.contas-resumo strong {
    color: var(--cor-texto-principal);
    font-size: 23px;
    line-height: 1.2;
}

.contas-resumo-card small {
    color: var(--cor-texto-secundario);
    font-size: 12px;
    line-height: 1.4;
}

.contas-resumo-saldo {
    border-top: 3px solid var(--cor-informacao);
}

.contas-resumo-bancarias {
    border-top: 3px solid var(--cor-primaria);
}

.contas-resumo-carteiras {
    border-top: 3px solid var(--cor-receita);
}

.contas-resumo-investimentos {
    border-top: 3px solid var(--cor-destaque);
}

.contas-resumo-inativas {
    border-top: 3px solid var(--cor-texto-secundario);
}

.contas-listagem-section {
    margin-bottom: 24px;
}

.contas-listagem-header {
    align-items: end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.contas-listagem-header h2 {
    color: var(--cor-texto-principal);
    font-size: 20px;
    margin: 0;
}

.contas-listagem-header p {
    color: var(--cor-texto-secundario);
    font-size: 13px;
    margin: 6px 0 0;
}

.contas-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.conta-card {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 18px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.conta-card:hover {
    border-color: color-mix(in srgb, var(--cor-primaria) 30%, var(--cor-borda));
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
    transform: translateY(-2px);
}

.conta-card-header {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.conta-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.conta-info strong {
    color: var(--cor-texto-principal);
    font-size: 17px;
    line-height: 1.35;
    word-break: break-word;
}

.conta-detalhes {
    border-bottom: 1px solid var(--cor-borda);
    border-top: 1px solid var(--cor-borda);
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px 0;
}

.conta-detalhes div {
    min-width: 0;
}

.conta-detalhes small,
.conta-detalhes span {
    display: block;
}

.conta-detalhes small {
    color: var(--cor-texto-secundario);
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.conta-detalhes span {
    color: var(--cor-texto-principal);
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.conta-status-ativa,
.conta-status-inativa {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.conta-status-ativa {
    background: var(--cor-receita-suave);
    color: var(--cor-receita);
}

.conta-status-inativa {
    background: var(--cor-fundo);
    color: var(--cor-texto-secundario);
}

.conta-saldo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.conta-saldo strong {
    font-size: 23px;
    line-height: 1.2;
}

.conta-saldo span {
    color: var(--cor-texto-secundario);
    font-size: 12px;
}

.conta-saldo strong.neutro,
.contas-resumo strong.neutro {
    color: var(--cor-texto-secundario);
}

.conta-card .categoria-acoes {
    flex: 0 0 auto;
}

.conta-card .categoria-acoes button {
    min-height: 36px;
    padding: 8px 12px;
}

@media (max-width: 1300px) {
    .contas-toolbar-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contas-toolbar-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .contas-resumo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 900px) {
    .contas-page .contas-header {
        margin-bottom: 24px;
    }

    .contas-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {
    .contas-header h1 {
        font-size: var(--page-title-size);
    }

    .contas-toolbar,
    .contas-resumo-card,
    .conta-card {
        padding: 20px;
    }

    .contas-toolbar-main,
    .contas-resumo {
        grid-template-columns: 1fr;
    }

    .contas-toolbar-actions {
        align-items: stretch;
        flex-direction: column;
        grid-column: auto;
    }

    .contas-toolbar-actions .btn-secondary,
    .contas-toolbar-actions .btn-primary {
        width: 100%;
    }

    .conta-card-header {
        flex-direction: column;
        width: 100%;
    }

    .conta-card .categoria-acoes {
        width: 100%;
    }

}

/* =====================================
   CARTÕES PREMIUM
===================================== */

.cartoes-page .cartoes-header {
    margin-bottom: 24px;
}

.cartoes-header h1 {
    color: var(--cor-texto-principal);
    font-size: var(--page-title-size);
    font-weight: 700;
    letter-spacing: 0;
    line-height: var(--page-title-line-height);
}

.cartoes-header p {
    font-size: var(--page-subtitle-size);
    line-height: var(--page-subtitle-line-height);
    margin-top: var(--page-subtitle-margin-top);
    max-width: var(--page-subtitle-max-width);
}

.page-toolbar {
    margin-bottom: 20px;
    padding: 18px;
}

.filter-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-toolbar-main {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(260px, 1fr) auto auto;
}

.filter-toolbar-panel {
    border-top: 1px solid var(--cor-borda);
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    padding-top: 12px;
}

.filter-toolbar-panel[hidden] {
    display: none;
}

.filter-toggle-button {
    min-height: 40px;
    white-space: nowrap;
}

.filter-chips {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 28px;
}

.filter-chip {
    background: color-mix(in srgb, var(--cor-informacao) 11%, var(--cor-superficie));
    border: 1px solid color-mix(in srgb, var(--cor-informacao) 20%, var(--cor-borda));
    border-radius: 999px;
    color: var(--cor-informacao);
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    padding: 7px 10px;
}

.filter-chip-muted {
    background: var(--cor-fundo);
    border-color: var(--cor-borda);
    color: var(--cor-texto-secundario);
}

.transacoes-page #transacoesChipsFiltros {
    display: none;
}

.cartoes-toolbar-main {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(260px, 1fr) minmax(170px, .35fr) auto;
}

.cartoes-toolbar-main .btn-primary {
    background: var(--cor-secundaria);
    border-color: var(--cor-secundaria);
    box-shadow: 0 7px 16px color-mix(in srgb, var(--cor-secundaria) 18%, transparent);
    min-height: var(--control-height);
    padding: 9px 16px;
    white-space: nowrap;
}

.cartoes-resumo {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 22px;
}

.summary-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 118px;
    padding: 18px;
}

.summary-card > span {
    color: var(--cor-texto-secundario);
    font-size: 13px;
    font-weight: 600;
}

.summary-card > strong {
    color: var(--cor-texto-principal);
    font-size: 23px;
    line-height: 1.2;
}

.summary-card > small {
    color: var(--cor-texto-secundario);
    font-size: 11px;
    line-height: 1.4;
}

.cartoes-resumo-limite {
    border-top: 3px solid var(--cor-informacao);
}

.cartoes-resumo-limite strong {
    color: var(--cor-informacao);
}

.cartoes-resumo-utilizado {
    border-top: 3px solid var(--cor-despesa);
}

.cartoes-resumo-utilizado strong {
    color: var(--cor-despesa);
}

.cartoes-resumo-disponivel {
    border-top: 3px solid var(--cor-receita);
}

.cartoes-resumo-disponivel strong {
    color: var(--cor-receita);
}

.cartoes-resumo-faturas {
    border-top: 3px solid var(--cor-aviso);
}

.cartoes-resumo-faturas strong {
    color: var(--cor-aviso);
}

.cartoes-listagem-section,
.cartoes-faturas-section {
    margin-bottom: 26px;
}

.content-section-header {
    align-items: end;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.content-section-header h2 {
    color: var(--cor-texto-principal);
    font-size: 19px;
    margin: 0;
}

.content-section-header p {
    color: var(--cor-texto-secundario);
    font-size: 12px;
    margin: 5px 0 0;
}

.cartoes-grid,
.faturas-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.credit-card-item {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.credit-card-item:hover {
    border-color: color-mix(in srgb, var(--cor-primaria) 30%, var(--cor-borda));
    box-shadow: 0 11px 28px rgba(15, 23, 42, .075);
    transform: translateY(-2px);
}

.credit-card-header {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.credit-card-header > div:first-child {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.credit-card-header > div:first-child > strong {
    color: var(--cor-texto-principal);
    font-size: 17px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.credit-card-metrics {
    border-bottom: 1px solid var(--cor-borda);
    border-top: 1px solid var(--cor-borda);
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 14px 0;
}

.credit-card-metrics span,
.credit-card-metrics strong {
    display: block;
}

.credit-card-metrics span {
    color: var(--cor-texto-secundario);
    font-size: 11px;
    margin-bottom: 5px;
}

.credit-card-metrics strong {
    color: var(--cor-texto-principal);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.credit-card-metrics strong.positivo {
    color: var(--cor-receita);
}

.credit-card-metrics strong.negativo {
    color: var(--cor-despesa);
}

.progress-bar {
    background: var(--cor-borda);
    border-radius: 999px;
    height: 7px;
    overflow: hidden;
    width: 100%;
}

.progress-bar > span {
    background: var(--cor-informacao);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.credit-limit-caption {
    color: var(--cor-texto-secundario);
    font-size: 11px;
    margin-top: -7px;
}

.credit-card-dates {
    color: var(--cor-texto-secundario);
    display: flex;
    font-size: 12px;
    gap: 18px;
}

.credit-card-dates strong {
    color: var(--cor-texto-principal);
}

.credit-card-item .categoria-acoes button {
    min-height: 34px;
    padding: 7px 11px;
}

.faturas-section-header {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto minmax(150px, 1fr);
}

.faturas-section-header .navegador-mes {
    margin: 0;
}

.faturas-total-header {
    text-align: right;
}

.faturas-total-header span,
.faturas-total-header strong {
    display: block;
}

.faturas-total-header span {
    color: var(--cor-texto-secundario);
    font-size: 11px;
}

.faturas-total-header strong {
    color: var(--cor-texto-principal);
    font-size: 18px;
    margin-top: 4px;
}

.fatura-card {
    border: 1px solid var(--cor-borda);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--cor-superficie);
    min-width: 0;
}

.aviso-fatura-pendente {
    background: var(--cor-informacao-suave);
    border: 1px solid var(--cor-informacao-suave);
    border-left: 4px solid var(--cor-informacao);
    border-radius: 8px;
    color: var(--cor-informacao);
    margin-bottom: 12px;
    padding: 12px 14px;
}

.aviso-fatura-pendente strong,
.aviso-fatura-pendente span {
    display: block;
}

.aviso-fatura-pendente strong {
    font-size: var(--font-md);
}

.aviso-fatura-pendente span {
    font-size: 13px;
    line-height: 1.45;
    margin-top: 4px;
}

.aviso-fatura-atrasada {
    background: var(--cor-erro-suave);
    border-color: var(--cor-erro-suave);
    border-left-color: var(--cor-erro);
    color: var(--cor-erro);
}

.fatura-card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
}

.fatura-card-header strong {
    color: var(--cor-texto-principal);
}

.fatura-card-header small,
.fatura-valores span,
.fatura-valores small {
    display: block;
    color: var(--cor-texto-secundario);
    font-size: 12px;
    margin-top: 4px;
}

.fatura-valores {
    text-align: right;
}

.fatura-valores strong {
    color: var(--cor-texto-principal);
    display: block;
    font-size: 21px;
    margin-top: 4px;
}

.fatura-status {
    border-radius: 999px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 8px;
    padding: 4px 8px;
    text-transform: uppercase;
}

.fatura-status-paga {
    background: var(--cor-receita-suave);
    color: var(--cor-receita);
}

.fatura-status-aberta {
    background: var(--cor-aviso-suave);
    color: var(--cor-aviso);
}

.fatura-status-sem-movimento {
    background: var(--cor-borda);
    color: var(--cor-texto-secundario);
}

.fatura-resumo-grid,
.fatura-limite {
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 10px;
}

.fatura-resumo-item,
.fatura-limite > div {
    min-width: 0;
}

.fatura-resumo-item span,
.fatura-limite span {
    color: var(--cor-texto-secundario);
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
}

.fatura-resumo-item strong,
.fatura-limite strong {
    color: var(--cor-texto-principal);
    font-size: 15px;
}

.fatura-limite-barra {
    background: var(--cor-borda);
    border-radius: 999px;
    grid-column: 1 / -1;
    height: 8px;
    overflow: hidden;
}

.fatura-limite-barra span {
    background: var(--cor-informacao);
    border-radius: inherit;
    display: block;
    height: 100%;
    margin: 0;
}

.fatura-percentual {
    color: var(--cor-texto-secundario);
    display: block;
    font-size: 12px;
    grid-column: 1 / -1;
}

.fatura-transacoes {
    border-top: 1px solid var(--cor-borda);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fatura-transacoes-titulo {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
}

.fatura-transacoes-titulo strong {
    color: var(--cor-texto-principal);
    font-size: var(--font-md);
}

.fatura-transacoes-titulo span {
    color: var(--cor-texto-secundario);
    font-size: 12px;
}

.fatura-transacao-item {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--font-md);
}

.fatura-transacao-item div {
    min-width: 0;
}

.fatura-transacao-item strong {
    color: var(--cor-texto-principal);
}

.fatura-transacao-item div strong {
    display: block;
    overflow-wrap: anywhere;
}

.fatura-transacao-item small {
    color: var(--cor-texto-secundario);
    display: block;
    font-size: 12px;
    margin-top: 4px;
}

.fatura-pagamento {
    align-items: center;
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px;
}

.fatura-pagamento strong {
    color: var(--cor-texto-principal);
    display: block;
    font-size: 14px;
}

.fatura-pagamento small {
    color: var(--cor-texto-secundario);
    display: block;
    font-size: 12px;
    margin-top: 4px;
}

.fatura-paga {
    background: var(--cor-receita-suave);
    border-color: var(--cor-receita-suave);
}

.fatura-paga strong {
    color: var(--cor-receita);
}

.fatura-pagamento-acoes {
    align-items: center;
    display: flex;
    gap: 10px;
}

.fatura-pagamento-acoes select {
    border: 1.5px solid var(--cor-borda);
    border-radius: 8px;
    color: var(--cor-texto-principal);
    font-family: inherit;
    min-width: 220px;
    min-height: 38px;
    padding: 8px 10px;
}

.btn-pagar-fatura {
    background: var(--cor-secundaria);
    border: 1.5px solid var(--cor-secundaria);
    border-radius: 8px;
    color: var(--cor-superficie);
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    min-height: 38px;
    padding: 8px 12px;
}

.btn-pagar-fatura:hover {
    background: var(--cor-secundaria);
}

.btn-desfazer-pagamento {
    background: var(--cor-superficie);
    border: 1.5px solid var(--cor-erro);
    border-radius: 8px;
    color: var(--cor-erro);
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    min-height: 38px;
    padding: 8px 12px;
}

.btn-desfazer-pagamento:hover {
    background: var(--cor-erro-suave);
}

.btn-pagar-fatura:disabled,
.fatura-pagamento-acoes select:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.sem-registros-compacto {
    padding: 10px 0;
}

.checkbox-area-modal {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

@media (max-width: 1300px) {
    .cartoes-resumo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .cartoes-grid,
    .faturas-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .cartoes-header h1 {
        font-size: 28px;
    }

    .cartoes-toolbar-main,
    .cartoes-resumo,
    .faturas-section-header {
        grid-template-columns: 1fr;
    }

    .cartoes-toolbar-main .btn-primary {
        width: 100%;
    }

    .credit-card-header {
        flex-direction: column;
    }

    .credit-card-item .categoria-acoes {
        width: 100%;
    }

    .credit-card-metrics {
        grid-template-columns: 1fr;
    }

    .credit-card-dates {
        flex-direction: column;
        gap: 6px;
    }

    .faturas-section-header {
        align-items: flex-start;
    }

    .faturas-section-header .navegador-mes {
        justify-content: flex-start;
    }

    .faturas-total-header {
        text-align: left;
    }
}

/* RESPONSIVO */

@media (max-width: 768px) {

    .modal-overlay,
    #areaFormulario {
        padding: 14px;
    }

    .modal {
        max-height: calc(100vh - 28px);
        padding: 22px;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .page-header-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .categoria-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .contas-resumo {
        grid-template-columns: 1fr;
    }

    .conta-card {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .categoria-acoes {
        width: 100%;
    }

    .categoria-acoes button {
        flex: 1;
    }

    .fatura-card-header,
    .fatura-resumo-grid,
    .fatura-limite {
        grid-template-columns: 1fr;
    }

    .fatura-valores {
        text-align: left;
    }

    .fatura-pagamento,
    .fatura-pagamento-acoes {
        align-items: stretch;
        flex-direction: column;
    }

    .fatura-pagamento-acoes select,
    .btn-pagar-fatura,
    .btn-desfazer-pagamento {
        width: 100%;
    }
}

.btn-secondary {
    background: var(--color-secondary);
    color: #FFFFFF;
    border: 1px solid var(--color-secondary);
    padding: 13px 20px;
    border-radius: var(--button-radius);
    font-weight: var(--button-font-weight);
    cursor: pointer;
}

/* ==========================
   METAS
========================== */

.metas-page-premium .metas-header {
    margin-bottom: 24px;
}

.metas-header h1 {
    color: var(--cor-texto-principal);
    font-size: var(--page-title-size);
    font-weight: 700;
    letter-spacing: 0;
    line-height: var(--page-title-line-height);
}

.metas-header p {
    font-size: var(--page-subtitle-size);
    line-height: var(--page-subtitle-line-height);
    margin-top: var(--page-subtitle-margin-top);
    max-width: var(--page-subtitle-max-width);
}

.metas-toolbar {
    margin-bottom: 24px;
}

.metas-filter-bar {
    grid-template-columns: minmax(260px, 1fr) minmax(180px, .35fr) auto;
}

.metas-filter-bar .primary-button {
    min-height: var(--control-height);
    padding: 9px 16px;
    white-space: nowrap;
}

.metas-resumo {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 28px;
}

.metas-resumo-total { border-top: 3px solid var(--cor-destaque); }
.metas-resumo-concluidas { border-top: 3px solid var(--cor-receita); }
.metas-resumo-andamento { border-top: 3px solid var(--cor-informacao); }
.metas-resumo-acumulado { border-top: 3px solid var(--cor-secundaria); }

.metas-resumo-total > strong { color: var(--cor-destaque); }
.metas-resumo-concluidas > strong { color: var(--cor-receita); }
.metas-resumo-andamento > strong { color: var(--cor-informacao); }
.metas-resumo-acumulado > strong { color: var(--cor-secundaria); }

.metas-lista-header {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.metas-lista-header h2 {
    color: var(--cor-texto-principal);
    font-size: 22px;
    margin: 0;
}

.metas-lista-header p {
    color: var(--cor-texto-secundario);
    font-size: 13px;
    margin: 6px 0 0;
}

.lista-metas {
    display: grid;
    gap: 20px;
}

.metas-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metas-grid .empty-state {
    grid-column: 1 / -1;
}

.meta-card-premium {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.meta-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.meta-card-title {
    min-width: 0;
}

.meta-card-title h2 {
    margin: 0;
    color: var(--cor-texto-principal);
    font-size: 18px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.meta-card-title p {
    font-size: 13px;
    line-height: 1.5;
    margin: 6px 0 0;
    color: var(--cor-texto-secundario);
    overflow-wrap: anywhere;
}

.status-badge-success {
    background: var(--cor-receita-suave);
    color: var(--cor-receita);
}

.status-badge-info {
    background: var(--cor-informacao-suave);
    color: var(--cor-informacao);
}

.status-badge-danger {
    background: var(--cor-erro-suave);
    color: var(--cor-erro);
}

.meta-values-grid {
    border-bottom: 1px solid var(--cor-borda);
    border-top: 1px solid var(--cor-borda);
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 16px 0;
}

.meta-values-grid span,
.meta-values-grid strong {
    display: block;
}

.meta-values-grid span {
    color: var(--cor-texto-secundario);
    font-size: 12px;
    margin-bottom: 6px;
}

.meta-values-grid strong {
    color: var(--cor-texto-principal);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.meta-progress-header {
    align-items: center;
    color: var(--cor-texto-secundario);
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    margin-bottom: -12px;
}

.meta-progress-header strong {
    color: var(--cor-texto-principal);
}

.progress-bar > span {
    transition: width .35s ease;
}

.progress-bar-danger > span { background: var(--cor-despesa); }
.progress-bar-warning > span { background: var(--cor-aviso); }
.progress-bar-info > span { background: var(--cor-informacao); }
.progress-bar-success > span { background: var(--cor-receita); }

.meta-card-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: auto;
}

.meta-card-actions button {
    min-height: 36px;
    padding: 8px 14px;
}

@media (max-width: 1200px) {
    .metas-resumo,
    .metas-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .metas-filter-bar,
    .metas-resumo,
    .metas-grid {
        grid-template-columns: 1fr;
    }

    .metas-filter-bar .primary-button {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .meta-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .meta-values-grid {
        grid-template-columns: 1fr;
    }

    .meta-card-actions {
        width: 100%;
    }

    .meta-card-actions button {
        flex: 1 1 0;
    }
}

/* Fluxa UI Audit: hierarquia tipográfica compartilhada */

.relatorios-page .relatorios-header h1,
.transacoes-page .page-header h1,
.contas-page .page-header h1,
.cartoes-page .page-header h1,
.categorias-page-premium .page-header h1,
.metas-page-premium .page-header h1 {
    font-size: var(--page-title-size);
    font-weight: 700;
    letter-spacing: 0;
    line-height: var(--page-title-line-height);
}

/* ==========================
   AVISOS
========================== */

.aviso-overlay {
    align-items: center;
    background: rgba(15, 23, 42, .56);
    backdrop-filter: blur(3px);
    display: none;
    inset: 0;
    justify-content: center;
    padding: 20px;
    position: fixed;
    z-index: 9999;
}

.aviso-overlay.ativo {
    display: flex;
}

.aviso-card {
    align-items: flex-start;
    animation: avisoEntrada .18s ease-out;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
    display: grid;
    gap: 16px;
    grid-template-columns: auto minmax(0, 1fr);
    max-width: 460px;
    padding: 22px;
    width: min(100%, 460px);
}

.aviso-icone {
    align-items: center;
    background: var(--cor-receita-suave);
    border-radius: 999px;
    color: var(--cor-receita);
    display: flex;
    height: 42px;
    justify-content: center;
    width: 42px;
    flex-shrink: 0;
}

.aviso-icone svg {
    display: block;
    height: 24px;
    width: 24px;
}

.aviso-informacao .aviso-icone {
    background: var(--cor-informacao-suave);
    color: var(--cor-informacao);
}

.aviso-aviso .aviso-icone,
.aviso-confirmacao .aviso-icone {
    background: var(--cor-aviso-suave);
    color: var(--cor-aviso);
}

.aviso-erro .aviso-icone {
    background: var(--cor-erro-suave);
    color: var(--cor-erro);
}

.aviso-seguranca .aviso-icone {
    background: var(--cor-informacao-suave);
    color: var(--cor-primaria);
}

.aviso-sucesso .aviso-conteudo h2 { color: var(--cor-receita); }
.aviso-informacao .aviso-conteudo h2 { color: var(--cor-informacao); }
.aviso-aviso .aviso-conteudo h2,
.aviso-confirmacao .aviso-conteudo h2 { color: var(--cor-aviso); }
.aviso-erro .aviso-conteudo h2 { color: var(--cor-erro); }
.aviso-seguranca .aviso-conteudo h2 { color: var(--cor-primaria); }

.aviso-conteudo h2 {
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 8px;
}

.aviso-conteudo p {
    color: var(--cor-texto-secundario);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

.aviso-acoes {
    display: flex;
    gap: 10px;
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin-top: 4px;
}

.aviso-btn {
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    min-width: 96px;
    padding: 11px 16px;
}

.aviso-btn-principal {
    background: var(--cor-secundaria);
    border: 1.5px solid var(--cor-secundaria);
    color: var(--cor-superficie);
}

.aviso-btn-principal:hover {
    background: var(--cor-secundaria);
}

.aviso-btn-secundario {
    background: var(--cor-superficie);
    border: 1.5px solid var(--cor-borda);
    color: var(--cor-texto-principal);
}

.aviso-btn-secundario:hover {
    background: var(--cor-fundo);
}

.aviso-btn-perigo {
    background: var(--cor-erro);
    border: 1.5px solid var(--cor-erro);
    color: var(--cor-superficie);
}

.aviso-acoes-escopo {
    align-items: stretch;
    flex-direction: column;
}

.aviso-acoes-escopo .aviso-btn {
    text-align: left;
    width: 100%;
}

@keyframes avisoEntrada {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 520px) {
    .aviso-card {
        grid-template-columns: 1fr;
    }

    .aviso-acoes {
        flex-direction: column-reverse;
    }

    .aviso-btn {
        width: 100%;
    }
}
.configuracao-exportacao {
    grid-column: 1 / -1;
}

.configuracao-suporte {
    min-width: 0;
}

.support-channels {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-channel-item {
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-md);
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 14px;
}

.support-channel-item a,
.support-channel-item span {
    color: var(--cor-texto-secundario);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.support-channel-item .status-badge {
    justify-self: start;
}

.support-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.support-modal textarea {
    min-height: 132px;
    resize: vertical;
}

.support-technical-option {
    align-items: center;
    color: var(--cor-texto-principal);
    cursor: pointer;
    display: flex;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
}

.support-technical-option input {
    accent-color: var(--cor-primaria);
    height: 18px;
    width: 18px;
}

.admin-support-filters {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(160px, 220px));
}

.admin-page-header {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.admin-home-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-home-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: space-between;
    min-height: 220px;
}

.admin-home-card h2,
.admin-section h2,
.admin-instance-card h2 {
    color: var(--cor-texto-principal);
    margin: 12px 0 8px;
}

.admin-home-card p,
.admin-section p,
.admin-instance-card p {
    color: var(--cor-texto-secundario);
    line-height: 1.6;
    margin: 0;
}

.admin-section {
    display: grid;
    gap: 16px;
}

.admin-status-grid,
.admin-metrics-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-metrics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-status-card,
.admin-metric-card {
    min-height: 126px;
}

.admin-status-card span,
.admin-metric-card span {
    color: var(--cor-texto-secundario);
    font-size: 13px;
    font-weight: 600;
}

.admin-status-card strong,
.admin-metric-card strong {
    color: var(--cor-texto-principal);
    display: block;
    font-size: 24px;
    margin-top: 12px;
}

.admin-instance-card {
    margin-top: 6px;
}

.admin-instance-details {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.admin-instance-details > div {
    border-bottom: 1px solid var(--cor-borda);
    display: grid;
    gap: 6px;
    padding: 14px 0;
}

.admin-instance-details dt {
    color: var(--cor-texto-secundario);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-instance-details dd {
    color: var(--cor-texto-principal);
    font-weight: 600;
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-support-list-card { min-width: 0; }
.admin-support-table { min-width: 980px; }
.admin-support-row { cursor: pointer; }
.admin-support-row:hover { background: var(--cor-informacao-suave); }
.admin-support-row td small { color: var(--cor-texto-secundario); display: block; margin-top: 4px; }
.admin-support-details { display: grid; gap: 0; margin: 18px 0; }
.admin-support-details > div { border-bottom: 1px solid var(--cor-borda); display: grid; gap: 12px; grid-template-columns: 160px 1fr; padding: 11px 0; }
.admin-support-details dt { color: var(--cor-texto-secundario); font-size: 12px; font-weight: 700; }
.admin-support-details dd { color: var(--cor-texto-principal); margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }

@media (max-width: 767px) {
    .authenticated-page {
        --mobile-page-gap: 14px;
        --mobile-card-padding: 16px;
        --mobile-nav-height: 62px;
        --mobile-nav-z: 1120;
        --mobile-action-z: 1130;
        --mobile-more-overlay-z: 1040;
        --mobile-more-sheet-z: 1050;
    }

    .authenticated-page .main-content {
        opacity: 0;
        transform: translateY(4px);
        transition: opacity .18s ease, transform .18s ease;
    }

    .authenticated-page.mobile-page-ready .main-content {
        opacity: 1;
        transform: none;
    }

    .authenticated-page.mobile-page-leaving .main-content {
        opacity: .58;
        transform: translateY(2px);
    }

    .authenticated-page.mobile-page-leaving .mobile-page-progress {
        opacity: 1;
        right: 18%;
    }

    .layout .sidebar {
        display: none;
    }

    .layout .main-content {
        margin-left: 0;
        padding: 16px 14px calc(88px + env(safe-area-inset-bottom, 0px));
        width: 100%;
    }

    .cards,
    .cards-menores,
    .dashboard-page .dashboard-primary-cards,
    .transacoes-resumo,
    .forecast-summary-grid,
    .admin-status-grid,
    .admin-metrics-grid {
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-card,
    .transacoes-resumo-card,
    .relatorio-card,
    .forecast-summary-card {
        min-height: auto;
        padding: 14px;
    }

    .dashboard-card p,
    .card p,
    .transacoes-resumo-card strong,
    .relatorio-card p,
    .forecast-summary-card strong {
        font-size: clamp(20px, 5.8vw, 24px);
        line-height: 1.15;
    }

    .mobile-filter-summary {
        align-items: center;
        display: none;
        gap: 12px;
        justify-content: space-between;
        margin-bottom: 0;
    }

    .mobile-filter-summary > div {
        display: grid;
        gap: 3px;
        min-width: 0;
    }

    .mobile-filter-summary strong {
        color: var(--cor-texto-principal);
        font-size: 13px;
    }

    .mobile-filter-summary span {
        color: var(--cor-texto-secundario);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-filter-toggle {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 8px 12px;
    }

    .mobile-filter-card .mobile-filter-summary {
        display: flex;
    }

    .mobile-filter-card.mobile-filters-open {
        align-items: stretch;
        background: rgba(6, 26, 46, 0.48);
        border: 0;
        border-radius: 0;
        bottom: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        left: 0;
        margin: 0;
        padding: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1120;
    }

    .mobile-filter-card.mobile-filters-open .mobile-filter-summary,
    .mobile-filter-card.mobile-filters-open .mobile-filter-content,
    .mobile-filter-card.mobile-filters-open .mobile-filter-sheet-actions {
        background: var(--cor-superficie);
        border-left: 1px solid var(--cor-borda);
        border-right: 1px solid var(--cor-borda);
        margin: 0 10px;
    }

    .mobile-filter-card.mobile-filters-open .mobile-filter-summary {
        border-radius: 22px 22px 0 0;
        border-top: 1px solid var(--cor-borda);
        padding: 16px 16px 10px;
    }

    .mobile-filter-card.mobile-filters-open .mobile-filter-content {
        max-height: min(62vh, 520px);
        overflow-y: auto;
        padding: 0 16px;
    }

    .mobile-filter-card.mobile-filters-open .mobile-filter-sheet-actions {
        border-bottom: 1px solid var(--cor-borda);
        border-radius: 0 0 22px 22px;
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr 1fr;
        padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .mobile-filter-card:not(.mobile-filters-open) .mobile-filter-sheet-actions {
        display: none;
    }

    .mobile-filter-card.mobile-filter-has-active .mobile-filter-toggle::after {
        background: var(--cor-secundaria);
        border-radius: 999px;
        content: "";
        display: inline-block;
        height: 7px;
        margin-left: 7px;
        width: 7px;
    }

    .mobile-filter-card:not(.mobile-filters-open) .form-group,
    .mobile-filter-card:not(.mobile-filters-open) .transacoes-periodo-label,
    .mobile-filter-card:not(.mobile-filters-open) #btnFiltrar,
    .mobile-filter-card:not(.mobile-filters-open) #btnMesAtual,
    .mobile-filter-card:not(.mobile-filters-open) #btnLimparFiltrosTransacoes,
    .mobile-filter-card:not(.mobile-filters-open) .admin-support-filters .form-group {
        display: none;
    }

    .mobile-filter-card:not(.mobile-filters-open) .period-custom-fields .form-group {
        display: flex;
    }

    .mobile-filter-card:not(.mobile-filters-open) .period-custom-fields #btnFiltrar,
    .mobile-filter-card:not(.mobile-filters-open) .period-custom-fields #btnMesAtual,
    .mobile-filter-card:not(.mobile-filters-open) .period-custom-fields #btnLimparFiltrosTransacoes {
        display: inline-flex;
    }

    .transacoes-page .mobile-filter-card:not(.mobile-filters-open) .transacoes-pesquisa {
        display: grid;
    }

    .transacoes-page .mobile-filter-card:not(.mobile-filters-open) #btnNovaCategoriaRapida {
        display: none;
    }

    .mobile-filter-card.mobile-filters-open .mobile-filter-summary {
        margin-bottom: 0;
    }

    .mobile-filter-card.mobile-filters-open .mobile-filter-content {
        animation: mobileFilterIn .16s ease both;
    }

    .transacoes-toolbar-main,
    .filter-toolbar-main,
    .transacoes-periodo-row,
    .relatorios-toolbar .transacoes-periodo-row,
    .dashboard-periodo .transacoes-periodo-row,
    .admin-support-filters {
        gap: 10px;
    }

    .transacoes-toolbar-actions {
        gap: 8px;
    }

    .transacoes-page .transacoes-toolbar-main,
    .transacoes-page .filter-toolbar-main {
        grid-template-columns: 1fr auto;
    }

    .transacoes-page .transacoes-pesquisa {
        grid-column: 1 / 2;
    }

    .transacoes-page .transacoes-toolbar-actions {
        align-items: end;
        grid-column: 2 / 3;
    }

    .transacoes-page .transacoes-toolbar-actions #btnNovaTransacao {
        display: none;
    }

    .transacoes-page .transacoes-periodo-row {
        grid-template-columns: 1fr;
        margin-top: 10px;
    }

    .period-filter .transacoes-periodo-row,
    .relatorios-toolbar.period-filter .transacoes-periodo-row,
    .dashboard-periodo.period-filter .transacoes-periodo-row,
    .transacoes-page .period-filter .transacoes-periodo-row {
        grid-template-columns: minmax(0, 1fr) auto;
        margin-top: 0;
    }

    .period-selector {
        justify-self: start;
        width: 100%;
    }

    .period-selector .mes-atual-label {
        flex: 1;
        min-width: 0;
        padding: 0 10px;
    }

    .period-custom-fields {
        grid-template-columns: 1fr;
    }

    .filter-toolbar-panel {
        grid-template-columns: 1fr;
    }

    .transacoes-page .transacoes-periodo-row .navegador-mes {
        justify-content: space-between;
        width: 100%;
    }

    .transacoes-toolbar-actions .btn-secondary,
    .transacoes-toolbar-actions .button-success-solid,
    .transacoes-toolbar-actions #btnNovaTransacao,
    .primary-button,
    .secondary-button,
    .outline-button,
    .danger-button,
    #btnFiltrar,
    #btnMesAtual {
        min-height: 40px;
        padding: 9px 12px;
    }

    input,
    select,
    textarea,
    .input-control {
        min-height: 40px;
    }

    .mes-atual-label {
        height: 36px;
        min-width: 118px;
        padding: 0 10px;
    }

    .btn-mes-nav {
        height: 36px;
        width: 36px;
    }

    .page-header,
    .header-dashboard,
    .transacoes-header,
    .relatorios-header,
    .admin-page-header {
        margin-bottom: 16px;
    }

    .page-header h1,
    .header-dashboard h1,
    .transacoes-header h1,
    .relatorios-header h1,
    .dashboard-page .dashboard-welcome h1 {
        font-size: clamp(24px, 7vw, 28px);
        line-height: 1.12;
    }

    .page-header p,
    .header-dashboard p,
    .dashboard-section-heading p,
    .transacoes-table-heading p,
    .mobile-filter-summary span {
        font-size: 12px;
        line-height: 1.45;
    }

    .premium-card,
    .content-card,
    .summary-card,
    .card,
    .dashboard-card,
    .chart-card,
    .table-card,
    .dashboard-periodo,
    .transacoes-toolbar,
    .relatorios-toolbar {
        border-radius: 16px;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
        padding: var(--card-padding-mobile);
    }

    .dashboard-section-heading {
        gap: 10px;
        margin-bottom: 14px;
    }

    .dashboard-section-heading h2,
    .transacoes-table-heading h2,
    .mobile-more-header h2 {
        font-size: 18px;
        line-height: 1.2;
    }

    .table-responsive {
        margin-inline: -2px;
        overflow-x: auto;
    }

    .transacoes-page #tabelaTransacoes,
    .transacoes-page #tabelaTransacoes tbody,
    .transacoes-page #tabelaTransacoes tr,
    .transacoes-page #tabelaTransacoes td {
        display: block;
        min-width: 0;
        width: 100%;
    }

    .transacoes-page #tabelaTransacoes thead {
        display: none;
    }

    .transacoes-page #tabelaTransacoes tr {
        border: 1px solid var(--cor-borda);
        border-radius: var(--radius-md);
        cursor: pointer;
        display: grid;
        gap: 6px;
        grid-template-columns: minmax(0, 1fr) auto;
        margin-bottom: 8px;
        padding: 12px 13px;
    }

    .transacoes-page #tabelaTransacoes tr:focus-visible {
        outline: 2px solid var(--cor-informacao);
        outline-offset: 2px;
    }

    .transacoes-page #tabelaTransacoes td {
        border: 0;
        min-width: 0;
        padding: 0;
    }

    .transacoes-page #tabelaTransacoes td:nth-child(3) {
        color: var(--cor-texto-principal);
        display: -webkit-box;
        font-size: 14px;
        font-weight: 700;
        grid-column: 1 / -1;
        line-height: 1.3;
        order: 1;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .transacoes-page #tabelaTransacoes td:nth-child(8) {
        font-size: 16px;
        font-weight: 800;
        order: 2;
        text-align: left;
    }

    .transacoes-page #tabelaTransacoes td:nth-child(7) {
        justify-self: end;
        order: 3;
    }

    .transacoes-page #tabelaTransacoes td:nth-child(1) {
        color: var(--cor-texto-secundario);
        font-size: 12px;
        order: 4;
    }

    .transacoes-page #tabelaTransacoes td:nth-child(2) {
        display: none;
    }

    .transacoes-page #tabelaTransacoes td:nth-child(4) {
        color: var(--cor-texto-secundario);
        font-size: 12px;
        justify-self: end;
        max-width: 48vw;
        order: 5;
        overflow: hidden;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .transacoes-page #tabelaTransacoes td:nth-child(5) {
        align-self: center;
        order: 6;
    }

    .transacoes-page #tabelaTransacoes td:nth-child(6) {
        color: var(--cor-texto-secundario);
        font-size: 12px;
        justify-self: end;
        order: 7;
    }

    .transacoes-page #tabelaTransacoes td:nth-child(9) {
        display: none;
    }

    .transacoes-page #tabelaTransacoes .mobile-only {
        display: inline;
    }

    .transacoes-page #tabelaTransacoes td[data-mobile-line="datas"] {
        font-size: 0;
    }

    .transacoes-page #tabelaTransacoes td[data-mobile-line="datas"] .mobile-only {
        font-size: 12px;
    }

    .transacoes-page #tabelaTransacoes .categoria-badge,
    .transacoes-page #tabelaTransacoes .status-badge,
    .transacoes-page #tabelaTransacoes .tipo-badge {
        font-size: 10px;
        line-height: 1.1;
        padding: 4px 7px;
    }

    @keyframes mobileFilterIn {
        from {
            opacity: 0;
            transform: translateY(-4px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    .mobile-bottom-nav {
        align-items: center;
        background: color-mix(in srgb, var(--cor-superficie) 96%, transparent);
        border-top: 1px solid var(--cor-borda);
        bottom: 0;
        box-shadow: 0 -14px 34px rgba(15, 23, 42, 0.12);
        display: grid;
        gap: 2px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        left: 0;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
        position: fixed;
        right: 0;
        z-index: var(--mobile-nav-z);
    }

    .mobile-nav-item {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 14px;
        color: var(--cor-texto-secundario);
        cursor: pointer;
        display: inline-flex;
        flex-direction: column;
        font-family: 'Sora', Arial, sans-serif;
        font-size: 10px;
        font-weight: 700;
        gap: 3px;
        justify-content: center;
        min-height: 50px;
        min-width: 0;
        padding: 5px 3px;
        text-decoration: none;
        transition: background-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
    }

    .mobile-nav-item:hover,
    .mobile-nav-item:focus-visible {
        background: var(--sidebar-hover-bg);
        color: var(--sidebar-hover-color);
        outline: 2px solid color-mix(in srgb, var(--cor-informacao) 38%, transparent);
        outline-offset: 2px;
    }

    .mobile-nav-item.ativo {
        background: var(--cor-informacao-suave);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor-informacao) 14%, transparent);
        color: var(--cor-informacao);
        transform: translateY(-1px);
    }

    .mobile-nav-icon {
        aspect-ratio: 1;
        color: currentColor;
        display: inline-block;
        flex: 0 0 auto;
        height: 18px;
        min-height: 18px;
        min-width: 18px;
        opacity: 0.88;
        width: 18px;
    }

    .mobile-nav-item.ativo .mobile-nav-icon {
        opacity: 1;
        transform: scale(1.04);
    }

    .mobile-nav-action {
        align-items: center;
        align-self: start;
        background: var(--cor-secundaria);
        border: 0;
        border-radius: 999px;
        box-shadow: 0 12px 24px color-mix(in srgb, var(--cor-secundaria) 28%, transparent);
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        font-family: 'Sora', Arial, sans-serif;
        font-size: 28px;
        font-weight: 700;
        height: 54px;
        justify-content: center;
        justify-self: center;
        line-height: 1;
        margin-top: -20px;
        min-width: 54px;
        padding: 0;
        position: relative;
        transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease;
        width: 54px;
        z-index: var(--mobile-action-z);
    }

    .mobile-nav-action:hover,
    .mobile-nav-action:focus-visible {
        background: color-mix(in srgb, var(--cor-secundaria) 88%, #0F4C81);
        box-shadow: 0 14px 28px color-mix(in srgb, var(--cor-secundaria) 34%, transparent);
        outline: 3px solid color-mix(in srgb, var(--cor-secundaria) 36%, transparent);
        outline-offset: 3px;
        transform: translateY(-1px);
    }

    .mobile-nav-action:active {
        transform: translateY(0) scale(.97);
    }

    body.modal-open .mobile-bottom-nav,
    body.modal-open .mobile-nav-action {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }

    .mobile-more-overlay {
        bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
        display: block;
        left: 0;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        right: 0;
        top: 0;
        transition: opacity .18s ease;
        z-index: var(--mobile-more-overlay-z);
    }

    .mobile-more-overlay[hidden] {
        display: none;
    }

    .mobile-more-overlay.aberto {
        opacity: 1;
        pointer-events: auto;
    }

    body.mobile-more-open {
        overflow: hidden;
    }

    .mobile-more-backdrop {
        background: rgba(6, 26, 46, 0.48);
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

    .mobile-more-sheet {
        background: var(--cor-superficie);
        border: 1px solid var(--cor-borda);
        border-radius: 22px 22px 0 0;
        bottom: 0;
        box-shadow: 0 -20px 46px rgba(15, 23, 42, 0.2);
        left: 0;
        max-height: min(76vh, 560px);
        overflow-y: auto;
        padding: 16px 14px;
        position: absolute;
        right: 0;
        z-index: var(--mobile-more-sheet-z);
    }

    .mobile-more-header {
        align-items: flex-start;
        display: flex;
        gap: 16px;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .mobile-more-header h2 {
        color: var(--cor-texto-principal);
        font-size: 20px;
        margin: 0 0 5px;
    }

    .mobile-more-header p {
        color: var(--cor-texto-secundario);
        font-size: 13px;
        margin: 0;
    }

    .mobile-more-close {
        align-items: center;
        background: var(--cor-informacao-suave);
        border: 1px solid var(--cor-borda);
        border-radius: 999px;
        color: var(--cor-texto-principal);
        cursor: pointer;
        display: inline-flex;
        font-size: 22px;
        height: 38px;
        justify-content: center;
        line-height: 1;
        width: 38px;
    }

    .mobile-more-list {
        display: grid;
        gap: 7px;
    }

    .mobile-more-section-label {
        border-top: 1px solid var(--cor-borda);
        color: var(--cor-texto-secundario);
        font-size: 11px;
        font-weight: 800;
        margin-top: 4px;
        padding: 12px 4px 2px;
        text-transform: uppercase;
    }

    .mobile-more-link {
        align-items: center;
        border: 1px solid var(--cor-borda);
        flex-direction: row;
        font-size: 13px;
        justify-content: flex-start;
        min-height: 46px;
        padding: 10px 12px;
    }

    .mobile-more-link.ativo {
        background: var(--sidebar-active-bg);
        color: var(--sidebar-active-color);
    }

    .mobile-more-link.ativo .mobile-nav-icon {
        filter: brightness(0) invert(1);
    }

    .mobile-more-logout {
        background: transparent;
        border: 0;
        border-top: 1px solid var(--cor-borda);
        color: var(--cor-texto-secundario);
        cursor: pointer;
        display: block;
        font-family: 'Sora', Arial, sans-serif;
        font-size: 13px;
        font-weight: 700;
        margin-top: 14px;
        padding: 16px 4px 4px;
        text-align: left;
        width: 100%;
    }

    .mobile-more-logout:hover,
    .mobile-more-logout:focus-visible {
        color: var(--cor-texto-principal);
        outline: 2px solid color-mix(in srgb, var(--cor-informacao) 38%, transparent);
        outline-offset: 3px;
    }

    .modal-overlay,
    #areaFormulario {
        align-items: flex-start;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .modal {
        max-height: calc(100dvh - 24px);
    }

    #areaFormulario .modal-transacao {
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - 24px);
        overflow: hidden;
        padding-bottom: 0;
        width: 100%;
    }

    #areaFormulario #formTransacao {
        overflow-y: auto;
        padding-right: 2px;
    }

    #areaFormulario .modal-actions {
        background: var(--cor-superficie);
        border-top: 1px solid var(--cor-borda);
        bottom: 0;
        margin: 16px -22px 0;
        padding: 12px 22px calc(12px + env(safe-area-inset-bottom, 0px));
        position: sticky;
        z-index: 1;
    }

    .form-grid-modal {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 12px;
    }

    .campo-maior,
    .form-priority-type,
    .advanced-options,
    .resumo-transacao-inteligente {
        grid-column: 1 / -1;
    }

    .campo-valor-prioritario input {
        height: 50px !important;
    }

    .advanced-options-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }

    #areaFormulario .modal-actions .ghost-button,
    #areaFormulario .modal-actions .btn-modal-salvar {
        width: 100%;
    }

    .admin-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-home-grid,
    .admin-status-grid,
    .admin-metrics-grid,
    .admin-instance-details {
        grid-template-columns: 1fr;
    }

    .admin-support-filters { grid-template-columns: 1fr; }
    .admin-support-table, .admin-support-table tbody, .admin-support-table tr, .admin-support-table td { display: block; min-width: 0; width: 100%; }
    .admin-support-table thead { display: none; }
    .admin-support-table tr { border: 1px solid var(--cor-borda); border-radius: var(--radius-md); margin-bottom: 12px; padding: 10px 14px; }
    .admin-support-table td { border: 0; display: grid; gap: 10px; grid-template-columns: 110px 1fr; padding: 7px 0; }
    .admin-support-table td::before { color: var(--cor-texto-secundario); content: attr(data-label); font-size: 11px; font-weight: 700; text-transform: uppercase; }
    .admin-support-details > div { gap: 5px; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .authenticated-page .main-content,
    .mobile-nav-item,
    .mobile-nav-icon,
    .mobile-page-progress,
    .mobile-filter-card.mobile-filters-open .mobile-filter-content {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .authenticated-page .main-content {
        opacity: 1;
    }
}

.configuracao-exportacao-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

/* ==========================
   GLOBAL UX REFINEMENT
========================== */

:root {
    --page-gap: 16px;
    --section-gap: 16px;
    --card-padding: 17px;
    --card-padding-compact: 13px;
    --card-padding-mobile: 13px;
    --content-gap: 16px;
    --control-height: 38px;
    --control-height-compact: 34px;
    --table-cell-padding: 8px 10px;
    --mobile-page-padding: 14px;
    --modal-padding: 22px;
    --toolbar-gap: 10px;
    --compact-shadow: 0 6px 18px rgba(15, 23, 42, 0.045);
}

.page-header,
.header-dashboard,
.transacoes-header,
.relatorios-header,
.contas-header,
.cartoes-header,
.categorias-header,
.metas-header,
.configuracoes-header,
.admin-header {
    margin-bottom: var(--page-gap);
}

.page-header h1,
.header-dashboard h1,
.transacoes-header h1,
.relatorios-header h1,
.contas-header h1,
.cartoes-header h1,
.categorias-header h1,
.metas-header h1,
.configuracoes-header h1,
.admin-header h1 {
    font-size: 26px;
    line-height: 1.14;
}

.page-header p,
.header-dashboard p,
.transacoes-header p,
.relatorios-header p,
.contas-header p,
.cartoes-header p,
.categorias-header p,
.metas-header p,
.configuracoes-header p,
.admin-header p {
    font-size: 13px;
    line-height: 1.42;
    margin-top: 4px;
}

.premium-card,
.content-card,
.summary-card,
.table-card,
.card,
.grafico-section,
.resumo-section,
.table-section,
.filtro-section,
.form-section {
    box-shadow: var(--compact-shadow);
}

.premium-card,
.content-card,
.summary-card,
.table-card {
    padding: var(--card-padding);
}

.page-toolbar,
.filter-toolbar,
.transacoes-toolbar,
.relatorios-toolbar,
.categorias-toolbar,
.metas-toolbar,
.contas-toolbar,
.cartoes-toolbar,
.dashboard-page .dashboard-periodo {
    margin-bottom: var(--section-gap);
    padding: var(--card-padding-compact);
}

.filter-toolbar,
.filter-bar,
.transacoes-toolbar-main,
.filter-toolbar-main,
.transacoes-periodo-row,
    .admin-support-filters,
    .cartoes-toolbar-main,
    .categorias-filter-bar,
    .metas-filter-bar,
    .contas-toolbar-main {
    gap: var(--toolbar-gap);
}

.filter-toolbar input,
.filter-toolbar select,
.filter-toolbar .input-control,
input,
select,
textarea,
.input-control {
    min-height: var(--control-height);
}

.primary-button,
.secondary-button,
.outline-button,
.danger-button,
.ghost-button,
.button-success-solid,
.button-success-soft,
.button-info-solid,
.button-info-soft,
.button-danger-solid,
.button-danger-soft,
.button-neutral,
.button-month-current,
.button-cancel-solid,
.btn-secondary,
#btnFiltrar,
#btnMesAtual {
    min-height: var(--control-height);
    padding: 8px 13px;
}

.icon-button,
.toolbar-icon-button {
    align-items: center;
    appearance: none;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--radius-md);
    color: var(--cor-texto-secundario);
    cursor: pointer;
    display: inline-flex;
    height: var(--control-height);
    justify-content: center;
    min-width: var(--control-height);
    padding: 0;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.icon-button svg,
.toolbar-icon-button svg {
    height: 18px;
    width: 18px;
}

.icon-button:hover,
.icon-button:focus-visible,
.toolbar-icon-button:hover,
.toolbar-icon-button:focus-visible {
    background: var(--cor-informacao-suave);
    border-color: color-mix(in srgb, var(--cor-informacao) 32%, var(--cor-borda));
    color: var(--cor-informacao);
    outline: 3px solid color-mix(in srgb, var(--cor-informacao) 22%, transparent);
    outline-offset: 2px;
}

.cards,
.cards-menores,
.transacoes-resumo,
.contas-resumo,
.cartoes-resumo,
.categorias-resumo,
.metas-resumo,
.admin-metrics-grid,
.dashboard-primary-cards,
.dashboard-secondary-metrics {
    gap: 12px;
    margin-bottom: var(--section-gap);
}

.summary-card,
.transacoes-resumo-card,
.dashboard-card,
.admin-metric-card {
    min-height: 88px;
    padding: var(--card-padding-compact);
}

.dashboard-card p,
.card p,
.summary-card > strong,
.transacoes-resumo-card strong,
.admin-metric-card strong {
    font-size: clamp(19px, 2vw, 23px);
    margin-top: 6px;
}

.card-label,
.summary-card > span,
.transacoes-resumo-card span,
.admin-metric-card span {
    font-size: 12px;
    line-height: 1.35;
}

.card small,
.summary-card > small,
.content-section-header p,
.dashboard-section-heading p,
.configuracao-card-header p {
    font-size: 11px;
    line-height: 1.35;
}

.content-section-header,
.dashboard-section-heading,
.configuracao-card-header,
.faturas-section-header,
.transacoes-table-heading {
    margin-bottom: 10px;
}

.transacoes-table-heading {
    padding: 14px 16px 12px;
}

table {
    margin-top: 10px;
}

th,
td {
    padding: var(--table-cell-padding);
    vertical-align: middle;
}

.categoria-badge,
.tipo-badge,
.status-badge {
    padding: 4px 8px;
}

.acoes {
    gap: 6px;
}

.transacoes-page #tabelaTransacoes .button-success-soft,
.transacoes-page #tabelaTransacoes .button-info-soft,
.transacoes-page #tabelaTransacoes .button-danger-soft,
.btn-table-action {
    min-height: var(--control-height-compact);
    padding: 6px 8px;
}

.dashboard-page .filtro-section,
.dashboard-page .dashboard-contas,
.dashboard-page .grafico-section,
.dashboard-page .resumo-section,
.dashboard-page .table-section {
    padding: var(--card-padding);
}

.dashboard-central-financeira,
.dashboard-planning-grid,
.dashboard-forecast-section,
.dashboard-chart-section,
.dashboard-categories-section,
.dashboard-last-transactions {
    margin-bottom: var(--section-gap);
}

.contas-grid,
.cartoes-grid,
.categorias-grid,
.metas-grid,
.support-channels {
    gap: 12px;
}

.conta-card,
.cartao-card,
.categoria-card,
.meta-card,
.support-channel-item {
    padding: var(--card-padding-compact);
}

.credit-card-metrics {
    gap: 8px;
}

.configuracoes-grid {
    gap: 14px;
    align-items: start;
}

.configuracao-form {
    gap: 12px;
}

.configuracao-info-row,
.configuracao-sobre > div,
.configuracao-exportacao-item {
    padding: 10px 0;
}

.configuracao-links {
    gap: 8px;
}

.admin-metric-card {
    gap: 5px;
}

.admin-instance-details > div,
.admin-support-details > div {
    padding: 8px 0;
}

.empty-state,
.sem-registros {
    padding: 16px;
}

.modal {
    padding: var(--modal-padding);
}

.modal-actions {
    gap: var(--toolbar-gap);
    margin-top: 16px;
}

.filter-chips:empty {
    display: none;
}

.forecast-summary-card {
    min-height: 96px;
}

.institutional-card {
    padding: var(--card-padding);
}

.institutional-card p {
    line-height: 1.55;
}

.landing-section {
    padding-block: clamp(48px, 7vw, 72px);
}

.landing-feature-card {
    min-height: 176px;
    padding: var(--card-padding);
}

.landing-feature-card img,
.landing-feature-symbol {
    margin-bottom: 18px;
}

@media (min-width: 1280px) {
    .cards-menores,
    .cartoes-resumo,
    .metas-resumo,
    .categorias-resumo,
    .admin-metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }

    .contas-grid,
    .cartoes-grid,
    .categorias-grid,
    .metas-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

@media (max-width: 1024px) {
    .cards,
    .cards-menores,
    .transacoes-resumo,
    .cartoes-resumo,
    .categorias-resumo,
    .metas-resumo,
    .admin-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    :root {
        --section-gap: 14px;
        --content-gap: 14px;
        --control-height: 38px;
        --modal-padding: 16px;
        --toolbar-gap: 8px;
    }

    .layout .main-content {
        padding-left: var(--mobile-page-padding);
        padding-right: var(--mobile-page-padding);
    }

    .premium-card,
    .content-card,
    .summary-card,
    .table-card,
    .card,
    .dashboard-page .filtro-section,
    .dashboard-page .dashboard-contas,
    .dashboard-page .grafico-section,
    .dashboard-page .resumo-section,
    .dashboard-page .table-section {
        padding: var(--card-padding-mobile);
    }

    .page-header,
    .header-dashboard,
    .transacoes-header,
    .relatorios-header,
    .contas-header,
    .cartoes-header,
    .categorias-header,
    .metas-header,
    .configuracoes-header,
    .admin-header {
        margin-bottom: 14px;
    }

    .page-header h1,
    .header-dashboard h1,
    .transacoes-header h1,
    .relatorios-header h1,
    .contas-header h1,
    .cartoes-header h1,
    .categorias-header h1,
    .metas-header h1,
    .configuracoes-header h1,
    .admin-header h1 {
        font-size: 24px;
    }

    .transacoes-resumo,
    .cartoes-resumo,
    .categorias-resumo,
    .metas-resumo,
    .admin-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cards,
    .cards-menores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summary-card,
    .transacoes-resumo-card,
    .dashboard-card,
    .admin-metric-card {
        min-height: 86px;
    }

    .transacoes-resumo-card strong,
    .summary-card > strong,
    .dashboard-card p {
        font-size: 20px;
    }

    .mobile-filter-card {
        padding: 10px 12px;
    }

    .mobile-filter-summary {
        min-height: 42px;
    }

    .table-responsive {
        border-radius: var(--radius-md);
    }

    .configuracoes-grid {
        gap: 12px;
    }

    .configuracao-card-header p {
        margin-top: 3px;
    }
}

@media (max-width: 430px) {
    .cards,
    .cards-menores,
    .transacoes-resumo,
    .cartoes-resumo,
    .categorias-resumo,
    .metas-resumo,
    .admin-metrics-grid {
        gap: 10px;
    }

    .card-label,
    .summary-card > span,
    .transacoes-resumo-card span,
    .admin-metric-card span {
        font-size: 11px;
    }

    .summary-card > strong,
    .transacoes-resumo-card strong,
    .dashboard-card p {
        font-size: 18px;
    }

    .mobile-nav-item {
        min-height: 48px;
    }

    .mobile-nav-action {
        height: 52px;
        min-width: 52px;
        width: 52px;
    }
}

.configuracao-exportacao-item > div {
    display: grid;
    gap: 4px;
}

.configuracao-exportacao-item span,
.configuracao-exportacao small {
    color: var(--text-secondary);
}

.configuracao-modal-seguranca {
    max-width: 560px;
}

.configuracao-modal-seguranca > h2,
.configuracao-modal-seguranca form > h2 {
    color: var(--cor-texto-principal);
    font-size: 20px;
    margin: 0 0 8px;
}

.configuracao-modal-seguranca > p,
.configuracao-modal-seguranca form > p {
    color: var(--cor-texto-secundario);
    line-height: 1.6;
    margin: 0 0 20px;
}

.configuracao-backup-actions {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 20px;
}

.backup-progress {
    display: grid;
    gap: 8px;
}

.backup-progress > span {
    background: linear-gradient(90deg, var(--cor-primaria), var(--cor-secundaria), var(--cor-primaria));
    background-size: 200% 100%;
    border-radius: 999px;
    display: block;
    height: 6px;
    animation: backup-progress 1.2s linear infinite;
}

.backup-progress small {
    color: var(--cor-texto-secundario);
}

@keyframes backup-progress {
    to { background-position: -200% 0; }
}

@media (max-width: 640px) {
    .support-channels {
        grid-template-columns: 1fr;
    }

    .support-actions,
    .support-actions button {
        width: 100%;
    }

    .configuracao-exportacao-item {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .configuracao-exportacao-item button {
        width: 100%;
    }

    .configuracao-backup-actions {
        grid-template-columns: 1fr;
    }
}

/* Landing pública */
.landing-page { background: var(--cor-fundo); color: var(--cor-texto-principal); overflow-x: hidden; }
.landing-hero { color: #fff; min-height: min(780px, 86svh); overflow: hidden; position: relative; }
.landing-hero-media { background-image: linear-gradient(90deg, rgba(6,26,46,.96), rgba(6,26,46,.8) 48%, rgba(6,26,46,.24)), url('../assets/landing/dashboard-preview.png'); background-position: center; background-size: cover; inset: 0; position: absolute; transform: scale(1.01); }
.landing-header { align-items: center; display: flex; justify-content: space-between; margin: 0 auto; max-width: 1240px; padding: 22px 28px; position: relative; z-index: 1; }
.landing-brand .app-brand-wordmark { filter: brightness(0) invert(1); width: 104px; }
.landing-nav { align-items: center; display: flex; gap: 22px; }
.landing-nav > a:not(.landing-login-button) { color: #e2e8f0; font-size: 13px; font-weight: 600; text-decoration: none; }
.landing-nav > a:not(.landing-login-button):hover { color: #fff; }
.landing-login-button { border-color: rgba(255,255,255,.5); color: #fff; }
.landing-login-button:hover { background: #fff; color: var(--cor-primaria); }
.landing-hero-content { display: flex; flex-direction: column; justify-content: center; margin: 0 auto; max-width: 1240px; min-height: calc(min(780px, 86svh) - 92px); padding: 40px 28px 76px; position: relative; z-index: 1; }
.landing-eyebrow { color: var(--cor-secundaria); font-size: 12px; font-weight: 700; letter-spacing: 0; margin: 0 0 12px; text-transform: uppercase; }
.landing-hero h1 { color: #fff; font-size: clamp(48px, 8vw, 92px); line-height: .98; margin: 0 0 18px; max-width: 700px; }
.landing-hero h2 { color: #fff; font-size: clamp(22px, 3vw, 38px); line-height: 1.2; margin: 0 0 18px; max-width: 720px; }
.landing-hero-content > p:not(.landing-eyebrow) { color: #d7e0ea; font-size: 17px; line-height: 1.7; margin: 0; max-width: 650px; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.landing-actions a { min-width: 132px; }
.landing-hero .primary-button { background: var(--cor-secundaria); border-color: var(--cor-secundaria); }
.landing-section { margin: 0 auto; max-width: 1240px; padding: 88px 28px; }
.landing-section-heading { max-width: 720px; }
.landing-section-heading h2, .landing-final-cta h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.18; margin: 0; }
.landing-section-heading > p:last-child { color: var(--cor-texto-secundario); font-size: 16px; line-height: 1.7; margin: 18px 0 0; }
.landing-feature-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 44px; }
.landing-feature-card { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 8px; min-height: 176px; padding: var(--card-padding); }
.landing-feature-card img, .landing-feature-symbol { align-items: center; display: flex; height: 28px; justify-content: center; margin-bottom: 18px; object-fit: contain; width: 28px; }
.landing-feature-symbol { color: var(--cor-secundaria); filter: none; font-size: 22px; font-weight: 700; }
.landing-feature-card h3, .landing-differential-grid h3 { font-size: 16px; margin: 0 0 10px; }
.landing-feature-card p, .landing-differential-grid p { color: var(--cor-texto-secundario); font-size: 13px; line-height: 1.65; margin: 0; }
.landing-differentials { border-top: 1px solid var(--cor-borda); max-width: none; }
.landing-differentials > * { margin-left: auto; margin-right: auto; max-width: 1184px; }
.landing-differential-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 44px; }
.landing-differential-grid > div { border-left: 1px solid var(--cor-borda); padding: 18px 30px 28px; }
.landing-differential-grid strong { color: var(--cor-informacao); display: block; font-size: 12px; margin-bottom: 28px; }
.landing-final-cta { align-items: center; background: #071f35; color: #fff; display: flex; gap: 40px; justify-content: space-between; margin: 24px auto 72px; max-width: 1184px; padding: 48px; }
.landing-final-cta h2 { color: #fff; max-width: 720px; }
.landing-final-cta .landing-actions { flex: 0 0 auto; margin: 0; }

.skeleton {
    animation: fluxa-skeleton 1.25s ease-in-out infinite;
    background: linear-gradient(90deg, var(--cor-fundo) 25%, var(--cor-borda) 50%, var(--cor-fundo) 75%);
    background-size: 200% 100%;
    border-radius: 6px;
    display: block;
}

.skeleton-line { height: 14px; margin: 8px 0; width: 100%; }
.skeleton-line-short { width: 62%; }
.skeleton-table-row:hover { background: transparent; }

@keyframes fluxa-skeleton {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}
.landing-footer { align-items: flex-end; border-top: 1px solid var(--cor-borda); display: flex; gap: 32px; justify-content: space-between; margin: 0 auto; max-width: 1240px; padding: 30px 28px 40px; }
.landing-footer > div { display: grid; gap: 7px; }
.landing-footer span, .landing-footer a { color: var(--cor-texto-secundario); font-size: 12px; }
.landing-footer nav { display: flex; flex-wrap: wrap; gap: 18px; justify-content: flex-end; }
.landing-footer a { text-decoration: none; }
.landing-footer a:hover { color: var(--cor-primaria); }
.login-public-link { color: #cbd5e1; font-family: 'Sora',Arial,sans-serif; font-size: 12px; font-weight: 600; position: fixed; right: 22px; text-decoration: none; top: 18px; z-index: 10; }
.login-public-link:hover { color: #fff; }
.landing-install-button[hidden] { display: none; }

.offline-page {
    align-items: center;
    background: var(--cor-fundo);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.offline-card {
    align-items: center;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .10);
    display: grid;
    gap: 24px;
    max-width: 520px;
    padding: 40px;
    text-align: center;
    width: 100%;
}

.offline-card .brand-symbol { margin: 0 auto; }
.offline-card h1 { font-size: 28px; margin: 0 0 10px; }
.offline-card p { color: var(--cor-texto-secundario); line-height: 1.6; margin: 0; }
.offline-card .primary-button { justify-self: center; }

@media (max-width: 900px) {
    .landing-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing-differential-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing-final-cta { align-items: flex-start; flex-direction: column; margin-left: 20px; margin-right: 20px; }
}

@media (max-width: 640px) {
    .landing-hero { min-height: 82svh; }
    .landing-hero-media { background-image: linear-gradient(rgba(6,26,46,.87), rgba(6,26,46,.78)), url('../assets/landing/dashboard-preview.png'); background-position: 28% center; }
    .landing-header { padding: 18px 20px; }
    .landing-nav > a:not(.landing-login-button) { display: none; }
    .landing-brand .app-brand-symbol { height: 36px; width: 36px; }
    .landing-brand .app-brand-wordmark { width: 84px; }
    .landing-hero-content { min-height: calc(82svh - 76px); padding: 42px 20px 58px; }
    .landing-hero h1 { font-size: 52px; }
    .landing-hero h2 { font-size: 25px; }
    .landing-hero-content > p:not(.landing-eyebrow) { font-size: 15px; }
    .landing-actions, .landing-actions a { width: 100%; }
    .landing-section { padding: 64px 20px; }
    .landing-feature-grid, .landing-differential-grid { grid-template-columns: 1fr; }
    .landing-feature-card { min-height: 0; }
    .landing-differential-grid > div { border-bottom: 1px solid var(--cor-borda); padding-left: 18px; }
    .landing-final-cta { margin-bottom: 48px; padding: 34px 24px; }
    .landing-footer { align-items: flex-start; flex-direction: column; padding-left: 20px; padding-right: 20px; }
    .landing-footer nav { justify-content: flex-start; }
    .login-public-link { right: 14px; top: 12px; }
}
/* Ajuda, novidades e onboarding */
.help-accordion {
    display: grid;
    gap: 14px;
}

.help-accordion details,
.news-item,
.onboarding-checklist,
.fluxa-tour-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.help-accordion summary {
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 700;
    padding: 18px 20px;
}

.help-accordion details[open] summary {
    border-bottom: 1px solid var(--border-color);
}

.help-accordion details > div {
    color: var(--text-secondary);
    line-height: 1.7;
    padding: 0 20px 20px;
}

.news-timeline {
    display: grid;
    gap: 16px;
}

.news-item {
    padding: 20px;
}

.news-item time {
    color: var(--text-secondary);
    display: block;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.news-item h2 {
    margin: 0 0 10px;
}

.news-version-header {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.news-version-header p {
    color: var(--text-secondary);
    margin: 4px 0 0;
}

.news-version-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 18px;
}

.news-group {
    background: color-mix(in srgb, var(--surface-color) 92%, var(--color-background));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
}

.news-group h3 {
    color: var(--text-primary);
    font-size: 0.95rem;
    margin: 0 0 10px;
}

.news-group ul {
    color: var(--text-secondary);
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
}

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

.onboarding-checklist-item {
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    text-decoration: none;
}

.onboarding-checklist-item span {
    color: var(--primary-color);
    font-weight: 800;
}

.onboarding-checklist-item.is-done {
    background: color-mix(in srgb, var(--success-color) 9%, transparent);
}

.onboarding-checklist-item.is-done span {
    color: var(--success-color);
}

.fluxa-tour-overlay {
    inset: 0;
    isolation: isolate;
    pointer-events: none;
    position: fixed;
    z-index: var(--tour-overlay-z);
}

.fluxa-tour-panel {
    background: rgba(2, 6, 23, 0.62);
    pointer-events: auto;
    position: fixed;
    z-index: 1;
}

.fluxa-tour-card {
    background: color-mix(in srgb, var(--cor-secundaria) 94%, transparent);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(2, 6, 23, .28);
    color: #FFFFFF;
    max-width: 460px;
    overflow: auto;
    padding: 24px;
    pointer-events: auto;
    position: fixed;
    z-index: 3;
}

.fluxa-tour-step {
    color: rgba(255, 255, 255, .82);
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.fluxa-tour-card h2 {
    color: #FFFFFF;
    margin: 0 0 8px;
}

.fluxa-tour-card p {
    color: rgba(255, 255, 255, .9);
    line-height: 1.6;
    margin: 0 0 20px;
}

.fluxa-tour-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.fluxa-tour-target {
    border-radius: 12px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .94), 0 0 0 8px color-mix(in srgb, var(--cor-secundaria) 76%, transparent), 0 16px 36px rgba(2, 6, 23, .22);
    outline: 0;
    outline-offset: 6px;
}

body.tour-active {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

html.theme-dark .fluxa-tour-panel {
    background: rgba(2, 6, 23, 0.72);
}

.tour-button-primary,
.tour-button-secondary,
.tour-button-ghost {
    align-items: center;
    border-radius: var(--button-radius);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-weight: 800;
    justify-content: center;
    min-height: 38px;
    padding: 9px 13px;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.tour-button-primary {
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    color: color-mix(in srgb, var(--cor-secundaria) 66%, #064E3B);
}

.tour-button-secondary {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .72);
    color: #FFFFFF;
}

.tour-button-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, .86);
}

.tour-button-primary:hover,
.tour-button-secondary:hover,
.tour-button-ghost:hover {
    transform: translateY(-1px);
}

.tour-button-secondary:hover,
.tour-button-ghost:hover {
    background: rgba(255, 255, 255, .16);
    color: #FFFFFF;
}

.tour-button-primary:disabled,
.tour-button-secondary:disabled,
.tour-button-ghost:disabled {
    cursor: not-allowed;
    opacity: .55;
    transform: none;
}

.tour-button-primary:focus-visible,
.tour-button-secondary:focus-visible,
.tour-button-ghost:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .44);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .fluxa-tour-card {
        max-width: calc(100vw - 28px);
        padding: 20px;
    }

    .fluxa-tour-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    #btnReabrirTour {
        display: none;
    }
}

/* Sprint Transacoes: historico como centro de filtros e navegacao */
.transacoes-page .transacoes-header {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.transacoes-page .transacoes-header-action {
    flex: 0 0 auto;
    white-space: nowrap;
}

.transacoes-page .transacoes-resumo {
    margin-bottom: 16px;
}

.transacoes-page .transacoes-table-card {
    overflow: visible;
    padding: 0;
}

.transacoes-page .transacoes-history-sticky {
    background: var(--cor-superficie);
    border-bottom: 1px solid var(--cor-borda);
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    position: sticky;
    top: 0;
    z-index: 5;
}

.transacoes-page .transacoes-table-heading {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 16px 18px 8px;
}

.transacoes-page .transacoes-table-heading h2 {
    font-size: 18px;
    line-height: 1.2;
    margin: 0;
}

.transacoes-page .transacoes-table-heading p {
    margin: 4px 0 0;
}

.transacoes-page .transacoes-resultado-texto {
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    color: var(--cor-texto-secundario);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    margin-top: 0;
    padding: 6px 10px;
}

.transacoes-page .transacoes-toolbar {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin-bottom: 0;
    padding: 0 18px 14px;
}

.transacoes-page .transacoes-history-controls {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: auto minmax(220px, auto) auto minmax(280px, 1fr);
}

.transacoes-page .transacoes-pesquisa label {
    display: none;
}

.transacoes-page .transacoes-pesquisa input {
    min-height: var(--control-height-compact);
}

.transacoes-page .transacoes-periodo-row {
    align-items: center;
    border-top: 0;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(190px, auto) auto;
    margin-top: 0;
    padding-top: 0;
}

.transacoes-page .period-custom-fields,
.transacoes-page #transacoesChipsFiltros:not(:empty),
.transacoes-page .filter-toolbar-panel {
    margin-top: 10px;
}

.transacoes-page .transacoes-table-card .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
}

@media (max-width: 980px) {
    .transacoes-page .transacoes-history-controls {
        grid-template-columns: auto minmax(210px, 1fr) auto;
    }

    .transacoes-page .transacoes-pesquisa {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .transacoes-page .transacoes-header {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .transacoes-page .transacoes-header-action {
        width: 100%;
    }

    .transacoes-page .transacoes-table-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 14px 14px 8px;
    }

    .transacoes-page .transacoes-toolbar {
        padding: 0 14px 12px;
    }

    .transacoes-page .transacoes-history-controls,
    .transacoes-page .transacoes-periodo-row,
    .transacoes-page .period-custom-fields {
        grid-template-columns: 1fr;
    }

    .transacoes-page .transacoes-history-controls {
        align-items: stretch;
    }

    .transacoes-page .period-selector {
        width: 100%;
    }

    .transacoes-page .period-calendar-button {
        justify-self: stretch;
        width: 100%;
    }
}