/* =====================================================================
   AppMyLife · custom.css
   Estilos adicionais da identidade "Floresta", carregados depois da base
   Metronic (style.bundle.css). Todas as classes usam o prefixo "aml-"
   para não colidir com Bootstrap/Metronic.

   Índice
     01. Fontes (Figtree local)
     02. Tokens (cores, sombras, raios)
     03. Base e ajustes sobre o Metronic
     04. Estrutura (shell, sidebar, topbar, conteúdo)
     05. Tipografia e utilitários
     06. Botões
     07. Cards e cabeçalhos de página
     08. Indicadores (stats, tendência, sparkline, barras)
     09. Tabelas em grid
     10. Status, checkbox e menu de ações
     11. Barra de filtros, segmentados, selects, chips e popover
     12. Modais e formulários
     13. Drawer de detalhes
     14. Barra de seleção em massa e toast
     15. Animações
     16. Responsivo
     17. Estados do app AJAX e telas novas
     18. Perfil, escolhas (escopo) e "Em breve"
     19. Select2 no visual do AppMyLife
     20. Boas-vindas, estados vazios e previsão
     21. Flatpickr (calendário) no visual do AppMyLife
     22. Tabelas viram lista de cards no celular
     23. Campo de senha (olho e checklist)
     24. Cartões de crédito
     25. Previsão
     26. Card de saldo em destaque (Floresta)
     27. Confirmar pagamento e anexos
     28. Tarefas (checklist, modal e seções da sidebar)
     29. Avisos (painel do sino e preferências)
     30. Lista de cartões e campos do cartão
   ===================================================================== */

/* ---------------------------------------------------------------------
   01. Fontes (Figtree local, extraída do protótipo Floresta)
   Fonte variável: o mesmo arquivo atende os pesos 400 a 700.
   --------------------------------------------------------------------- */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../media/fonts/figtree/figtree-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../media/fonts/figtree/figtree-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------------------------------------------------------------------
   02. Tokens
   --------------------------------------------------------------------- */
:root {
    /* Superfícies */
    --aml-bg: #FFFFFF;
    --aml-surface: #FFFFFF;
    --aml-field: #F4F6F7;
    --aml-seg: #F2F4F5;
    --aml-hover: #FAFAF9;
    --aml-soft-btn: #F4F4F2;
    --aml-soft-btn-hover: #EAEAE7;
    --aml-track: #F1F1F4;

    /* Texto */
    --aml-ink: #18181B;
    --aml-ink-2: #55554F;
    --aml-ink-3: #6B6B66;
    --aml-muted: #8A8A85;
    --aml-muted-2: #9A9A94;
    --aml-warm-ink: #18181B;
    --aml-warm-muted: #6B6B73;
    --aml-strong: #0E4D36;          /* verde de destaque (checkbox, barra em lote, chips, filtros) */

    /* Marca (Floresta) */
    --aml-forest: #0E4D36;          /* verde principal: botões, abas, chips ativos */
    --aml-forest-dark: #0B3D2C;     /* hover e fundo escuro */
    --aml-forest-mid: #14603F;      /* topo da sidebar */
    --aml-forest-light: #1F7A55;    /* card de saldo */
    --aml-lime: #B8F26B;            /* acento: ícone ativo, badges, "+" */
    --aml-mint: #9CC2B0;            /* texto suave sobre o verde */
    --aml-mint-2: #B5D1C3;          /* itens do menu */
    --aml-mint-3: #80AC97;          /* "Em breve" */
    --aml-brand: #1F7A55;           /* verde médio (manchete, foco, switches, sino) */
    --aml-brand-2: #0E4D36;         /* texto sobre o verde suave */
    --aml-brand-soft: #E8F5EC;      /* fundo verde suave (pills, chips, filtros ativos) */
    --aml-transfer: #3B82C4;        /* transferência no modal */
    --aml-coral: var(--aml-lime);
    --aml-peach: var(--aml-lime);
    --aml-plum: var(--aml-forest);
    --aml-plum-hover: var(--aml-forest-dark);

    /* Semânticas */
    --aml-income: #12A36B;
    --aml-expense: #E5484D;
    --aml-error: #B42318;

    /* Linhas */
    --aml-line: #EFEFED;
    --aml-line-2: #F0F0ED;
    --aml-line-3: #F3F3F1;
    --aml-line-warm: #EEF0F2;

    /* Sombras */
    --aml-shadow-card: 0 1px 2px rgba(16, 40, 30, .04), 0 14px 32px -14px rgba(16, 40, 30, .14);
    --aml-ring-soft: 0 0 0 1px rgba(26, 26, 24, .06), 0 1px 2px rgba(26, 26, 24, .04);
    --aml-ring-ctrl: 0 1px 2px rgba(20, 20, 40, .05), 0 0 0 1px rgba(20, 20, 40, .04);
    --aml-shadow-plum: 0 10px 22px -10px rgba(14, 77, 54, .6);
    --aml-shadow-pop: 0 0 0 1px rgba(20, 22, 25, .05), 0 18px 40px -12px rgba(20, 22, 25, .28);
    --aml-focus: 0 0 0 3px rgba(31, 122, 85, .18), inset 0 0 0 1px #1F7A55;

    /* Status */
    --aml-st-pago: #10C27A;
    --aml-st-pendente: #F5A524;
    --aml-st-concluida: #9A9AA6;

    --aml-sidebar-w: 240px;
}

/* ---------------------------------------------------------------------
   03. Base e ajustes sobre o Metronic
   --------------------------------------------------------------------- */
html, body.aml-body {
    background: var(--aml-bg);
}

/* O Metronic define html, body { height: 100% } e body { display: flex }, o que
   travava o layout na altura da tela (o conteúdo vazava e o fundo da sidebar
   acabava no fim da 1ª tela). Aqui a página cresce com o conteúdo. */
html { height: auto; }
body.aml-body { display: block; height: auto; min-height: 100vh; }

/* O Metronic força body { font-size: 13px !important } (12px no celular);
   aqui voltamos aos 14px do protótipo sem mexer no html, para que os
   componentes do Metronic baseados em rem continuem iguais. */
body.aml-body {
    margin: 0;
    color: var(--aml-ink);
    font-family: 'Figtree', system-ui, sans-serif !important;
    font-size: 14px !important;
    line-height: normal;
    -webkit-font-smoothing: antialiased;
    --bs-body-font-family: 'Figtree', system-ui, sans-serif;
    --bs-body-color: var(--aml-ink);
    --bs-body-bg: var(--aml-bg);
}

.aml-body *, .aml-body *::before, .aml-body *::after { box-sizing: border-box; }
.aml-body a { color: var(--aml-ink); text-decoration: none; }
.aml-body a:hover { color: var(--aml-brand); }
.aml-body input, .aml-body select, .aml-body textarea, .aml-body button { font-family: inherit; }
.aml-body button { cursor: pointer; }
.aml-body h1 { color: inherit; }
.aml-body label { margin: 0; }
.aml-body strong { font-weight: 500; color: var(--aml-ink); }
.aml-icon { flex-shrink: 0; display: block; }

/* Backdrop dos modais/drawer com desfoque, como no protótipo */
.modal-backdrop { --bs-backdrop-bg: #1A1A18; --bs-backdrop-opacity: .18; }
.modal-backdrop.show { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.offcanvas-backdrop { --bs-backdrop-bg: #141619; --bs-backdrop-opacity: .18; }

/* ---------------------------------------------------------------------
   04. Estrutura
   --------------------------------------------------------------------- */
.aml-shell {
    display: flex;
    min-height: 100vh;
    font-variant-numeric: tabular-nums;
}

/* Sidebar */
/* A coluna ocupa a altura toda da página (fundo até o fim); o conteúdo
   fica em .aml-sidebar__inner, preso no topo enquanto a página rola. */
.aml-sidebar {
    width: var(--aml-sidebar-w);
    flex-shrink: 0;
    color: #FFFFFF;
    background:
        radial-gradient(280px 220px at 15% 0%, rgba(184, 242, 107, .16), transparent 70%) top / 100% 100vh no-repeat,
        linear-gradient(180deg, var(--aml-forest-mid) 0%, var(--aml-forest-dark) 100vh) top / 100% 100vh no-repeat,
        var(--aml-forest-dark);
    z-index: 15;
}
.aml-sidebar__inner {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    overflow-y: auto;
}

.aml-brand { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 10px; color: #FFFFFF !important; }
.aml-brand__logo { width: 32px; height: 32px; flex-shrink: 0; display: block; }
.aml-brand__name { font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
/* Selo do ambiente de teste (só aparece com APP_ENV=staging) */
.aml-env-badge { margin: 10px 10px 0; padding: 5px 10px; border-radius: 999px; background: #F5A524; color: #3B2A06; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.aml-nav { display: flex; flex-direction: column; gap: 3px; }
.aml-sidebar__inner > .aml-nav:first-of-type { margin-top: 28px; }
.aml-nav__item {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 42px;
    padding: 0 6px;
    border-radius: 10px;
    color: var(--aml-mint-2) !important;
    transition: background .15s;
}
.aml-nav__item:hover { background: rgba(255, 255, 255, .06); color: #FFFFFF !important; }
.aml-nav__icon { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--aml-mint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.aml-nav__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aml-nav__badge { min-width: 20px; height: 20px; padding: 0 6px; margin-right: 4px; border-radius: 10px; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; background: var(--aml-lime); color: var(--aml-forest-dark); }

.aml-nav__item.is-active { background: rgba(255, 255, 255, .12); color: #FFFFFF !important; font-weight: 600; }
.aml-nav__item.is-active .aml-nav__icon { background: var(--aml-lime); color: var(--aml-forest-dark); }

.aml-nav-heading { margin-top: 22px; padding: 0 8px 8px; font-size: 12px; color: var(--aml-mint-3); }
.aml-nav__item--soon { color: var(--aml-mint-3) !important; cursor: default; border-radius: 21px; }
.aml-nav__item--soon:hover { background: transparent; }
.aml-nav__item--soon .aml-nav__icon { background: transparent; color: currentColor; }

.aml-promo { margin-top: auto; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); color: #FFFFFF; }
.aml-promo__title { font-size: 13px; font-weight: 600; }
.aml-promo__text { font-size: 12px; margin-top: 4px; line-height: 1.45; color: var(--aml-mint); }
.aml-promo__track { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .15); margin-top: 12px; }
.aml-promo__bar { height: 5px; border-radius: 3px; background: var(--aml-peach); }

.aml-user { display: flex; align-items: center; gap: 12px; padding: 16px 8px 2px; }
.aml-user__avatar { position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--aml-lime); color: var(--aml-forest-dark); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.aml-user__status { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #3DDC97; border: 2px solid var(--aml-forest); }
.aml-user__info { display: flex; flex-direction: column; min-width: 0; }
.aml-user__greet { font-size: 12px; color: var(--aml-mint); }
.aml-user__name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Área principal */
.aml-main {
    flex: 1;
    min-width: 0;
    background:
                radial-gradient(700px 320px at 100% -60px, rgba(217, 154, 43, .05), transparent 70%),
                whitesmoke;
}

/* Topbar */
.aml-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(26, 26, 24, .06);
}
.aml-topbar__inner { max-width: 1120px; margin: 0 auto; padding: 0 48px; height: 60px; display: flex; align-items: center; gap: 10px; }
.aml-topbar__spacer { flex: 1 1 0; }

.aml-search { display: flex; align-items: center; gap: 8px; height: 36px; flex: 1 1 200px; max-width: 300px; min-width: 120px; padding: 0 14px; border-radius: 18px; background: var(--aml-surface); box-shadow: var(--aml-ring-soft); color: var(--aml-muted); margin: 0; }
.aml-search__input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: 13px; color: var(--aml-ink); padding: 0; }
.aml-search__input::-webkit-search-cancel-button { display: none; }

.aml-date-chip { display: flex; align-items: center; gap: 7px; white-space: nowrap; flex-shrink: 0; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--aml-surface); box-shadow: var(--aml-ring-soft); font-size: 13px; color: var(--aml-ink); }
.aml-date-chip svg { color: var(--aml-ink-3); }

.aml-icon-btn { position: relative; flex-shrink: 0; width: 34px; height: 34px; border: none; border-radius: 10px; background: var(--aml-surface); box-shadow: var(--aml-ring-soft); display: flex; align-items: center; justify-content: center; color: var(--aml-ink-2) !important; }
.aml-icon-btn:hover { background: var(--aml-soft-btn); }
.aml-icon-btn__dot { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--aml-brand); border: 1.5px solid #FFFFFF; }
.aml-sidebar-toggle { display: none; }

.aml-content { max-width: 1120px; margin: 0 auto; padding: 36px 48px 80px; }

/* ---------------------------------------------------------------------
   05. Tipografia e utilitários
   --------------------------------------------------------------------- */
.text-tone-income { color: var(--aml-income) !important; }
.text-tone-expense { color: var(--aml-expense) !important; }
.text-tone-neutral, .text-tone-muted { color: var(--aml-muted-2) !important; }
.text-tone-brand { color: var(--aml-brand) !important; }
.text-tone-ink { color: var(--aml-ink) !important; }
.aml-hl { color: var(--aml-brand); }

.aml-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.aml-mt-6 { margin-top: 6px; }
.aml-mt-16 { margin-top: 16px; }
.aml-mt-24 { margin-top: 24px; }
.aml-stack { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.aml-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }

.aml-footnote { margin: 16px 0 0; font-size: 13px; color: var(--aml-muted-2); max-width: 560px; line-height: 1.5; }
.aml-footnote--wide { max-width: 600px; }

/* ---------------------------------------------------------------------
   06. Botões
   --------------------------------------------------------------------- */
/* Botão principal com "+" (Novo lançamento, Nova conta...) */
.aml-btn-primary {
    height: 38px;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0 16px 0 5px;
    border: none;
    border-radius: 19px;
    background: var(--aml-plum);
    box-shadow: var(--aml-shadow-plum);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 9px;
    transition: background .15s;
}
.aml-btn-primary:hover { background: var(--aml-plum-hover); }
.aml-btn-primary__plus { width: 28px; height: 28px; border-radius: 50%; background: var(--aml-lime); color: var(--aml-forest-dark); display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; }
.aml-drawer .aml-btn-primary--block { background: var(--aml-strong); box-shadow: 0 8px 18px -10px rgba(20, 22, 25, .7); }
.aml-drawer .aml-btn-primary--block:hover { background: var(--aml-forest-dark); }
/* "Desfazer pagamento": continua em destaque, mas em tom suave para não parecer a ação de confirmar */
.aml-drawer .aml-btn-primary--block.is-soft { background: var(--aml-brand-soft); color: var(--aml-brand-2) !important; box-shadow: none; }
.aml-drawer .aml-btn-primary--block.is-soft:hover { background: #D9F0DF; }
.aml-btn-primary--block { flex: 1; height: 42px; border-radius: 21px; padding: 0 16px; justify-content: center; gap: 8px; }

/* Botão escuro compacto (Salvar, CTA do popover) */
.aml-btn-dark { height: 34px; white-space: nowrap; flex-shrink: 0; padding: 0 16px; border: none; border-radius: 17px; background: var(--aml-plum); box-shadow: var(--aml-shadow-plum); color: #FFFFFF; font-size: 13px; font-weight: 500; }
.aml-btn-dark:hover { background: var(--aml-plum-hover); }

/* Botão secundário (Cancelar) */
.aml-btn-ghost { height: 34px; padding: 0 14px; border: 1px solid #E4E4E0; border-radius: 17px; background: #FFFFFF; font-size: 13px; color: var(--aml-ink); }
.aml-btn-ghost:hover { background: var(--aml-line-3); }

/* Botão de texto */
.aml-text-btn { border: none; background: none; padding: 0; font-size: 13px; font-weight: 500; color: var(--aml-warm-muted); }
.aml-text-btn:hover { color: var(--aml-warm-ink); }

/* Botão quadrado de ajustes e "Ver todos" nos cards */
.aml-square-btn { width: 28px; height: 28px; border-radius: 7px; background: var(--aml-soft-btn); display: flex; align-items: center; justify-content: center; color: var(--aml-ink-3) !important; }
.aml-square-btn:hover { background: var(--aml-soft-btn-hover); }
.aml-link-btn { height: 26px; padding: 0 10px; border: none; display: flex; align-items: center; gap: 5px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--aml-soft-btn); color: var(--aml-ink) !important; }
.aml-link-btn:hover { background: var(--aml-soft-btn-hover); }

/* Botão redondo do drawer */
.aml-round-btn { width: 42px; height: 42px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--aml-seg); color: var(--aml-warm-ink); display: flex; align-items: center; justify-content: center; }
.aml-round-btn:hover { background: #E6EAEC; }
.aml-round-btn.is-danger { color: var(--aml-expense); }

/* ---------------------------------------------------------------------
   07. Cards e cabeçalhos de página
   --------------------------------------------------------------------- */
.aml-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.aml-page-head__eyebrow { font-size: 13px; color: var(--aml-muted); }
.aml-page-head__title { margin: 4px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -.015em; line-height: 1.35; }
.aml-page-head__title--lg { font-size: 24px; letter-spacing: -.02em; }

.aml-card { background: var(--aml-surface); border-radius: 16px; border: 1px solid #F1F3F2; box-shadow: var(--aml-shadow-card); padding: 18px 20px; }
.aml-card--lg { padding: 20px 22px; }
.aml-card--plain { padding: 20px; }
.aml-card--table { padding: 16px 20px 4px; margin-top: 24px; }
.aml-card--summary { padding: 22px 24px; }

.aml-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--aml-line); }
.aml-card__title { font-size: 15px; font-weight: 700; }
.aml-card__actions { display: flex; align-items: center; gap: 10px; }

.aml-meta-label { font-size: 12px; color: var(--aml-muted); }
.aml-pill { font-size: 12px; font-weight: 600; color: var(--aml-brand-2); background: var(--aml-brand-soft); padding: 4px 9px; border-radius: 6px; white-space: nowrap; }

/* ---------------------------------------------------------------------
   08. Indicadores
   --------------------------------------------------------------------- */
.aml-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px 0; margin-top: 20px; }
.aml-stat { padding-right: 20px; }
.aml-stat--divided { border-left: 1px solid var(--aml-line); padding: 0 20px; }
.aml-stat__label { font-size: 13px; color: var(--aml-muted); }
.aml-stat__label--ink { color: var(--aml-ink-3); }
.aml-stat__value { font-weight: 500; }
.aml-stat__value--xl { font-size: 30px; letter-spacing: -.025em; margin-top: 10px; line-height: 1.3; }
.aml-stat__value--lg { font-size: 22px; letter-spacing: -.02em; }
.aml-stat__value--md { font-size: 20px; letter-spacing: -.015em; margin-top: 14px; }
.aml-stat__hint { font-size: 12px; color: var(--aml-muted-2); margin-top: 10px; }
.aml-stat__hint.aml-mt-6 { margin-top: 6px; }

/* Selo de tendência (seta + valor) */
.aml-trend { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--aml-muted); }
.aml-trend__badge { width: 15px; height: 15px; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: var(--aml-income); }
.aml-trend__value { font-weight: 500; color: var(--aml-income); }
.aml-trend.is-bad .aml-trend__badge { background: var(--aml-expense); }
.aml-trend.is-bad .aml-trend__value { color: var(--aml-expense); }
.aml-trend.is-down .aml-trend__badge svg { transform: scaleY(-1); }

/* Receitas x despesas */
.aml-flows { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px 0; margin-top: 18px; }
.aml-flow { padding-right: 20px; }
.aml-flow + .aml-flow { padding-left: 20px; border-left: 1px solid var(--aml-line); }
.aml-flow__top { display: flex; justify-content: space-between; align-items: center; }
.aml-flow__range { font-size: 12px; color: var(--aml-muted-2); }
.aml-flow__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 12px; }
.aml-flow__nums { flex-shrink: 0; }

.aml-spark { flex: 1; min-width: 0; max-width: 240px; height: 64px; overflow: visible; }
.aml-spark--income { --spark: var(--aml-income); }
.aml-spark--expense { --spark: var(--aml-expense); }
.aml-spark__stop-top { stop-color: var(--spark); stop-opacity: .22; }
.aml-spark__stop-bottom { stop-color: var(--spark); stop-opacity: 0; }
.aml-spark__line { fill: none; stroke: var(--spark); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; }

/* Ícone de categoria (cores via --c / --s) */
.aml-cat-ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--s); color: var(--c); }
.aml-cat-ico--sm { width: 24px; height: 24px; border-radius: 7px; }
.aml-cat-ico--md { width: 34px; height: 34px; border-radius: 10px; }
.aml-cat-ico--lg { width: 36px; height: 36px; border-radius: 11px; }
.aml-cat-ico--xl { width: 48px; height: 48px; border-radius: 50%; }

/* Lista de gastos por categoria */
.aml-cat-list { display: flex; flex-direction: column; gap: 15px; margin-top: 18px; }
.aml-cat-list__row { display: flex; align-items: center; gap: 12px; }
.aml-cat-list__info { flex: 1; min-width: 0; }
.aml-cat-list__line { display: flex; justify-content: space-between; font-size: 13px; }
.aml-cat-list__nums { display: flex; gap: 10px; }
.aml-cat-list__value { min-width: 84px; text-align: right; }

/* Barras de progresso */
.aml-progress { height: 6px; background: var(--aml-track); border-radius: 3px; margin-top: 7px; }
.aml-progress__bar { height: 6px; border-radius: 3px; }
.aml-progress--flex { flex: 1; margin-top: 0; }
.aml-progress--brand { background: var(--aml-brand-soft); margin-top: 12px; }
.aml-progress--brand .aml-progress__bar { background: var(--aml-brand); }

/* Contas */
.aml-big-value { font-size: 36px; font-weight: 500; letter-spacing: -.03em; margin-top: 6px; line-height: 1.3; }
.aml-segbar { display: flex; height: 6px; gap: 2px; margin-top: 20px; border-radius: 3px; overflow: hidden; }
.aml-acc-name { display: flex; align-items: center; gap: 10px; }
.aml-acc-name .aml-input { flex: 1; min-width: 0; }
.aml-acc-initial { width: 30px; height: 30px; border-radius: 10px; background: var(--c, var(--aml-brand-soft)); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--t, var(--aml-brand-2)); flex-shrink: 0; }
.aml-acc-initial--lg { width: 44px; height: 44px; border-radius: 14px; font-size: 16px; }

/* Resumo das recorrências */
.aml-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 22px; }
.aml-summary__divided { border-left: 1px solid #ECEFF0; padding-left: 22px; }
.aml-summary__value { font-size: 28px; font-weight: 500; letter-spacing: -.025em; margin-top: 8px; line-height: 1.3; }

/* Abas de categorias */
.aml-tabs-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.aml-tabs-bar__total { font-size: 13px; color: var(--aml-ink-3); }

/* ---------------------------------------------------------------------
   09. Tabelas em grid
   --------------------------------------------------------------------- */
.aml-table { overflow-x: auto; }
.aml-tr { display: grid; gap: 16px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--aml-line-3); }
.aml-tr--head { padding: 12px 0 10px; border-bottom-color: var(--aml-line); font-size: 12px; color: var(--aml-muted); }
.aml-tr--roomy { padding: 13px 0; }
.aml-tr--pad { padding-left: 12px; padding-right: 12px; border-bottom-color: var(--aml-line-2); }
.aml-tr--pad:not(.aml-tr--head) { padding-top: 12px; padding-bottom: 12px; }
.aml-tr--tall:not(.aml-tr--head) { padding-top: 14px; padding-bottom: 14px; }
.aml-tr--hover:hover { background: var(--aml-hover); }
.aml-tr.is-clickable { cursor: pointer; }
.aml-tr.is-selected { background: #F7F7F7; }
.aml-tr.is-dim { opacity: .5; }
.aml-tr.is-dim-soft { opacity: .55; }
.aml-card--plain .aml-tr--head.aml-tr--pad { padding-top: 0; }
.aml-tr--head.aml-tr--pad { padding-left: 12px; padding-right: 12px; }

/* Colunas de cada tabela */
.aml-grid-proximos { grid-template-columns: 56px minmax(0, 1fr) auto; }
.aml-grid-ultimos { grid-template-columns: 64px minmax(160px, 2fr) minmax(110px, 1fr) minmax(110px, 1fr) 110px 130px; }
.aml-grid-lanc { grid-template-columns: 28px 64px minmax(150px, 2fr) minmax(110px, 1.1fr) minmax(100px, 1fr) 96px 104px 128px 40px; gap: 12px; }
.aml-grid-contas { grid-template-columns: minmax(200px, 2fr) minmax(120px, 1fr) 130px 70px 150px 40px; }
.aml-grid-cats { grid-template-columns: minmax(220px, 2fr) 110px 140px minmax(160px, 1.4fr) 40px; }
.aml-grid-recs { grid-template-columns: minmax(220px, 2fr) 140px 150px 110px 130px 96px 40px; gap: 12px; }

/* Células */
.aml-cell-date { font-size: 13px; color: var(--aml-ink-3); }
.aml-cell-strong { font-weight: 500; }
.aml-cell-sub { font-size: 12px; color: var(--aml-muted-2); margin-top: 1px; }
.aml-cell-soft { color: var(--aml-ink-2); }
.aml-cell-balance { font-size: 15px; }
.aml-cell-desc { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.aml-cell-desc .aml-cell-sub { white-space: nowrap; margin-top: 0; }
.aml-cell-cat { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--aml-ink-2); }
.aml-cell-account { display: flex; align-items: center; gap: 12px; min-width: 0; }
.aml-cell-share { display: flex; align-items: center; gap: 10px; }
.aml-cell-share__pct { width: 36px; text-align: right; font-size: 12px; color: var(--aml-muted-2); }

/* Rodapé da tabela de lançamentos */
.aml-table-foot { display: flex; justify-content: space-between; gap: 24px; padding: 16px 12px; font-size: 13px; color: var(--aml-ink-3); flex-wrap: wrap; }
.aml-table-foot__totals { display: flex; gap: 28px; flex-wrap: wrap; }
.aml-table-foot__adj { padding-left: 28px; border-left: 1px solid #E4E7E5; color: var(--aml-muted); cursor: help; }
.aml-table-foot__adj .aml-table-foot__value { color: var(--aml-muted); }
.aml-table-foot__value { font-weight: 500; margin-left: 6px; color: var(--aml-ink); }

/* Estado vazio */
.aml-empty { padding: 56px 0; text-align: center; color: var(--aml-muted); }
.aml-empty__title { font-weight: 500; color: var(--aml-ink); }
.aml-empty__text { margin-top: 4px; font-size: 13px; }
.aml-empty__link { margin-top: 14px; font-size: 13px; color: var(--aml-brand-2); text-decoration: underline; border: none; background: none; }

/* ---------------------------------------------------------------------
   10. Status, checkbox e menu de ações
   --------------------------------------------------------------------- */
.aml-status {
    --st: var(--aml-st-pago);
    --st-bg: #E7F7EF;
    --st-fg: #0E7A4F;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    padding: 0 11px 0 9px;
    border-radius: 13px;
    background: var(--st-bg);
    color: var(--st-fg);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.aml-status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--st); }
.aml-status.is-pendente { --st: var(--aml-st-pendente); --st-bg: #FDF3E1; --st-fg: #9A6210; }
.aml-status.is-concluida { --st: var(--aml-st-concluida); --st-bg: #F1F1F4; --st-fg: #5E5E68; }
.aml-status--sm { height: 22px; padding: 0 9px; gap: 6px; border-radius: 11px; }
.aml-status--lg { height: 28px; padding: 0 12px 0 10px; border-radius: 14px; }

.aml-status-toggle { border: none; background: none; padding: 0; border-radius: 13px; display: inline-flex; transition: transform .12s; }
.aml-status-toggle:hover { transform: translateY(-1px); }

/* Checkbox redondinho */
.aml-check { width: 18px; height: 18px; padding: 0; border-radius: 6px; border: 1.5px solid #D2D7DB; background: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.aml-check.is-checked, .aml-check.is-partial { background: var(--aml-strong); border-color: var(--aml-strong); }
.aml-check.is-checked .aml-check__mark { width: 9px; height: 5px; border-left: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: translateY(-1px) rotate(-45deg); }
.aml-check.is-partial .aml-check__mark { width: 8px; height: 2px; border-radius: 1px; background: #FFFFFF; }

/* Botão "..." e menu de ações (dropdown) */
.aml-dots-btn { width: 30px; height: 30px; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #8A8A92; background: transparent; }
.aml-dots-btn:hover, .aml-dots-btn[aria-expanded="true"] { background: #EEF1F2; color: var(--aml-ink); }

.aml-menu.dropdown-menu { width: 208px; padding: 6px; border: none; border-radius: 14px; background: #FFFFFF; box-shadow: var(--aml-shadow-pop); z-index: 1060; }
.aml-menu.dropdown-menu.show { animation: amlFadeUp .12s ease-out; }
.aml-menu__item { width: 100%; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: none; border-radius: 9px; background: none; font-size: 13px; color: var(--aml-warm-ink) !important; text-align: left; }
.aml-menu__item:hover { background: var(--aml-seg); }
.aml-menu__item.is-danger { color: var(--aml-expense) !important; }
.aml-menu__sep { height: 1px; background: var(--aml-line-warm); margin: 5px 8px; }

/* ---------------------------------------------------------------------
   11. Barra de filtros, segmentados, selects, chips e popover
   --------------------------------------------------------------------- */
.aml-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--aml-line); }
.aml-toolbar__spacer { flex: 1; }

/* Controle segmentado */
.aml-seg { display: flex; padding: 3px; gap: 2px; border-radius: 20px; background: #FFFFFF; box-shadow: var(--aml-ring-ctrl); }
.aml-seg__item { height: 30px; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 15px; background: transparent; font-size: 13px; color: #6B6B73; white-space: nowrap; transition: background .15s; }
.aml-seg__item:hover { color: var(--aml-ink); }
.aml-seg__item.is-active { background: var(--aml-plum); color: #FFFFFF; font-weight: 500; }
.aml-seg__count { font-size: 11px; opacity: .6; }
.aml-seg--soft { background: var(--aml-seg); box-shadow: none; }
.aml-seg--block .aml-seg__item { flex: 1; height: 32px; border-radius: 16px; }
.aml-seg--field { height: 40px; }
.aml-seg--field .aml-seg__item { height: auto; border-radius: 17px; }

/* Selects com seta */
.aml-select { position: relative; display: inline-flex; }
.aml-select select { appearance: none; -webkit-appearance: none; border: none; outline: none; cursor: pointer; color: var(--aml-ink); font-family: inherit; }
.aml-select__caret { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--aml-muted); }
.aml-select--pill select { height: 36px; padding: 0 34px 0 16px; border-radius: 18px; background: #FFFFFF; box-shadow: var(--aml-ring-ctrl); font-size: 13px; }
.aml-select--pill .aml-select__caret { right: 14px; color: var(--aml-ink); opacity: .7; }
.aml-select--pill.is-changed select { background: var(--aml-brand-soft); color: var(--aml-strong); font-weight: 500; box-shadow: none; }
.aml-select--field { display: flex; width: 100%; }
.aml-select--field select { width: 100%; height: 40px; padding: 0 32px 0 12px; border-radius: 12px; background: var(--aml-field); font-size: 14px; }
.aml-select--field select:focus { background: #FFFFFF; box-shadow: var(--aml-focus); }
.aml-select--field .aml-select__caret { right: 13px; }
.aml-select--mini select { height: 32px; padding: 0 28px 0 12px; border-radius: 16px; background: var(--aml-seg); font-size: 13px; }
.aml-select--mini .aml-select__caret { right: 11px; }

/* Botão "Filtros" */
.aml-filter-btn { height: 36px; padding: 0 14px 0 12px; border: none; border-radius: 18px; background: #FFFFFF; color: var(--aml-ink); box-shadow: var(--aml-ring-ctrl); display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.aml-filter-btn:hover { background: var(--aml-seg); }
.aml-filter-btn.is-active { background: var(--aml-brand-soft); color: var(--aml-strong); box-shadow: none; }
.aml-filter-btn__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--aml-strong); color: #FFFFFF; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

/* Busca da tabela */
.aml-search-pill { position: relative; color: var(--aml-muted-2); }
.aml-search-pill svg { position: absolute; left: 14px; top: 11px; }
.aml-search-pill input { height: 36px; width: 220px; padding: 0 14px 0 36px; border: none; border-radius: 18px; background: #FFFFFF; box-shadow: var(--aml-ring-ctrl); font-size: 13px; color: var(--aml-ink); outline: none; }
.aml-search-pill input:focus { box-shadow: var(--aml-focus); }

/* Chips de filtros ativos */
.aml-chips { flex-basis: 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.aml-chips__list { display: contents; }
.aml-chip { height: 30px; padding: 0 6px 0 12px; border-radius: 15px; background: var(--aml-brand-soft); color: var(--aml-strong); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.aml-chip__k { color: #6B6B6B; }
.aml-chip__v { font-weight: 600; }
.aml-chip__x { width: 20px; height: 20px; border: none; border-radius: 50%; background: none; color: inherit; display: flex; align-items: center; justify-content: center; padding: 0; }
.aml-chip__x:hover { background: rgba(17, 17, 17, .15); }
.aml-chips__clear { height: 30px; padding: 0 10px; border: none; border-radius: 15px; background: none; font-size: 12px; font-weight: 500; color: var(--aml-warm-muted); }
.aml-chips__clear:hover { background: var(--aml-seg); }

/* Popover de filtros */
.aml-popover.dropdown-menu { width: 380px; max-width: calc(100vw - 16px); max-height: calc(100vh - 120px); padding: 0; border: none; border-radius: 18px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(20, 22, 25, .05), 0 24px 50px -16px rgba(20, 22, 25, .3); flex-direction: column; z-index: 1060; }
.aml-popover.dropdown-menu.show { display: flex; animation: amlFadeUp .14s ease-out; }
.aml-popover__title { padding: 16px 18px 4px; font-size: 14px; font-weight: 600; }
.aml-popover__body { padding: 8px 18px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.aml-popover__group { display: flex; flex-direction: column; gap: 8px; }
.aml-popover__label { font-size: 12px; color: #8A8A92; }
.aml-popover__foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-top: 1px solid var(--aml-line-warm); }
.aml-choices { display: flex; gap: 6px; flex-wrap: wrap; }
.aml-choice { height: 32px; padding: 0 12px; border: none; border-radius: 16px; background: var(--aml-seg); color: #55555F; font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.aml-choice.is-active { background: var(--aml-plum); color: #FFFFFF; }
.aml-choice__ico { width: 18px; height: 18px; border-radius: 50%; background: var(--s); color: var(--c); display: flex; align-items: center; justify-content: center; margin-left: -6px; }

/* ---------------------------------------------------------------------
   12. Modais e formulários
   --------------------------------------------------------------------- */
.aml-modal .modal-dialog { margin: 9vh auto 16px; padding: 0 16px; }
.aml-modal__dialog--md { max-width: 552px; }
.aml-modal__dialog--sm { max-width: 452px; }
.aml-modal__dialog--cat { max-width: 472px; }
#modal-conta .modal-dialog { margin-top: 12vh; }
#modal-categoria .modal-dialog { margin-top: 10vh; }

.aml-modal .modal-content { border: none; border-radius: 16px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(26, 26, 24, .05), 0 24px 64px -12px rgba(26, 26, 24, .24); color: var(--aml-ink); }
.aml-modal.fade .modal-dialog { transform: translateY(6px); transition: transform .16s ease-out; }
.aml-modal.show .modal-dialog { transform: none; }
.aml-modal--warm .modal-content { border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(20, 22, 25, .35); }

.aml-modal__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 0; }
.aml-modal__head--icon { justify-content: flex-start; gap: 12px; padding-top: 18px; }
.aml-modal__title { font-weight: 600; font-size: 15px; }
.aml-modal__close { width: 28px; height: 28px; border: none; background: none; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--aml-muted); }
.aml-modal__close:hover { background: var(--aml-line-3); color: var(--aml-ink); }
.aml-modal__body { padding: 16px 20px 20px; }
.aml-modal__body--stack { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; }
.aml-modal__body--roomy { gap: 16px; }
.aml-modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--aml-line-2); background: var(--aml-hover); border-radius: 0 0 16px 16px; }
.aml-modal--warm .aml-modal__foot { background: var(--aml-bg); border-radius: 0 0 18px 18px; }
.aml-modal__foot--between { justify-content: space-between; gap: 12px; }
.aml-modal__hint { font-size: 12px; color: var(--aml-muted-2); }
.aml-modal__actions { display: flex; gap: 8px; }

/* Valor grande */
.aml-amount { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; padding-bottom: 10px; border-bottom: 1px solid #E6E6E2; }
.aml-amount.is-invalid { border-bottom-color: #E5A29B; }
.aml-amount__currency { font-size: 22px; color: var(--aml-muted-2); }
.aml-amount__input { flex: 1; min-width: 0; border: none; outline: none; padding: 0; font-size: 32px; font-weight: 500; letter-spacing: -.02em; color: var(--aml-ink); font-variant-numeric: tabular-nums; background: transparent; }
.aml-amount.is-income .aml-amount__input { color: var(--aml-income); }
.aml-amount.is-expense .aml-amount__input { color: var(--aml-expense); }
.aml-amount.is-transfer .aml-amount__input { color: var(--aml-transfer); }
/* Tipo do lançamento: cada opção ativa tem sua cor (despesa vermelha, receita verde, transferência azul) */
.aml-seg[data-seg="type"] .aml-seg__item.is-active { font-weight: 600; }
.aml-seg[data-seg="type"] .aml-seg__item.is-active[data-value="expense"] { background: var(--aml-expense); }
.aml-seg[data-seg="type"] .aml-seg__item.is-active[data-value="income"] { background: var(--aml-income); }
.aml-seg[data-seg="type"] .aml-seg__item.is-active[data-value="transfer"] { background: var(--aml-transfer); }

/* Campos */
.aml-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-top: 18px; }
.aml-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--aml-ink-3); }
.aml-field--full { grid-column: 1 / -1; }
.aml-field--gap { gap: 8px; }
.aml-field__help { color: var(--aml-muted-2); font-size: 12px; margin: 0; }
.aml-input { height: 40px; border: none; border-radius: 12px; background: var(--aml-field); padding: 0 12px; font-size: 14px; color: var(--aml-ink); outline: none; width: 100%; }
.aml-input:focus { background: #FFFFFF; box-shadow: var(--aml-focus); }
.aml-input--prefix { display: flex; align-items: center; gap: 6px; }
.aml-input--prefix:focus-within { background: #FFFFFF; box-shadow: var(--aml-focus); }
.aml-input__prefix { color: var(--aml-muted-2); font-size: 14px; }
.aml-input--prefix input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 14px; color: var(--aml-ink); padding: 0; }

.aml-note { margin-top: 16px; font-size: 12px; color: var(--aml-ink-3); line-height: 1.5; display: flex; gap: 8px; }
.aml-note__icon { color: var(--aml-muted-2); }
.aml-note--warn { padding: 10px 12px; border-radius: 12px; background: #F4F4F6; color: #5E5E68; }
.aml-error { margin-top: 14px; font-size: 13px; color: var(--aml-error); }
.aml-modal__body--stack .aml-error { margin-top: 0; }

/* Opções com switch (recorrente / parcelado) */
.aml-options { margin-top: 18px; border-top: 1px solid var(--aml-line-2); }
.aml-option-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--aml-line-2); }
.aml-option-row__text { flex: 1; }
.aml-option-row__title { font-weight: 500; font-size: 13px; }
.aml-option-row__hint { font-size: 12px; color: var(--aml-muted-2); }

.aml-switch { width: 38px; height: 22px; padding: 0; border: none; border-radius: 11px; background: #E3E2EA; position: relative; flex-shrink: 0; transition: background .18s; }
.aml-switch__knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(20, 20, 40, .25); transition: left .18s; }
.aml-switch.is-on { background: var(--aml-brand); }
.aml-switch.is-on .aml-switch__knob { left: 19px; }

.aml-parcelas { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--aml-ink-3); }
.aml-parcelas__input { width: 52px; height: 32px; border: none; border-radius: 16px; background: var(--aml-seg); text-align: center; font-size: 13px; color: var(--aml-ink); outline: none; }
.aml-parcelas__input:focus { background: #FFFFFF; box-shadow: var(--aml-focus); }

/* Seletor de cor e ícone (categoria) */
.aml-swatches { display: flex; gap: 10px; flex-wrap: wrap; padding: 2px; }
.aml-swatch { width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%; background: var(--c); }
.aml-swatch.is-active { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--c); }
.aml-icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.aml-icon-opt { height: 42px; padding: 0; border: none; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: #F6F6F8; color: #8A8A92; }
.aml-icon-opt.is-active { background: var(--s); color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); }

/* ---------------------------------------------------------------------
   13. Drawer de detalhes (offcanvas)
   --------------------------------------------------------------------- */
.aml-drawer.offcanvas-end {
    --bs-offcanvas-width: 420px;
    top: 12px;
    right: 12px;
    bottom: 12px;
    max-width: calc(100vw - 24px);
    height: auto;
    border: none !important;
    border-radius: 16px;
    background: #FFFFFF;
    color: var(--aml-ink);
    box-shadow: 0 24px 60px -20px rgba(20, 22, 25, .35);
    display: flex;
    flex-direction: column;
    transform: translateX(calc(100% + 24px));
}
.aml-drawer.offcanvas-end.show, .aml-drawer.offcanvas-end.showing { transform: none; }
.aml-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 0; }
.aml-drawer__kind { font-size: 12px; color: #8A8A92; }
.aml-drawer__close { width: 32px; height: 32px; border: none; border-radius: 50%; background: none; display: flex; align-items: center; justify-content: center; color: #8A8A92; }
.aml-drawer__close:hover { background: var(--aml-seg); color: var(--aml-ink); }
.aml-drawer__body { flex: 1; overflow-y: auto; padding: 8px 24px 24px; }
.aml-drawer__hero { display: flex; align-items: center; gap: 14px; }
.aml-drawer__desc { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.aml-drawer__sub { font-size: 13px; color: #8A8A92; margin-top: 2px; }
.aml-drawer__value { font-size: 34px; font-weight: 500; letter-spacing: -.03em; margin-top: 22px; line-height: 1.3; }
.aml-drawer__status { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.aml-drawer__status .aml-status-toggle:disabled { cursor: default; transform: none; }
.aml-drawer__hint { font-size: 12px; color: #A39A9A; }
.aml-drawer__details { margin-top: 24px; border-radius: 16px; background: #F7F8F9; padding: 4px 16px; }
.aml-drawer__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #ECEEF0; font-size: 13px; }
.aml-drawer__row:last-child { border-bottom: none; }
.aml-drawer__row-k { color: #8A8A92; }
.aml-drawer__row-v { font-weight: 500; text-align: right; }
.aml-drawer__obs { margin-top: 16px; }
.aml-drawer__obs-label { font-size: 12px; color: #8A8A92; }
.aml-drawer__obs-text { margin-top: 6px; font-size: 13px; line-height: 1.5; color: #55555F; }
.aml-drawer__foot { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--aml-line-warm); }

/* ---------------------------------------------------------------------
   14. Barra de seleção em massa e toast
   --------------------------------------------------------------------- */
.aml-bulk { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1040; display: flex; align-items: center; gap: 2px; padding: 6px 6px 6px 18px; border-radius: 26px; background: var(--aml-strong); color: #FFFFFF; box-shadow: 0 18px 40px -14px rgba(20, 22, 25, .65); font-size: 13px; animation: amlFadeUpCenter .16s ease-out; max-width: calc(100vw - 24px); overflow-x: auto; }
.aml-bulk__label { font-weight: 600; margin-right: 10px; white-space: nowrap; }
.aml-bulk__btn { height: 36px; padding: 0 13px; border: none; border-radius: 18px; background: none; display: flex; align-items: center; gap: 7px; color: #FFFFFF; white-space: nowrap; }
.aml-bulk__btn:hover { background: rgba(255, 255, 255, .1); }
.aml-bulk__btn.is-danger { color: #FF8A8E; }
.aml-bulk__close { width: 36px; height: 36px; margin-left: 4px; flex-shrink: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.aml-bulk__close:hover { background: rgba(255, 255, 255, .18); }

.aml-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1100; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: var(--aml-ink); color: #FFFFFF; font-size: 13px; animation: amlFadeUpCenter .16s ease-out; white-space: nowrap; }
.aml-toast__dot { width: 6px; height: 6px; border-radius: 50%; background: #3FBF8F; }
.aml-toast__undo { margin-left: 8px; border: none; background: none; padding: 0; font-weight: 600; color: var(--aml-peach); }
body.has-bulk .aml-toast { bottom: 84px; }

/* ---------------------------------------------------------------------
   15. Animações
   --------------------------------------------------------------------- */
@keyframes amlFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes amlFadeUpCenter { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------------------------------------------------------------------
   16. Responsivo
   --------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .aml-topbar__inner { padding: 0 28px; }
    .aml-content { padding: 28px 28px 80px; }
}

/* Tablet/celular: sidebar vira gaveta aberta pelo botão de menu */
@media (max-width: 991.98px) {
    .aml-sidebar { position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(-100%); transition: transform .2s ease-out; box-shadow: 0 24px 60px -20px rgba(20, 22, 25, .45); z-index: 1045; }
    body.sidebar-open .aml-sidebar { transform: none; }
    body.sidebar-open::after { content: ''; position: fixed; inset: 0; background: rgba(26, 26, 24, .18); z-index: 1044; }
    .aml-sidebar-toggle { display: flex; }
    .aml-date-chip { display: none; }
}

@media (max-width: 767.98px) {
    .aml-topbar__inner { padding: 0 16px; gap: 8px; }
    .aml-content { padding: 22px 16px 80px; }
    .aml-btn-primary { font-size: 0; gap: 0; padding: 0 5px; }
    .aml-btn-primary .aml-btn-primary__plus { font-size: 16px; }
    .aml-page-head .aml-btn-primary { font-size: 13px; gap: 9px; padding: 0 16px 0 5px; }
    .aml-stat--divided, .aml-flow + .aml-flow, .aml-summary__divided { border-left: none; padding-left: 0; }
    .aml-grid-2 { grid-template-columns: 1fr; }
    .aml-search-pill input { width: 100%; }
    .aml-search-pill { flex: 1 1 100%; }
    .aml-form-grid { grid-template-columns: 1fr; }
    .aml-drawer.offcanvas-end { --bs-offcanvas-width: calc(100vw - 24px); }
}

/* ---------------------------------------------------------------------
   17. Estados do app AJAX e telas novas
   --------------------------------------------------------------------- */

/* Barra de carregamento no topo durante navegação/ações AJAX */
.aml-loader { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2000; background: linear-gradient(90deg, var(--aml-forest-light), var(--aml-lime)); box-shadow: 0 0 8px rgba(184, 242, 107, .5); opacity: 0; transition: width .3s ease-out, opacity .2s; }
.aml-loader.is-active { opacity: 1; width: 70%; transition: width 4s cubic-bezier(.1, .7, .2, 1), opacity .1s; }
.aml-loader.is-done { opacity: 0; width: 100%; transition: width .15s, opacity .3s .15s; }
.aml-content { transition: opacity .15s; }
.aml-content.is-loading, [data-lancamentos-results].is-loading { opacity: .55; pointer-events: none; }
.aml-btn-dark[disabled], .aml-btn-primary[disabled] { opacity: .6; cursor: progress; }

/* Status cancelado */
.aml-status.is-cancelado { --st: #B9B9C2; --st-bg: #F4F4F6; --st-fg: #8A8A92; }
.aml-tr.is-cancelled .aml-cell-strong, .aml-tr.is-cancelled .aml-cell-date { color: var(--aml-muted-2) !important; }
.aml-tr.is-cancelled .text-end.aml-cell-strong { text-decoration: line-through; }

/* Chips abaixo da barra de filtros e "carregar mais" */
.aml-chips--row { padding: 12px 0 2px; margin-top: 0; }
.aml-load-more { display: flex; justify-content: center; padding: 14px 0 2px; }
.aml-load-more .aml-link-btn { height: 32px; padding: 0 14px; border: none; }

/* Botão de sair ao lado do usuário */
.aml-user__logout { margin: 0 0 0 auto; }
.aml-icon-btn--ghost { background: transparent; box-shadow: none; color: var(--aml-mint) !important; }
.aml-icon-btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF !important; }

/* Telas de acesso (entrar / cadastro) */
body.aml-auth { background: radial-gradient(520px 360px at 15% -10%, rgba(184, 242, 107, .22), transparent 70%), linear-gradient(180deg, #EEF5F1, var(--aml-bg) 60%); min-height: 100vh; }
.aml-auth__wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; }
.aml-auth__brand { margin-bottom: 22px; color: var(--aml-forest) !important; }
.aml-auth__card { width: 100%; max-width: 400px; background: var(--aml-surface); border-radius: 22px; border: 1px solid #F1F3F2; box-shadow: var(--aml-shadow-card), 0 24px 60px -30px rgba(16, 40, 30, .25); padding: 28px; }
.aml-auth__title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.aml-auth__text { margin: 6px 0 0; font-size: 13px; color: var(--aml-muted); }
.aml-auth__form { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.aml-auth__form .aml-error { margin-top: 0; }
.aml-auth__remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--aml-ink-3); cursor: pointer; }
.aml-auth__remember input { accent-color: var(--aml-plum); }
.aml-auth__submit { height: 42px; border-radius: 21px; font-size: 14px; margin-top: 4px; }
.aml-auth__switch { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--aml-muted); }
.aml-auth__switch a { color: var(--aml-forest) !important; font-weight: 600; }
.aml-auth__foot { margin-top: 18px; font-size: 12px; color: var(--aml-mint-3); }
.aml-auth__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 10px; font-size: 12px; }
.aml-auth__links a { color: var(--aml-muted) !important; }
.aml-auth__links a:hover { color: var(--aml-forest) !important; text-decoration: underline; }

/* Páginas públicas (privacidade, termos, suporte): mesmo layout de acesso, card largo de leitura */
.aml-auth__card--doc { max-width: 760px; padding: 32px 36px; }
.aml-doc { font-size: 14px; line-height: 1.65; color: var(--aml-ink-3); }
.aml-doc__updated { margin: 6px 0 0; font-size: 12px; color: var(--aml-muted); }
.aml-doc h2 { margin: 26px 0 8px; font-size: 16px; font-weight: 600; color: var(--aml-forest); }
.aml-doc h3 { margin: 16px 0 4px; font-size: 14px; font-weight: 600; color: var(--aml-ink); }
.aml-doc p { margin: 0 0 10px; }
.aml-doc ul { margin: 0 0 10px; padding-left: 20px; }
.aml-doc li { margin-bottom: 4px; }
.aml-doc a { color: var(--aml-forest) !important; font-weight: 600; }
@media (max-width: 575px) { .aml-auth__card--doc { padding: 24px 20px; } }

/* ---------------------------------------------------------------------
   18. Perfil, escolhas (escopo) e "Em breve"
   --------------------------------------------------------------------- */

/* Card de orçamento da sidebar marcado como "Em breve" */
.aml-promo { position: relative; }
.aml-promo__badge { position: absolute; top: 12px; right: 12px; height: 20px; padding: 0 8px; border-radius: 10px; background: rgba(184, 242, 107, .16); color: var(--aml-peach); font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; display: flex; align-items: center; }
.aml-promo .aml-promo__title { padding-right: 70px; }
.aml-promo .aml-promo__track { opacity: .5; }

/* Usuário da sidebar vira link para o perfil */
.aml-user__link { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; padding: 4px; margin: -4px; border-radius: 26px; color: #FFFFFF !important; transition: background .15s; }
.aml-user__link:hover, .aml-user__link.is-active { background: rgba(255, 255, 255, .08); }

/* Tela de perfil */
.aml-profile { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; margin-top: 24px; align-items: start; }
.aml-profile__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.aml-profile__summary { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 22px; position: sticky; top: 84px; }
.aml-profile__avatar { position: relative; width: 72px; height: 72px; border-radius: 50%; background: var(--aml-forest); color: var(--aml-lime); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; box-shadow: var(--aml-shadow-plum); cursor: pointer; margin: 0; }
.aml-profile__avatar-edit { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--aml-lime); color: var(--aml-forest-dark); border: 2px solid #FFFFFF; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.aml-profile__avatar-edit svg { width: 13px; height: 13px; }
.aml-profile__avatar:hover .aml-profile__avatar-edit { transform: scale(1.08); }
.aml-profile__avatar.is-busy { opacity: .6; pointer-events: none; }
.aml-profile__photo-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--aml-muted); }
.aml-profile__photo-actions .aml-inline-link { border: none; background: none; padding: 0; font-size: 12px; cursor: pointer; }
.aml-inline-link--muted { color: var(--aml-muted) !important; }
/* Foto por cima das iniciais (avatar do perfil e da sidebar) */
.aml-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.aml-avatar-img[hidden] { display: none; }
.aml-profile__name { margin-top: 14px; font-size: 16px; font-weight: 600; }
.aml-profile__email { margin-top: 2px; font-size: 13px; color: var(--aml-muted); word-break: break-all; }
.aml-profile__since { margin-top: 10px; font-size: 12px; color: var(--aml-muted-2); }
.aml-profile__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--aml-line); }
.aml-profile__stats strong { display: block; font-size: 18px; font-weight: 600; }
.aml-profile__stats span { font-size: 11px; color: var(--aml-muted); }
.aml-profile__form .aml-form-grid { margin-top: 18px; }
.aml-profile__actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.aml-profile__warning { margin: 16px 0 0; font-size: 13px; color: var(--aml-ink-3); }
.aml-form-grid--3 { grid-template-columns: repeat(3, 1fr); }
.aml-card--danger .aml-card__title { color: var(--aml-expense); }
.aml-btn-danger { height: 34px; padding: 0 16px; border: none; border-radius: 17px; background: var(--aml-expense); color: #FFFFFF; font-size: 13px; font-weight: 500; white-space: nowrap; }
.aml-btn-danger:hover { background: #B42318; }
.aml-btn-danger[disabled] { opacity: .6; cursor: progress; }

/* Passo de escopo dentro do modal de lançamento */
.aml-scope { padding: 18px 20px 20px; border-top: 1px solid var(--aml-line-2); background: var(--aml-bg); border-radius: 0 0 16px 16px; animation: amlFadeUp .14s ease-out; }
.aml-scope__title { font-size: 14px; font-weight: 600; }
.aml-scope__text { margin-top: 2px; font-size: 13px; color: var(--aml-muted); }
.aml-scope__options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 12px; }
.aml-scope__option, .aml-choice-modal__option { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border: none; border-radius: 14px; background: #FFFFFF; box-shadow: var(--aml-ring-ctrl); text-align: left; transition: box-shadow .15s, transform .12s; }
.aml-scope__option:hover, .aml-choice-modal__option:hover { box-shadow: var(--aml-focus); transform: translateY(-1px); }
.aml-scope__label, .aml-choice-modal__label { font-size: 13px; font-weight: 600; color: var(--aml-ink); }
.aml-scope__hint, .aml-choice-modal__hint { font-size: 12px; color: var(--aml-muted); line-height: 1.4; }
.aml-scope__option[disabled] { opacity: .6; cursor: progress; transform: none; }

/* Modal genérico de escolha */
.aml-choice-modal__text { margin: 0; font-size: 13px; color: var(--aml-ink-3); line-height: 1.5; }
.aml-choice-modal__options { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.aml-choice-modal__option { width: 100%; }
.aml-choice-modal__option.is-danger .aml-choice-modal__label { color: var(--aml-expense); }

@media (max-width: 991.98px) {
    .aml-profile { grid-template-columns: 1fr; }
    .aml-profile__summary { position: static; }
}
@media (max-width: 767.98px) {
    .aml-form-grid--3, .aml-scope__options { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   19. Select2 no visual do AppMyLife
   O Select2 vem do plugins.bundle do Metronic; aqui ele assume a aparência
   dos campos .aml-select (field, pill e mini). A seta usada é a nossa
   (.aml-select__caret); a do Select2 fica escondida.
   --------------------------------------------------------------------- */
.aml-select .select2-container { font-family: inherit; }
.aml-select--field .select2-container, .aml-select--mini .select2-container { width: 100% !important; }
.aml-select .select2-container .select2-selection--single { display: flex; align-items: center; border: none; outline: none; cursor: pointer; transition: background .15s, box-shadow .15s; }
.aml-select .select2-container .select2-selection__rendered { color: var(--aml-ink); line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aml-select .select2-container .select2-selection__arrow { display: none; }
.aml-select .select2-container--open ~ .aml-select__caret { transform: translateY(-50%) rotate(180deg); }
.aml-select__caret { transition: transform .15s; z-index: 1; }

/* Campo dos modais */
.aml-select--field .select2-selection--single { height: 40px; border-radius: 12px; background: var(--aml-field); }
.aml-select--field .select2-selection__rendered { padding: 0 32px 0 12px !important; font-size: 14px; }
.aml-select--field .select2-container--focus .select2-selection--single,
.aml-select--field .select2-container--open .select2-selection--single { background: #FFFFFF; box-shadow: var(--aml-focus); }

/* Pílula da barra de filtros */
.aml-select--pill .select2-selection--single { height: 36px; border-radius: 18px; background: #FFFFFF; box-shadow: var(--aml-ring-ctrl); }
.aml-select--pill .select2-selection__rendered { padding: 0 34px 0 16px !important; font-size: 13px; }
.aml-select--pill.is-changed .select2-selection--single { background: var(--aml-brand-soft); box-shadow: none; }
.aml-select--pill.is-changed .select2-selection__rendered { color: var(--aml-strong); font-weight: 500; }
.aml-select--pill .select2-container--open .select2-selection--single { box-shadow: var(--aml-focus); }

/* Mini (frequência da recorrência) */
.aml-select--mini { min-width: 116px; }
.aml-select--mini .select2-selection--single { height: 32px; border-radius: 16px; background: var(--aml-seg); }
.aml-select--mini .select2-selection__rendered { padding: 0 28px 0 12px !important; font-size: 13px; }

/* Dropdown aberto (no body ou dentro do modal) */
.aml-body .select2-dropdown { border: none; border-radius: 14px; background: #FFFFFF; box-shadow: var(--aml-shadow-pop); padding: 6px; overflow: hidden; z-index: 1070; font-family: 'Figtree', system-ui, sans-serif; animation: amlFadeUp .12s ease-out; }
.aml-body .select2-container--open .select2-dropdown--below { margin-top: 6px; }
.aml-body .select2-container--open .select2-dropdown--above { margin-top: -6px; }
.aml-body .select2-dropdown .select2-search--dropdown { padding: 0 0 6px; }
.aml-body .select2-dropdown .select2-search__field { height: 34px; border: none !important; border-radius: 10px; background: var(--aml-field); padding: 0 10px; font-size: 13px; color: var(--aml-ink); outline: none; }
.aml-body .select2-dropdown .select2-search__field:focus { background: #FFFFFF; box-shadow: var(--aml-focus); }
.aml-body .select2-dropdown .select2-results > .select2-results__options { max-height: 240px; overflow-y: auto; }
.aml-body .select2-dropdown .select2-results__option { padding: 8px 10px; border-radius: 9px; font-size: 13px; color: var(--aml-warm-ink); }
.aml-body .select2-dropdown .select2-results__option--highlighted,
.aml-body .select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable { background: var(--aml-seg) !important; color: var(--aml-warm-ink) !important; }
.aml-body .select2-dropdown .select2-results__option--selected,
.aml-body .select2-dropdown .select2-results__option[aria-selected="true"] { background: transparent; color: var(--aml-brand-2); font-weight: 500; }
.aml-body .select2-dropdown .select2-results__message { color: var(--aml-muted); }

/* ---------------------------------------------------------------------
   20. Boas-vindas, estados vazios e previsão
   --------------------------------------------------------------------- */
.aml-welcome { background: radial-gradient(420px 220px at 0% 0%, rgba(184, 242, 107, .22), transparent 70%), #FFFFFF; }
.aml-welcome__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.aml-welcome__title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.aml-welcome__text { margin-top: 4px; font-size: 13px; color: var(--aml-ink-3); }
.aml-welcome__progress { min-width: 160px; font-size: 12px; color: var(--aml-muted); text-align: right; }
.aml-welcome__progress .aml-progress { margin-top: 6px; }
.aml-welcome__steps { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.aml-welcome__step { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--aml-bg); box-shadow: inset 0 0 0 1px var(--aml-line-warm); }
.aml-welcome__num { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--aml-plum); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.aml-welcome__body { flex: 1; min-width: 0; }
.aml-welcome__step-title { font-size: 14px; font-weight: 600; }
.aml-welcome__step-text { margin-top: 2px; font-size: 12px; color: var(--aml-muted); }
.aml-welcome__step .aml-link-btn { height: 32px; padding: 0 12px; white-space: nowrap; }
.aml-welcome__step.is-done .aml-welcome__num { background: var(--aml-income); }
.aml-welcome__step.is-done .aml-welcome__step-title { color: var(--aml-muted); text-decoration: line-through; }

.aml-empty--compact { padding: 28px 0 18px; }

/* Seletor "Previsão" no topo do card de saldo */
.aml-card__actions .aml-select--pill select,
.aml-card__actions .aml-select--pill .select2-selection--single { height: 28px; }
.aml-card__actions .aml-select--pill .select2-selection__rendered { padding: 0 30px 0 12px !important; font-size: 12px; }
.aml-card__actions .aml-select--pill .aml-select__caret { right: 11px; }

/* ---------------------------------------------------------------------
   21. Flatpickr (calendário)
   --------------------------------------------------------------------- */
.aml-field .flatpickr-wrapper { display: block; width: 100%; }
.aml-body .flatpickr-calendar { width: 300px; padding: 8px; border: none; border-radius: 16px; background: #FFFFFF; box-shadow: var(--aml-shadow-pop); font-family: 'Figtree', system-ui, sans-serif; }
.aml-body .flatpickr-calendar.static { top: calc(100% + 6px); z-index: 1070; }
.aml-body .flatpickr-calendar::before, .aml-body .flatpickr-calendar::after { display: none; }
.aml-body .flatpickr-months .flatpickr-month { height: 40px; color: var(--aml-ink); fill: var(--aml-ink); }
.aml-body .flatpickr-current-month { font-size: 14px; font-weight: 600; padding-top: 8px; }
.aml-body .flatpickr-current-month .cur-month { font-weight: 600; }
.aml-body .flatpickr-current-month input.cur-year { font-weight: 500; }
.aml-body .flatpickr-months .flatpickr-prev-month, .aml-body .flatpickr-months .flatpickr-next-month { top: 8px; padding: 8px; border-radius: 10px; color: var(--aml-ink-3); fill: var(--aml-ink-3); }
.aml-body .flatpickr-months .flatpickr-prev-month:hover, .aml-body .flatpickr-months .flatpickr-next-month:hover { background: var(--aml-seg); }
.aml-body .flatpickr-months .flatpickr-prev-month:hover svg, .aml-body .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--aml-brand); }
.aml-body span.flatpickr-weekday { font-size: 11px; font-weight: 500; color: var(--aml-muted); }
.aml-body .flatpickr-innerContainer, .aml-body .flatpickr-rContainer, .aml-body .flatpickr-days, .aml-body .dayContainer { width: 284px; min-width: 284px; max-width: 284px; }
.aml-body .flatpickr-day { height: 38px; line-height: 38px; max-width: 40px; border: none; border-radius: 12px; font-size: 13px; color: var(--aml-ink); }
.aml-body .flatpickr-day:hover, .aml-body .flatpickr-day:focus { background: var(--aml-seg); color: var(--aml-ink); }
.aml-body .flatpickr-day.today { box-shadow: inset 0 0 0 1.5px var(--aml-forest-light); color: var(--aml-forest); font-weight: 600; }
.aml-body .flatpickr-day.selected, .aml-body .flatpickr-day.selected:hover { background: var(--aml-plum); color: #FFFFFF; box-shadow: var(--aml-shadow-plum); }
.aml-body .flatpickr-day.prevMonthDay, .aml-body .flatpickr-day.nextMonthDay { color: #C9C9CF; }

/* ---------------------------------------------------------------------
   22. Tabelas viram lista de cards no celular
   Abaixo de 768px cada linha vira um bloco de duas linhas; colunas
   secundárias somem (o detalhe completo fica no drawer / no menu "...").
   Os filhos de cada linha seguem a ordem das colunas da tabela.
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .aml-table { overflow: visible; }
    .aml-table__inner { min-width: 0 !important; }
    .aml-tr--head { display: none; }
    .aml-tr:not(.aml-tr--head) { gap: 4px 12px; padding: 12px 4px !important; }
    .aml-tr:not(.aml-tr--head) > div { min-width: 0; }

    /* Lançamentos: check | data | descrição | categoria | conta | tipo | status | valor | menu */
    .aml-grid-lanc { grid-template-columns: 22px minmax(0, 1fr) auto 30px; grid-template-areas: "check desc value menu" "check date status menu"; }
    .aml-grid-lanc > :nth-child(1) { grid-area: check; }
    .aml-grid-lanc > :nth-child(2) { grid-area: date; font-size: 12px; }
    .aml-grid-lanc > :nth-child(3) { grid-area: desc; }
    .aml-grid-lanc > :nth-child(4), .aml-grid-lanc > :nth-child(5), .aml-grid-lanc > :nth-child(6) { display: none; }
    .aml-grid-lanc > :nth-child(7) { grid-area: status; justify-self: end; }
    .aml-grid-lanc > :nth-child(8) { grid-area: value; }
    .aml-grid-lanc > :nth-child(9) { grid-area: menu; align-self: center; }
    .aml-grid-lanc .aml-cell-desc { flex-direction: column; gap: 0; }

    /* Últimos lançamentos: data | descrição | categoria | conta | status | valor */
    .aml-grid-ultimos { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "desc value" "date status"; }
    .aml-grid-ultimos > :nth-child(1) { grid-area: date; font-size: 12px; }
    .aml-grid-ultimos > :nth-child(2) { grid-area: desc; }
    .aml-grid-ultimos > :nth-child(3), .aml-grid-ultimos > :nth-child(4) { display: none; }
    .aml-grid-ultimos > :nth-child(5) { grid-area: status; justify-self: end; }
    .aml-grid-ultimos > :nth-child(6) { grid-area: value; }

    /* Contas: conta | tipo | saldo inicial | % | saldo atual | menu */
    .aml-grid-contas { grid-template-columns: minmax(0, 1fr) auto 30px; grid-template-areas: "acc balance menu"; }
    .aml-grid-contas > :nth-child(1) { grid-area: acc; }
    .aml-grid-contas > :nth-child(2), .aml-grid-contas > :nth-child(3), .aml-grid-contas > :nth-child(4) { display: none; }
    .aml-grid-contas > :nth-child(5) { grid-area: balance; }
    .aml-grid-contas > :nth-child(6) { grid-area: menu; }

    /* Categorias: categoria | no mês | total | participação | menu */
    .aml-grid-cats { grid-template-columns: minmax(0, 1fr) auto 30px; grid-template-areas: "cat total menu" "share share menu"; }
    .aml-grid-cats > :nth-child(1) { grid-area: cat; }
    .aml-grid-cats > :nth-child(2) { display: none; }
    .aml-grid-cats > :nth-child(3) { grid-area: total; }
    .aml-grid-cats > :nth-child(4) { grid-area: share; padding-left: 46px; }
    .aml-grid-cats > :nth-child(5) { grid-area: menu; align-self: center; }

    /* Recorrências: recorrência | frequência | próximo | conta | valor | status | menu */
    .aml-grid-recs { grid-template-columns: minmax(0, 1fr) auto 30px; grid-template-areas: "rec value menu" "next status menu"; }
    .aml-grid-recs > :nth-child(1) { grid-area: rec; }
    .aml-grid-recs > :nth-child(2), .aml-grid-recs > :nth-child(4) { display: none; }
    .aml-grid-recs > :nth-child(3) { grid-area: next; padding-left: 46px; font-size: 12px; }
    .aml-grid-recs > :nth-child(5) { grid-area: value; }
    .aml-grid-recs > :nth-child(6) { grid-area: status; justify-self: end; }
    .aml-grid-recs > :nth-child(7) { grid-area: menu; align-self: center; }

    .aml-table-foot { padding: 14px 4px; }
    .aml-table-foot__totals { gap: 6px 16px; }
    .aml-welcome__step { flex-wrap: wrap; }
    .aml-welcome__step .aml-btn-dark, .aml-welcome__step .aml-link-btn { margin-left: 44px; }
    .aml-card__head { row-gap: 8px; }

    /* Abas de tipo rolam dentro de si (sem empurrar a página) */
    .aml-toolbar .aml-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .aml-toolbar .aml-seg::-webkit-scrollbar { display: none; }
    .aml-toolbar .aml-seg__item { padding: 0 11px; flex-shrink: 0; }

    /* Ações dos cards quebram linha; rótulos auxiliares somem */
    .aml-card__actions { flex-wrap: wrap; gap: 8px; }
    .aml-card__actions .aml-meta-label { display: none; }
}

/* ---------------------------------------------------------------------
   23. Campo de senha (olho e checklist)
   --------------------------------------------------------------------- */
.aml-password { position: relative; display: block; }
.aml-password .aml-input { padding-right: 44px; }
.aml-password__toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; border: none; border-radius: 9px; background: transparent; color: var(--aml-muted); display: flex; align-items: center; justify-content: center; }
.aml-password__toggle:hover { background: var(--aml-seg); color: var(--aml-ink); }
.aml-password__eye-off { display: none; }
.aml-password.is-visible .aml-password__eye { display: none; }
.aml-password.is-visible .aml-password__eye-off { display: block; }
/* O navegador (Edge) mostra seu próprio olho; escondemos para não duplicar */
.aml-password input::-ms-reveal, .aml-password input::-ms-clear { display: none; }

.aml-password-rules { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 2 colunas quando cabe; 1 coluna em campos estreitos (perfil) */ gap: 4px 12px; font-size: 12px; color: var(--aml-muted); }
.aml-password-rules li { display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: color .15s; }
.aml-password-rules li::before { content: ''; width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #D2D7DB; background: #FFFFFF center / 9px no-repeat; transition: background-color .15s, box-shadow .15s; }
.aml-password-rules li.is-ok { color: var(--aml-income); }
.aml-password-rules li.is-ok::before { background-color: var(--aml-income); box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E"); }
.aml-password-match { margin-top: 4px; font-size: 12px; color: var(--aml-muted); }
.aml-password-match.is-ok { color: var(--aml-income); }
.aml-password-match.is-bad { color: var(--aml-expense); }

/* ---------------------------------------------------------------------
   24. Cartões de crédito
   --------------------------------------------------------------------- */
.aml-status.is-fatura { --st: #2F7DE1; --st-bg: #E6F0FC; --st-fg: #1F5FAF; }
.aml-card-limit { margin-top: 12px; max-width: 280px; }
.aml-card-fields { display: flex; flex-direction: column; gap: 12px; }
.aml-form-grid--tight { margin-top: 0; }
.aml-note--card { padding: 10px 12px; border-radius: 12px; background: #E6F0FC; color: #1F5FAF; }
.aml-note--card .aml-note__icon { color: #1F5FAF; }
.aml-inline-link { color: var(--aml-brand-2) !important; font-weight: 500; }
.aml-square-btn.is-disabled { opacity: .35; cursor: default; }
.aml-tabs-bar a.aml-seg__item { text-decoration: none; }

.aml-statement__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--aml-line); }
.aml-statement__nav { display: flex; align-items: center; gap: 12px; }
.aml-statement__title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.aml-statement__period { margin-top: 2px; font-size: 12px; color: var(--aml-muted); }
.aml-statement__totals { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.aml-statement__totals > div { display: flex; flex-direction: column; }
.aml-statement__totals span { font-size: 12px; color: var(--aml-muted); }
.aml-statement__totals strong { font-size: 16px; font-weight: 500; }

.aml-grid-fatura { grid-template-columns: 64px minmax(160px, 2fr) minmax(120px, 1fr) 130px 40px; }
.aml-grid-faturas { grid-template-columns: minmax(120px, 1fr) 110px 140px 110px; padding-left: 12px; padding-right: 12px; color: var(--aml-ink) !important; }
.aml-grid-faturas.is-selected { background: #F7F7F7; }

/* ---------------------------------------------------------------------
   25. Previsão
   --------------------------------------------------------------------- */
.aml-forecast__horizon { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aml-forecast__horizon a.aml-seg__item { text-decoration: none; }
.aml-forecast__alert { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 14px; border-radius: 14px; background: #FDECEA; color: #A3261D; font-size: 13px; }
.aml-forecast__alert strong { color: inherit; font-weight: 600; }

.aml-forecast-chart { margin-top: 16px; }
.aml-forecast-chart svg { width: 100%; height: 240px; overflow: visible; }
.aml-forecast-chart__stop-top { stop-color: var(--aml-forest-light); stop-opacity: .22; }
.aml-forecast-chart__stop-bottom { stop-color: var(--aml-forest-light); stop-opacity: 0; }
.aml-forecast-chart__line { fill: none; stroke: var(--aml-forest); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.aml-forecast-chart__zero { stroke: var(--aml-expense); stroke-width: 1; stroke-dasharray: 5 5; opacity: .6; vector-effect: non-scaling-stroke; }
.aml-forecast-chart__dot { fill: #FFFFFF; stroke: var(--aml-forest); stroke-width: 2; vector-effect: non-scaling-stroke; }
.aml-forecast-chart__dot.is-negative { stroke: var(--aml-expense); fill: #FDECEA; }
.aml-forecast-chart__label { font-size: 12px; fill: var(--aml-muted); text-anchor: middle; font-family: 'Figtree', system-ui, sans-serif; }

.aml-grid-previsao { grid-template-columns: minmax(140px, 1.4fr) repeat(5, minmax(100px, 1fr)) 28px; }
.aml-forecast-month > summary { list-style: none; cursor: pointer; }
.aml-forecast-month > summary::-webkit-details-marker { display: none; }
.aml-forecast-month__caret { color: var(--aml-muted); transition: transform .15s; }
.aml-forecast-month[open] .aml-forecast-month__caret { transform: rotate(180deg); }
.aml-forecast-month[open] > summary { background: var(--aml-bg); }
.aml-forecast-month__body { padding: 4px 12px 10px; background: var(--aml-bg); border-bottom: 1px solid var(--aml-line-2); }
.aml-forecast-month__empty { padding: 12px 0; }
.aml-forecast-event { display: grid; grid-template-columns: 60px minmax(0, 1fr) 150px 130px 120px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--aml-line-warm); font-size: 13px; }
.aml-forecast-event:last-child { border-bottom: none; }
.aml-forecast-event__desc { display: flex; flex-direction: column; min-width: 0; }
.aml-forecast-kind { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; margin-right: 4px; border-radius: 11px; font-size: 11px; font-weight: 600; background: #F1F1F4; color: #5E5E68; }
.aml-forecast-kind.is-recurring { background: #F2EBFC; color: #6A3FB8; }
.aml-forecast-kind.is-bill { background: #E6F0FC; color: #1F5FAF; }
.aml-forecast-kind.is-late { background: #FDECEA; color: #A3261D; }

@media (max-width: 767.98px) {
    .aml-statement__totals { gap: 14px; width: 100%; }
    .aml-statement__totals .aml-btn-dark,
    .aml-statement__totals .aml-btn-ghost { width: 100%; }
    .aml-grid-fatura { grid-template-columns: minmax(0, 1fr) auto 30px; grid-template-areas: "desc value menu" "date cat menu"; }
    .aml-grid-fatura > :nth-child(1) { grid-area: date; font-size: 12px; }
    .aml-grid-fatura > :nth-child(2) { grid-area: desc; }
    .aml-grid-fatura > :nth-child(3) { grid-area: cat; justify-self: end; }
    .aml-grid-fatura > :nth-child(4) { grid-area: value; }
    .aml-grid-fatura > :nth-child(5) { grid-area: menu; align-self: center; }
    .aml-grid-faturas { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label total" "due status"; }
    .aml-grid-faturas > :nth-child(1) { grid-area: label; }
    .aml-grid-faturas > :nth-child(2) { grid-area: due; }
    .aml-grid-faturas > :nth-child(3) { grid-area: total; }
    .aml-grid-faturas > :nth-child(4) { grid-area: status; }
    .aml-grid-previsao { grid-template-columns: minmax(0, 1fr) auto 24px; grid-template-areas: "month end caret" "result result caret"; }
    .aml-grid-previsao > :nth-child(1) { grid-area: month; }
    .aml-grid-previsao > :nth-child(2), .aml-grid-previsao > :nth-child(3), .aml-grid-previsao > :nth-child(4) { display: none; }
    .aml-grid-previsao > :nth-child(5) { grid-area: result; text-align: left !important; font-size: 12px; }
    .aml-grid-previsao > :nth-child(6) { grid-area: end; }
    .aml-grid-previsao > :nth-child(7) { grid-area: caret; align-self: center; }
    .aml-forecast-event { grid-template-columns: 48px minmax(0, 1fr) auto; }
    .aml-forecast-event > :nth-child(3), .aml-forecast-event > :nth-child(5) { display: none; }
    .aml-forecast-chart svg { height: 180px; }
}

.aml-field__optional { color: var(--aml-muted-2); font-weight: 400; }

/* ---------------------------------------------------------------------
   26. Card de saldo em destaque (Floresta)
   O "Saldo total" da visão geral é um card verde, com texto branco e um
   anel decorativo no canto.
   --------------------------------------------------------------------- */
.aml-card--hero { position: relative; overflow: hidden; border: none; border-radius: 20px; color: #FFFFFF;
    background: radial-gradient(420px 260px at 100% 0%, rgba(255, 255, 255, .28), transparent 65%), linear-gradient(160deg, var(--aml-forest-light) 0%, var(--aml-forest) 100%);
    box-shadow: 0 22px 44px -22px rgba(14, 77, 54, .55); }
.aml-card--hero::after { content: ''; position: absolute; right: -60px; bottom: -90px; width: 240px; height: 240px; border-radius: 50%; border: 38px solid rgba(255, 255, 255, .16); pointer-events: none; }
.aml-card--hero > * { position: relative; z-index: 1; }
.aml-card--hero .aml-card__head { border-bottom-color: rgba(255, 255, 255, .25); }
.aml-card--hero .aml-meta-label, .aml-card--hero .aml-stat__label { color: rgba(255, 255, 255, .82); }
.aml-card--hero .aml-stat__hint { color: rgba(255, 255, 255, .75); }
.aml-card--hero .aml-stat__value, .aml-card--hero .aml-stat__value.text-tone-brand, .aml-card--hero .aml-stat__value.text-tone-ink { color: #FFFFFF !important; }
.aml-card--hero .aml-stat--divided { border-left-color: rgba(255, 255, 255, .25); }
.aml-card--hero .aml-pill { color: #FFFFFF; background: rgba(255, 255, 255, .2); }
.aml-card--hero .aml-square-btn { background: rgba(255, 255, 255, .2); color: #FFFFFF !important; }
.aml-card--hero .aml-square-btn:hover { background: rgba(255, 255, 255, .3); }
.aml-card--hero .aml-trend { color: rgba(255, 255, 255, .82); }
.aml-card--hero .aml-trend__badge, .aml-card--hero .aml-trend.is-bad .aml-trend__badge { background: rgba(255, 255, 255, .25); }
.aml-card--hero .aml-trend__value, .aml-card--hero .aml-trend.is-bad .aml-trend__value { color: var(--aml-lime); font-weight: 600; }
.aml-card--hero .aml-select--pill .select2-selection--single,
.aml-card--hero .aml-select--pill select { background: rgba(255, 255, 255, .2); box-shadow: none; }
.aml-card--hero .aml-select--pill .select2-selection__rendered,
.aml-card--hero .aml-select--pill.is-changed .select2-selection__rendered { color: #FFFFFF; }
.aml-card--hero .aml-select__caret { color: #FFFFFF; }

/* ---------------------------------------------------------------------
   27. Confirmar pagamento e anexos
   Modal de pagamento (data, valor, diferença para o previsto, observação
   e anexos), lista de arquivos (modal e drawer) e marcas na tabela.
   --------------------------------------------------------------------- */
.aml-payment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .aml-payment-grid { grid-template-columns: 1fr; } }
.aml-payment-diff { margin-top: -4px; font-size: 12px; color: var(--aml-muted); }
.aml-payment-diff strong { color: var(--aml-ink-2); font-weight: 600; }
.aml-textarea { height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 10px; resize: vertical; line-height: 1.45; }

.aml-dropzone { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px dashed #D2D7DB; border-radius: 12px; background: var(--aml-field); color: var(--aml-ink-2); font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; margin: 0; }
.aml-dropzone:hover { border-color: var(--aml-brand); background: var(--aml-brand-soft); }
.aml-dropzone svg { flex-shrink: 0; color: var(--aml-brand); }
.aml-dropzone small { display: block; color: var(--aml-muted); font-size: 11px; margin-top: 2px; }

.aml-file-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.aml-file-list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #F7F8F9; font-size: 13px; }
.aml-file-list__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--aml-ink); }
.aml-file-list--links .aml-file-list__name { color: var(--aml-brand-2) !important; font-weight: 500; }
.aml-file-list--links .aml-file-list__name:hover { text-decoration: underline; }
.aml-file-list__size { flex-shrink: 0; font-size: 12px; color: var(--aml-muted); }
.aml-file-list__remove { flex-shrink: 0; width: 24px; height: 24px; border: none; border-radius: 50%; background: transparent; color: var(--aml-muted); font-size: 16px; line-height: 1; cursor: pointer; }
.aml-file-list__remove:hover { background: #FDECEC; color: var(--aml-expense); }

/* Tabela: clipe de anexo ao lado da descrição e diferença paga sob o valor */
.aml-cell-clip { display: inline-flex; flex-shrink: 0; color: var(--aml-muted); }
.aml-cell-value { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.aml-cell-value .aml-cell-sub { white-space: nowrap; }
/* Drawer: botão "Excluir ajuste" (ajustes só podem ser excluídos) */
.aml-drawer__delete-main { display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 22px; font-weight: 600; }
/* Drawer: o rótulo ("Pago em", "Valor previsto") não quebra; quem quebra é o valor, que costuma ser longo */
.aml-drawer__row-k { flex-shrink: 0; white-space: nowrap; }

/* ---------------------------------------------------------------------
   28. Tarefas (checklist, modal e seções da sidebar)
   --------------------------------------------------------------------- */

/* Sidebar: título de seção ("Finanças", "Tarefas") dentro da navegação */
.aml-nav-heading--group { margin-top: 16px; padding-bottom: 6px; }

/* Tela de tarefas: mesmo respiro entre cabeçalho e conteúdo das outras telas */
.aml-task-page .aml-page-head { margin-bottom: 20px; }

/* Contador do cabeçalho ("11 pendentes") */
.aml-task-count { align-self: flex-end; padding: 4px 9px; border-radius: 6px; background: var(--aml-brand-soft); color: var(--aml-brand-2); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* Barra "Adicionar tarefa…" */
.aml-task-add { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; margin-bottom: 20px; padding: 0 8px 0 16px; border: none; border-radius: 14px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(26, 26, 24, .07), 0 8px 20px -14px rgba(16, 40, 30, .25); text-align: left; cursor: text; }
.aml-task-add:hover { box-shadow: 0 0 0 1px rgba(31, 122, 85, .35), 0 8px 20px -14px rgba(16, 40, 30, .25); }
.aml-task-add__text { flex: 1; color: #9A9A94; font-size: 14px; }
.aml-task-add__chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 15px; background: #F4F4F2; color: #55554F; font-size: 12px; font-weight: 500; }

/* Lista agrupada */
.aml-task-list { padding: 6px 20px 10px; }
.aml-task-group__head { display: flex; align-items: center; gap: 8px; padding: 20px 0 8px; }
.aml-task-group:first-child .aml-task-group__head { padding-top: 14px; }
.aml-task-group__title { font-size: 13px; font-weight: 700; }
.aml-task-group__title.is-danger { color: #C93A3F; }
.aml-task-group__meta { font-size: 12px; color: #9A9A94; }
.aml-task-nores { padding: 18px 0 10px; color: var(--aml-muted); font-size: 13px; }

/* Uma tarefa: círculo, título/descrição (clicável) e vencimento */
.aml-task { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid #F3F3F1; }
.aml-task-check { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; padding: 0; border: 1.5px solid #C9CEC9; border-radius: 50%; background: #FFFFFF; color: transparent; transition: background .15s, border-color .15s, color .15s; }
.aml-task-check:hover { border-color: var(--aml-brand); color: rgba(31, 122, 85, .45); }
.aml-task-check--ghost { border-style: dashed; border-color: #B9BFBA; }
.aml-task.is-done .aml-task-check { border-color: var(--aml-brand); background: var(--aml-brand); color: #FFFFFF; }
.aml-task__body { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; padding: 0; border: none; background: none; color: inherit; text-align: left; cursor: pointer; }
.aml-task__title { font-size: 14px; font-weight: 500; color: var(--aml-ink); overflow-wrap: anywhere; }
.aml-task__body:hover .aml-task__title { color: var(--aml-brand); }
.aml-task__desc { overflow: hidden; font-size: 13px; color: #8A8A85; white-space: nowrap; text-overflow: ellipsis; }
.aml-task__due { flex-shrink: 0; margin-top: 2px; font-size: 12px; font-weight: 500; color: #8A8A85; white-space: nowrap; }
.aml-task__due.is-danger { color: #C93A3F; }
.aml-task.is-done .aml-task__title { color: #9A9A94; font-weight: 400; text-decoration: line-through; }
.aml-task.is-done .aml-task__desc,
.aml-task.is-done .aml-task__due { color: #B5B5AF; }

/* Estado vazio */
.aml-task-empty { padding: 34px 24px; text-align: center; }
.aml-task-empty__title { font-size: 15px; font-weight: 600; }
.aml-task-empty__text { margin-top: 6px; font-size: 13px; color: var(--aml-muted); }

/* Modal: rótulo com "Opcional" à direita e atalhos de vencimento */
.aml-field__row { display: flex; justify-content: space-between; gap: 8px; }
.aml-due-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.aml-due-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: none; border-radius: 17px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(26, 26, 24, .1); color: var(--aml-ink); font-size: 13px; font-weight: 500; }
.aml-due-chip [data-due-date] { font-size: 12px; font-weight: 400; color: #8A8A85; }
.aml-due-chip.is-active { background: var(--aml-brand-2); box-shadow: none; color: #FFFFFF; }
.aml-due-chip.is-active [data-due-date] { color: #B8F26B; }
.aml-btn-ghost--danger { border-color: #F3D4D5; color: #C93A3F; }
.aml-btn-ghost--danger:hover { background: #FDECEC; }

/* ---------------------------------------------------------------------
   29. Avisos (painel do sino e preferências)
   --------------------------------------------------------------------- */

.aml-alerts { position: relative; }
.aml-icon-btn__count { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid #FFFFFF; border-radius: 9px; background: #C93A3F; color: #FFFFFF; font-size: 10px; font-weight: 700; line-height: 13px; text-align: center; }
.aml-alerts__panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 1050; display: flex; flex-direction: column; width: 380px; max-width: calc(100vw - 24px); max-height: min(560px, calc(100vh - 90px)); border-radius: 18px; background: #FFFFFF; box-shadow: 0 30px 60px -24px rgba(16, 40, 30, .4), 0 0 0 1px rgba(16, 40, 30, .07); overflow: hidden; }
.aml-alerts__panel.d-none { display: none !important; }
.aml-alerts__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid #F1F2F1; }
.aml-alerts__title { font-size: 15px; font-weight: 700; }
.aml-alerts__read-all { padding: 0; border: none; background: none; color: var(--aml-brand); font-size: 12.5px; font-weight: 600; }
.aml-alerts__read-all:hover { text-decoration: underline; }
.aml-alerts__list { flex: 1; overflow-y: auto; padding: 6px; }
.aml-alerts__empty { padding: 28px 18px; color: var(--aml-muted); font-size: 13px; text-align: center; }
.aml-alerts__empty-title { margin-bottom: 4px; color: var(--aml-ink); font-size: 14px; font-weight: 600; }
.aml-alerts__foot { padding: 10px 18px 12px; border-top: 1px solid #F1F2F1; font-size: 12.5px; text-align: center; }
.aml-alerts__foot a { color: var(--aml-brand) !important; font-weight: 600; }

.aml-alert { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px 28px 10px 10px; border-radius: 12px; color: var(--aml-ink) !important; }
.aml-alert:hover { background: #F6F7F6; }
.aml-alert.is-unread { background: #F2F9F4; }
.aml-alert.is-unread:hover { background: #E8F5EC; }
.aml-alert__ico { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--aml-brand-soft); color: var(--aml-brand-2); }
.aml-alert__ico--danger { background: #FDECEC; color: #C93A3F; }
.aml-alert__ico--card { background: #E8F1FA; color: #2F6FB1; }
.aml-alert__ico--task { background: #EEF0FF; color: #5B5BD6; }
.aml-alert__ico--warning { background: #FDF3E1; color: #9A6210; }
.aml-alert__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.aml-alert__title { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.aml-alert:not(.is-unread) .aml-alert__title { font-weight: 500; }
.aml-alert__body { font-size: 12.5px; color: #6B6B66; line-height: 1.35; }
.aml-alert__when { margin-top: 2px; font-size: 11.5px; color: #9A9A94; }
.aml-alert__dot { position: absolute; top: 16px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--aml-brand); }

/* Perfil › Notificações: tabela tipo × canal e horário */
.aml-notify { display: flex; flex-direction: column; margin-top: 16px; }
.aml-notify__row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #F1F2F1; }
.aml-notify__row--head { padding-top: 0; border-top: none; font-size: 12px; color: var(--aml-muted); }
.aml-notify__row--head span:not(:first-child) { text-align: center; }
.aml-notify__label { font-size: 14px; font-weight: 500; }
.aml-notify__hint { font-size: 12.5px; color: var(--aml-muted); }
.aml-notify__cell { display: flex; justify-content: center; }
.aml-check-switch { position: relative; width: 38px; height: 22px; margin: 0; border-radius: 11px; background: #E3E2EA; appearance: none; -webkit-appearance: none; cursor: pointer; transition: background .18s; }
.aml-check-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(20, 20, 40, .25); transition: left .18s; }
.aml-check-switch:checked { background: var(--aml-brand); }
.aml-check-switch:checked::after { left: 19px; }
.aml-check-switch:focus-visible { outline: 2px solid var(--aml-brand); outline-offset: 2px; }
.aml-notify__hour { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; margin-top: 4px; border-top: 1px solid #F1F2F1; }
.aml-notify__hour .aml-select { width: 140px; }

@media (max-width: 767.98px) {
    .aml-alerts__panel { position: fixed; top: 64px; right: 12px; left: 12px; width: auto; max-width: none; }
}

/* ---------------------------------------------------------------------
   30. Lista de cartões e campos do cartão
   --------------------------------------------------------------------- */

/* Resumo do topo (card verde): faturas abertas | limite disponível | próximo vencimento */
.aml-cards-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 20px 22px; }
.aml-cards-summary__item { padding-right: 20px; }
.aml-cards-summary__item--divided { padding: 0 20px; border-left: 1px solid rgba(255, 255, 255, .25); }
.aml-cards-summary__label { font-size: 13px; color: rgba(255, 255, 255, .82); }
.aml-cards-summary__value { margin-top: 14px; font-size: 20px; font-weight: 500; }
.aml-cards-summary__value--xl { margin-top: 10px; font-size: 30px; letter-spacing: -.025em; }
.aml-cards-summary__bar { height: 6px; margin-top: 10px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.aml-cards-summary__bar > div { height: 6px; border-radius: 3px; background: #B8F26B; }
.aml-cards-summary__hint { margin-top: 6px; font-size: 12px; color: rgba(255, 255, 255, .75); }

/* Lista: cartão | fatura atual | vencimento | limite | seta */
.aml-cards-list { padding: 6px 22px 4px; }
.aml-cards-list__row { display: grid; grid-template-columns: minmax(0, 1fr) 170px 120px 220px 16px; gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid #F3F3F1; color: var(--aml-ink) !important; }
.aml-cards-list__row:last-child { border-bottom: none; }
.aml-cards-list__row:not(.aml-cards-list__row--head):hover .aml-cards-list__name { color: var(--aml-brand); }
.aml-cards-list__row--head { padding: 12px 0; border-bottom-color: #EFEFED; font-size: 12px; color: var(--aml-muted) !important; }
.aml-cards-list__row.is-dim { opacity: .55; }
.aml-cards-list__card { display: flex; align-items: center; gap: 14px; min-width: 0; }
.aml-cards-list__name { display: block; font-weight: 600; }
.aml-cards-list__sub { display: block; margin-top: 2px; font-size: 12px; color: var(--aml-muted); }
.aml-cards-list__statement { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.aml-cards-list__amount { font-weight: 600; }
.aml-cards-list__due { display: block; font-weight: 500; }
.aml-cards-list__limit { display: flex; flex-direction: column; gap: 6px; }
.aml-cards-list__track { height: 6px; border-radius: 3px; background: #EFF0EE; overflow: hidden; }
.aml-cards-list__track > span { display: block; height: 6px; border-radius: 3px; }
.aml-cards-list__limit-text { display: flex; justify-content: space-between; font-size: 12px; color: #55554F; font-weight: 500; }
.aml-cards-list__limit-text .is-danger { color: #C93A3F; }
.aml-cards-list__pct { color: #9A9A94; font-weight: 400; }

/* Mini cartão: degradê na cor do cartão e a bandeira no canto */
.aml-mini-card { position: relative; flex-shrink: 0; width: 56px; height: 35px; border-radius: 7px; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, 0) 62%), radial-gradient(220px 160px at 100% 0%, rgba(255, 255, 255, .22), transparent 65%), linear-gradient(150deg, var(--c) 0%, var(--c2) 100%); box-shadow: 0 6px 12px -8px rgba(16, 24, 20, .55), inset 0 0 0 1px rgba(255, 255, 255, .08); color: #FFFFFF; overflow: hidden; }
/* Chip dourado, final do número e bandeira (ou aproximação) */
.aml-mini-card__chip { position: absolute; top: 7px; left: 6px; width: 10px; height: 8px; border-radius: 2px; background: linear-gradient(135deg, #F6E3A1 0%, #D6B25E 55%, #B8913B 100%); box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); }
.aml-mini-card__chip::after { content: ""; position: absolute; top: 3.5px; left: 0; right: 0; height: 1px; background: rgba(0, 0, 0, .14); }
/* Letras miúdas via scale: o navegador pode ter tamanho mínimo de fonte e ignorar font-size abaixo dele */
.aml-mini-card__digits { position: absolute; bottom: 5px; left: 6px; font-size: 8px; font-weight: 600; letter-spacing: .06em; line-height: 1; color: rgba(255, 255, 255, .85); white-space: nowrap; transform: scale(.55); transform-origin: left bottom; }
.aml-mini-card__mark { position: absolute; right: 5px; bottom: 4px; }
.aml-mini-card__brand { font-size: 8px; font-weight: 700; font-style: italic; letter-spacing: .02em; line-height: 1; white-space: nowrap; transform: scale(.6); transform-origin: right bottom; }

/* Selo da fatura na lista */
.aml-chip-status { padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.aml-chip-status.is-open { background: #E8F5EC; color: #0E4D36; }
.aml-chip-status.is-closed { background: #FCF1DE; color: #8A5A0B; }
.aml-chip-status.is-overdue { background: #FDECEC; color: #C93A3F; }
.aml-chip-status.is-neutral { background: #F1F1EF; color: #6B6B66; }

/* Botão secundário compacto ("Alterar" nas faturas iniciais) */
.aml-btn-ghost--sm { height: 30px; padding: 0 12px; font-size: 12.5px; font-weight: 500; }

/* "← Todos os cartões" acima do título do detalhe */
.aml-back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--aml-muted) !important; font-size: 13px; font-weight: 500; }
.aml-back-link:hover { color: var(--aml-brand) !important; }

@media (max-width: 991.98px) {
    .aml-cards-summary { grid-template-columns: 1fr; gap: 16px; }
    .aml-cards-summary__item--divided { padding: 16px 0 0; border-left: none; border-top: 1px solid rgba(255, 255, 255, .25); }
    .aml-cards-list__row { grid-template-columns: minmax(0, 1fr) auto 12px; grid-template-areas: "card statement arrow" "limit limit limit"; row-gap: 10px; }
    .aml-cards-list__row > :nth-child(1) { grid-area: card; }
    .aml-cards-list__row > :nth-child(2) { grid-area: statement; align-items: flex-end; }
    .aml-cards-list__row > :nth-child(3) { display: none; }
    .aml-cards-list__row > :nth-child(4) { grid-area: limit; }
    .aml-cards-list__row > :nth-child(5) { grid-area: arrow; }
    .aml-cards-list__row--head { display: none; }
}

/* Campos lado a lado no modal de cartão não passam da coluna (o prefixo "••••" empurrava a largura) */
.aml-card-fields .aml-form-grid > .aml-field { min-width: 0; }
.aml-card-fields .aml-input--prefix input { min-width: 0; width: 100%; }

/* Cartão novo: "Comece com as faturas que já existem" */
.aml-card-start { border: 1px solid #D9EBDF; background: linear-gradient(180deg, #F3FAF5 0%, #FFFFFF 70%); }
.aml-card-start__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.aml-card-start__title { font-size: 16px; font-weight: 700; }
.aml-card-start__text { margin-top: 4px; font-size: 13px; color: var(--aml-muted); }
.aml-card-start__dismiss { flex-shrink: 0; padding: 0; border: none; background: none; color: var(--aml-muted); font-size: 12.5px; font-weight: 500; }
.aml-card-start__dismiss:hover { color: var(--aml-ink); text-decoration: underline; }
.aml-card-start__row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #EEF1EF; }
.aml-card-start__row > .min-w-0 { flex: 1; }
.aml-card-start__done { color: var(--aml-brand-2); font-size: 13px; font-weight: 600; white-space: nowrap; }