/* =============================================================================
   TEMA — arquivo-base da identidade visual do Klini Financeiro
   =============================================================================
   FONTE DA VERDADE do estilo (guia: docs/identidade-visual.md).
   Paleta azul/navy em HSL (canônico) + Inter, mapeada para os tokens do
   Bootstrap 5.3 — telas herdam o tema SEM CSS próprio.
   REGRA DE OURO: sempre via tokens/classes daqui; nunca hex solto em template.
   Carregado DEPOIS de bootstrap.css e app.css (sobrescreve os dois).
   ========================================================================== */

:root {
    /* ---- tokens canônicos (HSL) ---- */
    --tema-bg: hsl(210 40% 98%);
    --tema-surface: hsl(0 0% 100%);
    --tema-surface-2: hsl(205 45% 94%);
    --tema-ink: hsl(213 40% 18%);
    --tema-ink-soft: hsl(212 16% 46%);
    --tema-brand: hsl(200 78% 52%);
    --tema-brand-escuro: hsl(200 78% 47%);
    --tema-brand-ink: hsl(205 65% 32%);
    --tema-line: hsl(210 28% 88%);
    --tema-accent-bg: hsl(200 72% 93%);
    --tema-navy: hsl(213 40% 14%);
    --tema-navy-hover: hsl(213 34% 21%);
    --tema-radius: 0.9rem;
    --tema-shadow-card: 0 2px 12px -4px hsl(213 35% 40% / 0.10);
    --tema-shadow-soft: 0 6px 24px -8px hsl(213 35% 40% / 0.18);
    --tema-shadow-glow: 0 12px 32px -10px hsl(200 78% 52% / 0.55), inset 0 1px 0 hsl(0 0% 100% / 0.35);

    /* ---- mapeamento Bootstrap 5.3 ---- */
    --bs-body-bg: var(--tema-bg);
    --bs-body-color: var(--tema-ink);
    --bs-secondary-color: var(--tema-ink-soft);
    --bs-border-color: var(--tema-line);
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: var(--tema-radius);
    --bs-link-color-rgb: 28, 94, 137;
    --bs-link-hover-color-rgb: 37, 164, 228;
    --bs-primary: var(--tema-brand);
    --bs-primary-rgb: 37, 164, 228;

    /* ---- compat: a marca antiga (.klini-*) passa a apontar para o tema ---- */
    --klini-sidebar-bg: var(--tema-navy);
    --klini-sidebar-hover: var(--tema-navy-hover);
    --klini-brand: var(--tema-brand);
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--tema-ink);
}

/* ---- logomarca (/img/logo-klini.svg: barras de crescimento + moeda) ---- */
.klini-logo {
    display: block;
    flex-shrink: 0;
}

.klini-login-card .klini-logo {
    filter: drop-shadow(0 10px 22px hsl(200 78% 52% / 0.45));
}

/* sidebar do portal colapsado: só a logo, centralizada no trilho */
.klini-sidebar-colapsada .klini-brand {
    justify-content: center;
}

/* fundo geral com a “aurora” sutil da marca */
.klini-shell {
    background:
        radial-gradient(900px 480px at 100% -15%, hsl(200 80% 92% / 0.35), transparent 60%),
        radial-gradient(820px 480px at -10% 115%, hsl(210 65% 92% / 0.30), transparent 55%),
        var(--tema-bg);
}

/* ---- superfícies ---- */
.card {
    border-color: var(--tema-line);
    border-radius: 1rem;
    box-shadow: var(--tema-shadow-card);
}

.modal-content {
    border-radius: var(--tema-radius);
    border-color: var(--tema-line);
    box-shadow: var(--tema-shadow-soft);
}

.offcanvas {
    border-color: var(--tema-line);
}

/* larguras fixas de offcanvas nunca estouram o dispositivo */
.offcanvas.offcanvas-end {
    max-width: 100vw;
}

.table> :not(caption)>*>* {
    border-bottom-color: hsl(210 28% 92%);
}

.table-light {
    --bs-table-bg: var(--tema-surface-2);
}

.form-control,
.form-select {
    border-radius: 0.6rem;
    border-color: hsl(210 28% 84%);
    color: var(--tema-ink);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--tema-brand);
    box-shadow: 0 0 0 0.25rem hsl(200 78% 52% / 0.18);
}

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

/* ---- botões (movimento contido: 200ms ease-out, active 0.98) ---- */
.btn {
    font-weight: 600;
    border-radius: 0.75rem;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out,
        background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.btn:active {
    transform: scale(0.98);
}

.btn:focus-visible {
    outline: 2px solid var(--tema-brand);
    outline-offset: 2px;
}

.btn-primary {
    --bs-btn-bg: var(--tema-brand);
    --bs-btn-border-color: var(--tema-brand);
    --bs-btn-hover-bg: var(--tema-brand-escuro);
    --bs-btn-hover-border-color: var(--tema-brand-escuro);
    --bs-btn-active-bg: var(--tema-brand-escuro);
    --bs-btn-active-border-color: var(--tema-brand-escuro);
    --bs-btn-disabled-bg: var(--tema-brand);
    --bs-btn-disabled-border-color: var(--tema-brand);
    box-shadow: var(--tema-shadow-glow);
}

.btn-outline-primary {
    --bs-btn-color: var(--tema-brand-ink);
    --bs-btn-border-color: var(--tema-line);
    --bs-btn-hover-color: var(--tema-brand-ink);
    --bs-btn-hover-bg: var(--tema-surface-2);
    --bs-btn-hover-border-color: var(--tema-line);
    --bs-btn-active-bg: var(--tema-accent-bg);
    --bs-btn-active-border-color: var(--tema-line);
    --bs-btn-active-color: var(--tema-brand-ink);
}

.btn-outline-secondary {
    --bs-btn-color: var(--tema-ink-soft);
    --bs-btn-border-color: var(--tema-line);
    --bs-btn-hover-color: var(--tema-ink);
    --bs-btn-hover-bg: var(--tema-surface-2);
    --bs-btn-hover-border-color: var(--tema-line);
}

/* azul utilitário = azul da marca (valores/números continuam legíveis) */
.text-primary {
    color: var(--tema-brand) !important;
}

.badge.text-bg-primary {
    background-color: var(--tema-brand) !important;
}

a {
    text-underline-offset: 2px;
}

/* nav-pills (abas da conciliação etc.) */
.nav-pills .nav-link {
    border-radius: 0.6rem;
    color: var(--tema-ink-soft);
    font-weight: 600;
}

.nav-pills .nav-link.active {
    background-color: var(--tema-brand);
}

/* nav-tabs (abas do plano de contas, do lançamento, da ficha da empresa):
   a ativa se destaca por um filete superior no azul da marca — mesma
   linguagem das pills, sem preencher a aba inteira de cor. */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--tema-line);
    border-bottom-color: var(--tema-line);
}

.nav-tabs .nav-link {
    color: var(--tema-ink-soft);
    font-weight: 600;
    border-top: 2px solid transparent;
    border-radius: 0;
}

.nav-tabs .nav-link:hover:not(.active) {
    background-color: var(--tema-surface-2);
    border-color: transparent transparent var(--tema-line);
    border-top-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--tema-brand-ink);
    background-color: var(--tema-surface);
    border-top-color: var(--tema-brand);
}

/* dropdowns e tooltips do fluxo já usam tons próprios; arredonda e sombreia */
.dropdown-menu {
    border-color: var(--tema-line);
    border-radius: 0.75rem;
    box-shadow: var(--tema-shadow-soft);
}

/* ---- login: aurora + pontilhado + cartão translúcido ---- */
.klini-login-bg {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 480px at 100% -15%, hsl(200 80% 92% / 0.55), transparent 60%),
        radial-gradient(820px 480px at -10% 115%, hsl(210 65% 92% / 0.50), transparent 55%),
        var(--tema-bg) !important;
}

.klini-login-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image: radial-gradient(hsl(200 40% 60% / 0.14) 1px, transparent 1.4px);
    background-size: 22px 22px;
}

.klini-login-card {
    position: relative;
    border: 1px solid var(--tema-line);
    border-radius: 1.75rem;
    background: hsl(0 0% 100% / 0.85);
    backdrop-filter: blur(8px);
    box-shadow: var(--tema-shadow-soft);
}

.klini-login-bg .klini-text-brand {
    color: var(--tema-brand);
}

/* ---- sidebar e topbar presos: SÓ o miolo (conteúdo) rola ----
   dvh (com fallback vh): no celular a barra do navegador entra e sai da
   viewport — 100vh fixo deixaria o rodapé cortado no iOS/Android. */
.klini-shell {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.klini-main {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

.klini-sidebar-fixa {
    height: 100vh;
    height: 100dvh;
    align-self: flex-start;
}

.klini-sidebar-fixa .klini-rail,
.klini-sidebar-fixa .klini-submenu,
.klini-sidebar.klini-sidebar-fixa {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
}

.klini-main>.klini-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* ---- sidebar: acabamento moderno ----
   Só forma, ritmo e movimento — mesma paleta (navy/navy-hover/brand) e
   mesma fonte. Item ativo ganha filete da marca à esquerda; ícones com
   largura fixa alinham os rótulos; transições curtas no hover. */
.klini-sidebar,
.klini-rail,
.klini-submenu {
    scrollbar-width: thin;
    scrollbar-color: hsl(0 0% 100% / 0.15) transparent;
}

.klini-sidebar::-webkit-scrollbar,
.klini-rail::-webkit-scrollbar,
.klini-submenu::-webkit-scrollbar {
    width: 6px;
}

.klini-sidebar::-webkit-scrollbar-thumb,
.klini-rail::-webkit-scrollbar-thumb,
.klini-submenu::-webkit-scrollbar-thumb {
    background: hsl(0 0% 100% / 0.15);
    border-radius: 3px;
}

/* logomarca do portal separada do menu por um filete discreto */
.klini-sidebar .klini-brand {
    transition: opacity .15s ease;
}

.klini-sidebar .klini-brand:hover {
    opacity: .9;
}

.klini-sidebar .klini-versao {
    padding-bottom: .9rem !important;
    border-bottom: 1px solid hsl(0 0% 100% / 0.08);
}

/* trilho e submenu: divisória sutil entre os dois níveis */
.klini-submenu {
    border-left: 1px solid hsl(0 0% 100% / 0.06);
}

.klini-rail hr {
    border-color: hsl(0 0% 100% / 0.12) !important;
    opacity: 1;
    margin: .5rem .9rem !important;
}

.klini-submenu .klini-submenu-titulo {
    padding: 1.25rem 1.25rem .75rem;
    letter-spacing: .01em;
}

/* cabeçalhos de seção: caixa alta mais respirada */
.klini-nav-section,
.klini-nav-section-toggle {
    font-weight: 600;
    letter-spacing: .09em;
    color: hsl(0 0% 100% / 0.45);
}

.klini-nav-section {
    display: block;
    margin-top: 1rem;
    margin-bottom: .35rem;
}

.klini-nav-section-toggle {
    margin-top: 1rem;
    transition: background-color .15s ease, color .15s ease;
}

.klini-nav-section-toggle i {
    opacity: .7;
}

/* links do menu */
.klini-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    margin: 2px 0;
    border-radius: .6rem;
    transition: background-color .15s ease, color .15s ease;
}

.klini-nav-link > i {
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    opacity: .75;
    transition: opacity .15s ease, color .15s ease;
}

.klini-nav-link:hover > i,
.klini-nav-link.active > i {
    opacity: 1;
}

.klini-nav-link.active > i {
    color: var(--tema-brand);
}

.klini-nav-link.active {
    box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.05);
}

.klini-nav-link.active::before {
    content: "";
    position: absolute;
    left: -.5rem;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--tema-brand);
}

/* subitens de grupo (Relatórios, Cadastros…) levemente recuados */
.klini-nav-grupo .klini-nav-link {
    padding-left: 1rem;
}

/* trilho de módulos: botões quadrados com filete no ativo */
.klini-rail .klini-rail-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    margin: .3rem auto;
    border-radius: .75rem;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.klini-rail .klini-rail-link:hover {
    transform: translateY(-1px);
}

.klini-rail .klini-rail-link.active {
    color: var(--tema-brand);
}

.klini-rail .klini-rail-link.active::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 25%;
    bottom: 25%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--tema-brand);
}

/* foco por teclado visível sobre o navy */
.klini-nav-link:focus-visible,
.klini-rail-link:focus-visible,
.klini-nav-section-toggle:focus-visible,
.klini-brand:focus-visible {
    outline: 2px solid var(--tema-brand);
    outline-offset: 2px;
}

/* botão de recolher: flutua com sombra mais macia */
.klini-colapsar {
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.klini-colapsar:hover {
    box-shadow: var(--tema-shadow-soft);
    transform: translateX(-50%) scale(1.06);
}

/* portal colapsado: ícones centralizados, filete continua na borda */
@media (min-width: 992px) {
    .klini-sidebar-colapsada .klini-nav-link {
        justify-content: center;
    }

    .klini-sidebar-colapsada .klini-versao {
        border-bottom: 0;
    }

    /* ---- espiar: recolhida + mouse em cima = desliza aberta POR CIMA do
       conteúdo (ver /js/klini-sidebar.js). A margem negativa anda junto com
       a largura, então o espaço ocupado no layout fica constante. ---- */
    .klini-menu-offcanvas {
        transition: margin-right .2s ease, box-shadow .2s ease;
    }

    .klini-sidebar.klini-menu-offcanvas {
        transition: width .2s ease, margin-right .2s ease, box-shadow .2s ease;
    }

    .klini-sidebar-colapsada {
        overflow-x: hidden;
    }

    /* só no portal, cuja largura anima com os rótulos visíveis; no submenu os
       nomes longos ("Importação de movimentação") precisam quebrar linha */
    .klini-sidebar-colapsada.klini-sidebar .klini-brand,
    .klini-sidebar-colapsada.klini-sidebar .klini-nav-link {
        white-space: nowrap;
    }

    /* o submenu mantém a largura cheia por dentro: o slide revela, não refaz a quebra das linhas */
    .klini-sidebar-colapsada .klini-submenu > * {
        min-width: 230px;
        max-width: 230px;
    }

    .klini-sidebar-espiando {
        z-index: 1040;
        box-shadow: 10px 0 30px -10px hsl(213 40% 14% / 0.45);
    }

    /* portal: 60px → 240px */
    .klini-sidebar-colapsada.klini-sidebar-espiando.klini-sidebar {
        width: 240px !important;
        margin-right: -180px;
    }

    .klini-sidebar-colapsada.klini-sidebar-espiando .klini-brand {
        justify-content: flex-start;
    }

    .klini-sidebar-colapsada.klini-sidebar-espiando .klini-brand span,
    .klini-sidebar-colapsada.klini-sidebar-espiando .klini-nav-link span {
        display: inline;
    }

    .klini-sidebar-colapsada.klini-sidebar-espiando .klini-nav-section {
        display: block;
    }

    .klini-sidebar-colapsada.klini-sidebar-espiando .klini-nav-section-toggle {
        display: flex;
    }

    .klini-sidebar-colapsada.klini-sidebar-espiando .klini-nav-link {
        justify-content: flex-start;
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .klini-sidebar-colapsada.klini-sidebar-espiando .klini-nav-link i {
        margin-right: .5rem !important;
    }

    .klini-sidebar-colapsada.klini-sidebar-espiando.klini-sidebar .klini-versao {
        padding-left: calc(1rem + 30px + .5rem) !important;
        text-align: left;
        border-bottom: 1px solid hsl(0 0% 100% / 0.08);
    }

    /* empresa/grupo: o submenu (230px) desliza para fora do trilho */
    .klini-sidebar-colapsada.klini-sidebar-espiando:not(.klini-sidebar) {
        margin-right: -230px;
    }

    .klini-sidebar-colapsada.klini-sidebar-espiando .klini-submenu {
        width: 230px;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .klini-nav-link,
    .klini-rail-link,
    .klini-colapsar,
    .klini-nav-section-toggle {
        transition: none !important;
    }

    .klini-rail .klini-rail-link:hover {
        transform: none;
    }
}

/* =====================================================================
   PADRÃO DE LISTAS (modelo da tela de Plano de Contas) — vale p/ TODO o
   sistema: cabeçalhos discretos em caixa alta, linhas respiradas, chips
   de código, linhas-grupo, filetes de acento e ações sempre visíveis.
   ===================================================================== */

/* cabeçalhos de tabela modernos, em todas as tabelas */
.table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--tema-ink-soft);
    border-bottom-width: 1px;
}

.table>tbody>tr>td {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

/* ações de linha: sempre visíveis, cantos arredondados */
.table .btn-sm {
    border-radius: 0.7rem;
}

/* chip de código/identificador (monoespaçado) */
.chip-codigo,
.pc-cod {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.78rem;
    color: var(--tema-ink-soft);
    background: var(--tema-surface);
    border: 1px solid var(--tema-line);
    border-radius: 0.4rem;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

/* linha-grupo (agrupadora): fundo suave + nome em negrito */
.linha-grupo,
.pc-sintetica {
    background: var(--tema-surface-2);
}

.linha-grupo .pc-nome,
.pc-sintetica .pc-nome,
.linha-grupo>td:first-child {
    font-weight: 600;
}

.linha-grupo .chip-codigo,
.pc-sintetica .pc-cod {
    background: transparent;
}

/* badge suave (classificações neutras — não estados financeiros) */
.badge-suave,
.pc-badge-sintetica {
    background: var(--tema-accent-bg);
    color: var(--tema-brand-ink);
    font-weight: 600;
}

/* filetes de acento semântico na borda esquerda da linha (tabela ou cartão) */
.pc-linha td:first-child {
    box-shadow: inset 3px 0 0 transparent;
}

.acento-positivo td:first-child,
td.acento-positivo,
.pc-receita td:first-child,
.list-group-item.acento-positivo {
    box-shadow: inset 3px 0 0 hsl(152 55% 45%);
}

.acento-negativo td:first-child,
td.acento-negativo,
.pc-despesa td:first-child,
.list-group-item.acento-negativo {
    box-shadow: inset 3px 0 0 hsl(0 70% 58%);
}

/* árvore expansível em tabela (linhas planas + data-id/data-pai no template):
   só o nível 0 nasce visível; o chevron gira ao expandir. Genérico — serve
   para qualquer hierarquia listada (referência: planocontas/arvore.html). */
.arvore-toggle>td:first-child {
    cursor: pointer;
    user-select: none;
}

.arvore-chevron {
    color: var(--tema-ink-soft);
    transition: transform 0.2s ease-out;
}

.arvore-expandida>td:first-child .arvore-chevron {
    transform: rotate(90deg);
}

.arvore-chevron-vazio {
    display: inline-block;
    width: 1em;
}

/* alinha folhas com as mães */
.arvore-oculta {
    display: none;
}

/* coluna fixa (sticky): mantém a 1ª coluna (referência de leitura, ex.: item/
   produto) visível durante o scroll horizontal em tabelas largas com muitas
   colunas dinâmicas — usar dentro de .table-responsive */
.tabela-primeira-coluna-fixa th:first-child,
.tabela-primeira-coluna-fixa td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--tema-surface);
}

/* linhas destacadas (totalizadores/grupos) mantêm o próprio fundo na coluna fixa */
.tabela-primeira-coluna-fixa tr.table-light>th:first-child,
.tabela-primeira-coluna-fixa tr.table-light>td:first-child,
.tabela-primeira-coluna-fixa tr.linha-grupo>td:first-child {
    background-color: var(--tema-surface-2);
}

/* ---- responsividade (qualquer dispositivo) ----
   Navegação: o <aside> dos 3 layouts é um offcanvas responsivo do Bootstrap
   (offcanvas-lg + id="menuLateral") — estático no fluxo ≥992px e painel
   deslizante com backdrop <992px, aberto pelo hambúrguer da topbar. */
.klini-menu-offcanvas {
    --bs-offcanvas-width: 290px;
    /* trilho 60px + submenu 230px */
    --bs-offcanvas-bg: var(--tema-navy);
}

.klini-sidebar.klini-menu-offcanvas {
    --bs-offcanvas-width: 240px;
}

@media (min-width: 992px) {

    /* o Bootstrap zera o fundo do offcanvas-lg no desktop; o portal pinta o
       navy no próprio aside (empresa/grupo pintam nos filhos rail/submenu) */
    .klini-sidebar.klini-menu-offcanvas {
        background-color: var(--klini-sidebar-bg) !important;
    }

    .klini-menu-offcanvas {
        position: relative;
    }
}

@media (max-width: 991.98px) {

    /* colapso da sidebar é conceito de desktop */
    .klini-colapsar {
        display: none;
    }

    /* offcanvas em altura total (o align-self:flex-start do desktop impediria
       o esticamento top/bottom do painel fixo); filhos esticam pelo flex */
    .klini-sidebar-fixa,
    .klini-sidebar.klini-sidebar-fixa {
        height: 100vh;
        height: 100dvh;
        align-self: auto;
    }

    .klini-sidebar-fixa .klini-rail,
    .klini-sidebar-fixa .klini-submenu {
        height: auto;
    }

    .klini-content {
        padding: 1rem !important;
    }

    .klini-totais {
        flex-wrap: wrap;
    }

    .klini-totais>* {
        flex: 1 1 45%;
        border-left: 0;
        border-top: 1px solid var(--tema-line);
    }
}

/* topbar compacta: o nome da empresa ativa trunca em vez de estourar */
.klini-switcher-nome {
    display: inline-block;
    max-width: 42vw;
}

@media (min-width: 768px) {
    .klini-switcher-nome {
        max-width: 280px;
    }
}

.klini-switcher-menu {
    min-width: min(260px, calc(100vw - 2rem));
}

@media (max-width: 767.98px) {

    /* iOS dá zoom automático ao focar input com fonte <16px; o padrão -sm tem 14px */
    .form-control-sm,
    .form-select-sm,
    .input-group-sm>.form-control,
    .input-group-sm>.form-select {
        font-size: 1rem;
    }

    /* alvo de toque confortável nas ações de linha */
    .table .btn-sm {
        min-width: 2.25rem;
        min-height: 2.25rem;
    }
}

@media (max-width: 575.98px) {
    .klini-content {
        padding: 0.75rem !important;
    }

    /* rede de segurança: filtros antigos com largura fixa inline nunca estouram
       (padrão proibido daqui em diante — usar .klini-campo-busca/-select) */
    .card .card-body .input-group[style*="width"],
    .card .card-body select.form-select[style*="width"],
    .card .card-body input.form-control[style*="width"] {
        width: 100% !important;
    }
}

@media (pointer: coarse) {

    .klini-nav-link,
    .klini-rail-link,
    .dropdown-item {
        padding-top: .55rem;
        padding-bottom: .55rem;
    }
}

/* campos de barra de filtro: largura natural no desktop, 100% no celular
   (substituem os style="width: NNNpx" das telas antigas) */
.klini-campo-busca {
    width: 100%;
}

.klini-campo-select {
    width: 100%;
}

@media (min-width: 576px) {
    .klini-campo-busca {
        width: 280px;
    }

    .klini-campo-select {
        width: 160px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* ===== Combobox com busca (klini-combobox) ===== */

.klini-combobox {
    position: relative;
}

.klini-combobox-campo {
    padding-right: 3.4rem;
    cursor: text;
    text-overflow: ellipsis;
}

.klini-combobox-limpar {
    position: absolute;
    right: 1.9rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--tema-brand);
    padding: 0 .25rem;
    line-height: 1;
}

.klini-combobox-limpar:hover {
    color: var(--tema-brand-escuro);
}

.klini-combobox-menu {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    z-index: 1060;
    background: var(--tema-surface);
    border: 1px solid var(--tema-line);
    border-radius: .6rem;
    box-shadow: var(--tema-shadow-card);
    max-height: 320px;
    overflow-y: auto;
    padding: .35rem 0;
}

.klini-combobox-item {
    padding: .55rem 1rem;
    cursor: pointer;
}

.klini-combobox-item:hover,
.klini-combobox-item.ativa {
    background: var(--tema-accent-bg);
}

.klini-combobox-vazio {
    padding: .55rem 1rem;
    color: var(--tema-ink-soft);
}

/* rodapé "+ Novo" (data-combobox-novo): fixo no fim do menu rolável */
.klini-combobox-novo {
    position: sticky;
    bottom: -.35rem;
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: .35rem;
    padding: .65rem 1rem;
    border: 0;
    border-top: 1px solid var(--tema-line);
    background: var(--tema-surface);
    color: var(--tema-brand-ink);
    font-weight: 600;
    text-align: left;
}

.klini-combobox-novo:hover,
.klini-combobox-novo:focus-visible {
    background: var(--tema-accent-bg);
}

/* drawer de cadastro rápido de contato (fragments/painel-novo-contato) */
.painel-novo-contato {
    --bs-offcanvas-width: 560px;
    max-width: 100%;
}

/* ===== RELATÓRIOS DE GRUPO (consolidação de lojas) ===== */

.grp-col-rotulo {
    min-width: 220px;
}

.grp-col-loja {
    min-width: 130px;
}

.grp-col-total {
    min-width: 140px;
    background: var(--tema-surface-2);
    font-weight: 600;
}

.grp-seletor-lojas .dropdown-menu {
    min-width: 300px;
}

.grp-lista-lojas {
    max-height: 280px;
    overflow-y: auto;
}

.grp-lista-lojas .form-check {
    padding: 0.3rem 0 0.3rem 1.6rem;
}

.grp-loja-inelegivel {
    opacity: 0.55;
}

.grp-loja-inelegivel .form-check-label {
    cursor: not-allowed;
}

/* =============================================================================
   GRÁFICOS DO PAINEL
   =============================================================================
   Par divergente entrada × saída + neutro para o saldo. Validado com o método
   das seis checagens (ΔE euclidiano em OKLab ×100, simulação Machado 2009):
     entrada × saída → normal 29,8 | protan 17,9 | deutan 11,4 | tritan 35,4
                       min(p,d) 11,4 (alvo 8,0) · contraste 3,37 e 4,43 no branco
   O saldo NÃO é uma terceira matiz: é o neutro de tinta, como manda a regra
   divergente (duas matizes + neutro). Não trocar nenhuma das três sem revalidar.
   ========================================================================== */
:root {
    --tema-fluxo-entrada: hsl(168 62% 38%);
    --tema-fluxo-saida: hsl(5 72% 52%);
    --tema-fluxo-saldo: var(--tema-ink);
    --tema-fluxo-grade: var(--tema-line);
    --tema-rank-barra: hsl(200 78% 42%);
    --tema-rank-trilho: hsl(205 45% 94%);
}

/* ---- números de destaque (KPI) ---- */
.klini-kpi-valor {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.klini-kpi-rotulo {
    font-size: 0.8125rem;
    color: var(--tema-ink-soft);
}

.klini-kpi-sub {
    font-size: 0.9375rem;
    font-weight: 600;
}

.klini-kpi-divisor {
    border-left: 1px solid var(--tema-line);
}

@media (max-width: 575.98px) {
    .klini-kpi-divisor {
        border-left: 0;
    }
}

/* ---- gráfico de fluxo (SVG servido pronto pelo controller) ---- */
.klini-grafico {
    position: relative;
}

.klini-fluxo-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.klini-fluxo-area {
    fill: var(--tema-fluxo-saldo);
    opacity: 0.07;
}

.klini-fluxo-linha {
    fill: none;
    stroke: var(--tema-fluxo-saldo);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.klini-fluxo-zero {
    stroke: var(--tema-fluxo-grade);
    stroke-width: 1;
}

.klini-fluxo-entrada {
    fill: var(--tema-fluxo-entrada);
}

.klini-fluxo-saida {
    fill: var(--tema-fluxo-saida);
}

.klini-fluxo-rotulo {
    fill: var(--tema-ink-soft);
    font-size: 11px;
}

.klini-fluxo-hit {
    fill: transparent;
    cursor: crosshair;
}

.klini-fluxo-hit:hover~.klini-fluxo-cursor {
    opacity: 1;
}

.klini-fluxo-cursor {
    stroke: var(--tema-ink-soft);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0;
    pointer-events: none;
}

.klini-fluxo-marca {
    fill: var(--tema-fluxo-saldo);
    stroke: var(--tema-surface);
    stroke-width: 2;
    opacity: 0;
    pointer-events: none;
}

/* ---- dica flutuante ---- */
.klini-dica {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    display: none;
    background: var(--tema-surface);
    color: var(--tema-ink);
    border: 1px solid var(--tema-line);
    border-radius: 0.5rem;
    box-shadow: var(--tema-shadow-soft);
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    min-width: 9.5rem;
}

.klini-dica-dia {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.klini-dica-linha {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.klini-dica-ponto {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
    margin-right: 0.375rem;
}

/* ---- legenda ---- */
.klini-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    font-size: 0.8125rem;
    color: var(--tema-ink-soft);
}

.klini-legenda-chave {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.klini-legenda-marca {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.klini-legenda-marca.linha {
    height: 2px;
    border-radius: 1px;
    width: 14px;
}

/* ---- ranking de categorias ---- */
.klini-rank-trilho {
    background: var(--tema-rank-trilho);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.klini-rank-barra {
    background: var(--tema-rank-barra);
    height: 100%;
    border-radius: 999px;
}

.klini-rank-nome {
    font-size: 0.875rem;
}

.klini-rank-codigo {
    font-variant-numeric: tabular-nums;
    color: var(--tema-ink-soft);
    font-size: 0.75rem;
}

/* =============================================================================
   SELO DO BANCO
   =============================================================================
   Não são os logotipos oficiais — são marcas registradas de terceiros. É a
   inicial sobre a cor institucional, que no tamanho do painel cumpre o mesmo
   papel de reconhecimento. Para trocar por logotipo real, basta pôr o SVG em
   /img/bancos/<marca>.svg e usar <img> no lugar do selo.

   A cor do texto de cada selo foi escolhida por contraste medido (WCAG, alvo
   4,5:1 para texto): branco onde passa; tinta escura no Itaú (4,64) e no Inter
   (5,42), que são claros demais para branco. O verde do Sicredi não passava com
   nenhuma das duas e foi escurecido de #3FA110 para #35870D (4,54 com branco).
   ========================================================================== */
:root {
    --tema-banco-santander: #EC0000;
    --tema-banco-caixa: #0070AF;
    --tema-banco-itau: #EC7000;
    --tema-banco-bradesco: #CC092F;
    --tema-banco-bb: #0038A8;
    --tema-banco-nubank: #820AD1;
    --tema-banco-inter: #FF7A00;
    --tema-banco-sicredi: #35870D;
    --tema-banco-sicoob: #003641;
    --tema-banco-generico: #5A6B80;
}

.klini-banco {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1;
    color: #fff;
    background: var(--tema-banco-generico);
}

.klini-banco-santander {
    background: var(--tema-banco-santander);
}

.klini-banco-caixa {
    background: var(--tema-banco-caixa);
}

.klini-banco-bradesco {
    background: var(--tema-banco-bradesco);
}

.klini-banco-bb {
    background: var(--tema-banco-bb);
}

.klini-banco-nubank {
    background: var(--tema-banco-nubank);
}

.klini-banco-sicredi {
    background: var(--tema-banco-sicredi);
}

.klini-banco-sicoob {
    background: var(--tema-banco-sicoob);
}

.klini-banco-generico {
    background: var(--tema-banco-generico);
}

/* claros demais para texto branco — letra em tinta */
.klini-banco-itau {
    background: var(--tema-banco-itau);
    color: var(--tema-ink);
}

.klini-banco-inter {
    background: var(--tema-banco-inter);
    color: var(--tema-ink);
}

/* logotipo do banco quando o arquivo existe em /img/bancos/ — mesmo gabarito do selo */
.klini-banco-logo {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    object-fit: contain;
    background: var(--tema-surface);
}

/* ---- carteira do BPO: tabela densa de clientes ---- */
.klini-tabela-carteira th {
    font-weight: 500;
    white-space: nowrap;
}

.klini-tabela-carteira td {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.klini-carteira-razao {
    max-width: 18rem;
}

.klini-carteira-sinais i {
    font-size: 1rem;
    margin: 0 0.15rem;
    cursor: help;
}
/* ---- fluxo de caixa: filtro Previsto / Realizado ------------------------
   A coluna não escolhida é escondida por CSS em vez de removida no servidor:
   as duas já vêm calculadas do serviço, e esconder mantém a escala do gráfico
   e a largura das colunas estáveis ao alternar (a tabela não "pula"). */
.fc-tabela.fc-modo-previsto .fc-real,
.fc-tabela.fc-modo-realizado .fc-prev { display: none; }

/* valor que abre o drill-down do fluxo de caixa */
.fc-drill { color: var(--tema-brand); text-decoration: none; }
.fc-drill:hover, .fc-drill:focus-visible { text-decoration: underline; }

/* =====================================================================
   EXTRATO DE LANÇAMENTOS (receitas, despesas e transferências juntas)
   ===================================================================== */
.klini-extrato {
    --extrato-aberto-bg: hsl(48 100% 92%);
    --extrato-aberto-ink: hsl(36 80% 28%);
    --extrato-vencido-bg: hsl(5 85% 94%);
    --extrato-vencido-ink: hsl(5 65% 40%);
    --extrato-quitado-bg: hsl(140 50% 90%);
    --extrato-quitado-ink: hsl(145 55% 26%);
    --extrato-parcial-bg: hsl(205 75% 93%);
    --extrato-parcial-ink: hsl(205 65% 32%);
    --extrato-agendado-bg: hsl(265 60% 94%);
    --extrato-agendado-ink: hsl(265 40% 38%);
    --extrato-linha-selecionada: hsl(205 70% 93%);
}

/* barra de ações do topo */
.klini-extrato-acoes .btn { font-weight: 600; }
.klini-atalho {
    font-size: .72rem;
    background: var(--tema-surface-2);
    border-radius: .35rem;
    padding: .1rem .4rem;
    color: var(--tema-ink-soft);
    margin-left: 1.5rem;
}

/* filtros */
.klini-extrato-filtros .form-label { font-size: .85rem; color: var(--tema-ink-soft); margin-bottom: .25rem; }
.klini-periodo { display: flex; align-items: stretch; }
.klini-periodo > .btn,
.klini-periodo > .dropdown > .btn { border-radius: 0; }
.klini-periodo > :first-child { border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius); }
.klini-periodo > :last-child { border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); }
.klini-periodo .klini-periodo-mes { min-width: 13rem; font-weight: 600; color: var(--tema-brand-ink); }
.klini-periodo-menu { min-width: 17rem; }
.klini-periodo-menu .dropdown-item { padding-top: .55rem; padding-bottom: .55rem; }
.klini-seletor-mes { width: 17rem; }
.klini-seletor-mes .klini-seletor-mes-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.klini-seletor-mes .klini-seletor-mes-grade a.active { background: var(--tema-brand); color: #fff; }

.klini-multiselect .dropdown-menu { width: 17rem; }
.klini-multiselect .klini-ms-lista { max-height: 16rem; overflow-y: auto; }
.klini-multiselect .klini-ms-botao { min-width: 12rem; text-align: start; }
.klini-multiselect .dropdown-item { display: flex; align-items: center; gap: .6rem; white-space: normal; cursor: pointer; }
.klini-mais-filtros .dropdown-menu { max-height: 22rem; overflow-y: auto; min-width: 17rem; }
.klini-bloco-filtro {
    border: 1px solid var(--tema-line);
    border-radius: var(--bs-border-radius);
    padding: .75rem;
    background: var(--tema-surface);
    min-width: 15rem;
}
.klini-bloco-filtro .klini-bloco-filtro-titulo { font-size: .8rem; font-weight: 600; color: var(--tema-ink-soft); }
.klini-chip-filtro {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--tema-line);
    background: var(--tema-surface-2);
    border-radius: 999px;
    padding: .15rem .65rem;
    font-size: .8rem;
}
.klini-chip-filtro a { color: var(--tema-ink-soft); text-decoration: none; }

/* cards de totais: o "Total do período" ganha o filete azul */
.klini-totais .klini-totais-destaque { border-top: 3px solid var(--tema-brand); margin-top: -1px; }
.klini-totais .klini-totais-valor { font-size: 1.35rem; font-weight: 700; }

/* tabela */
.klini-tabela-extrato td { vertical-align: middle; }
.klini-tabela-extrato tr.klini-linha-selecionada > td { background-color: var(--extrato-linha-selecionada); }
.klini-tabela-extrato .klini-resumo-titulo { font-weight: 500; }
.klini-chip-categoria {
    display: inline-block;
    background: var(--tema-surface-2);
    border-radius: .3rem;
    padding: 0 .45rem;
    font-size: .78rem;
    color: var(--tema-ink);
    margin-right: .5rem;
}
.klini-tabela-extrato .klini-contato { font-size: .78rem; color: var(--tema-ink); text-transform: uppercase; }
.klini-tabela-extrato .dropdown-menu { max-height: 18rem; overflow-y: auto; }
.klini-icone-linha { color: var(--tema-brand); font-size: 1.15rem; background: none; border: 0; padding: 0 .25rem; }
.klini-icone-linha.klini-icone-anexo { color: var(--tema-ink-soft); }

/* badge de situação do lançamento */
.klini-situacao {
    display: inline-block;
    min-width: 8rem;
    text-align: center;
    border-radius: .35rem;
    padding: .2rem .6rem;
    font-size: .78rem;
    font-weight: 600;
}
.klini-situacao-aberto { background: var(--extrato-aberto-bg); color: var(--extrato-aberto-ink); }
.klini-situacao-vencido { background: var(--extrato-vencido-bg); color: var(--extrato-vencido-ink); }
.klini-situacao-quitado { background: var(--extrato-quitado-bg); color: var(--extrato-quitado-ink); }
.klini-situacao-parcial { background: var(--extrato-parcial-bg); color: var(--extrato-parcial-ink); }
.klini-situacao-agendado { background: var(--extrato-agendado-bg); color: var(--extrato-agendado-ink); }
.klini-situacao-estornado { background: var(--tema-surface-2); color: var(--tema-ink-soft); text-decoration: line-through; }
/* histórico do estorno (motivo, quem, quando) logo abaixo da linha estornada */
.klini-linha-com-motivo > td { border-bottom-width: 0; }
.klini-linha-motivo-estorno > td {
    padding-top: 0;
    font-size: .82rem;
    color: var(--tema-ink-soft);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* =====================================================================
   GRADES DE LANÇAMENTOS (Contas a pagar/receber e Extrato) — cabem na
   largura disponível, sem rolagem lateral:
   - data, valores, situação e ações encolhem ao conteúdo (.klini-col-justa);
   - o Resumo prefere 30rem e cede até 9rem, mas nunca alarga a coluna: a
     descrição corta em 2 linhas e categoria/contato em 1, com "…" (o texto
     inteiro fica no title);
   - a folga da linha vai para a coluna vazia (.klini-col-folga) antes da
     Situação e para outra antes dos valores: as duas dividem a folga por
     igual, deixando os valores no meio do espaço livre;
   - grade estreita (padrão): as colunas .klini-col-ampla somem, o conteúdo
     delas aparece dentro das principais (.klini-sub-compacta) e "Ações"
     vira ⋮; com espaço, o klini-grade.js liga .klini-grade-ampla e cada
     campo volta à sua coluna.
   ===================================================================== */
.klini-grade .klini-col-justa { width: 1%; white-space: nowrap; }
.klini-grade .klini-col-resumo { width: 30rem; }
.klini-grade .klini-col-folga { padding-left: 0; padding-right: 0; }

/* contain: o conteúdo do resumo não entra na conta da largura da coluna */
.klini-resumo { contain: inline-size; min-width: 9rem; }
.klini-resumo .klini-resumo-titulo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.klini-resumo-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klini-resumo-sub > .badge,
.klini-resumo-sub > .klini-chip-categoria {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
/* com contato ao lado, a categoria cede espaço para ele aparecer também */
.klini-resumo-sub > :first-child:not(:only-child) { max-width: 65%; }

.klini-grade .klini-col-ampla { display: none; }
.klini-grade-ampla .klini-col-ampla { display: table-cell; }
.klini-grade-ampla .klini-sub-compacta { display: none; }
/* autorização dentro da situação: o selo quebra em 2 linhas em vez de alargar */
.klini-grade .klini-sub-compacta .badge { white-space: normal; }

/* "Ações": ⋮ na grade estreita; o rótulo volta com espaço (e nos cartões) */
.klini-btn-acoes > .bi { display: none; }
.klini-grade .klini-btn-acoes { font-size: 0; }
.klini-grade .klini-btn-acoes > .bi { display: inline-block; font-size: 1rem; }
.klini-grade-ampla .klini-btn-acoes { font-size: var(--bs-btn-font-size); }
.klini-grade-ampla .klini-btn-acoes > .bi { display: none; }

/* situação do extrato: todos os selos com a largura do maior, sem piso fixo */
.klini-tabela-extrato .klini-situacao { display: block; min-width: 0; }

/* barra compacta fixa que aparece ao rolar (busca, mês, voltar ao topo, paginação) */
.klini-barra-fixa {
    position: fixed;
    top: var(--extrato-topo, 0);
    left: var(--extrato-esquerda, 0);
    right: 0;
    z-index: 1019;
    background: var(--tema-surface);
    box-shadow: var(--tema-shadow-soft);
    padding: .5rem 1.5rem;
    transform: translateY(-120%);
    transition: transform .18s ease;
}
.klini-barra-fixa.klini-barra-fixa-visivel { transform: translateY(0); }

/* modal de lançamento (detalhes / informar pagamento) */
.klini-modal-lancamento .modal-content { background: var(--tema-bg); }
.klini-modal-lancamento .modal-header,
.klini-modal-lancamento .modal-footer { background: var(--tema-surface); }
.klini-modal-lancamento .klini-secao {
    background: var(--tema-surface);
    border-radius: var(--tema-radius);
    box-shadow: var(--tema-shadow-card);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}
.klini-modal-lancamento .klini-secao-titulo {
    font-size: 1.05rem;
    font-weight: 600;
    border-bottom: 1px solid var(--tema-line);
    padding-bottom: .75rem;
    margin-bottom: 1rem;
}
.klini-modal-lancamento .klini-rotulo { font-size: .8rem; font-weight: 700; color: var(--tema-ink); }
.klini-modal-lancamento .klini-valor-total { font-size: 1.9rem; font-weight: 700; }
.klini-modal-lancamento .klini-valor-total small { font-size: .9rem; font-weight: 600; }
.klini-modal-lancamento .klini-lapis { color: var(--tema-brand); background: none; border: 0; padding: 0 .25rem; }
.klini-modal-lancamento .klini-quadro-resumo { border: 1px solid var(--tema-line); border-radius: var(--bs-border-radius); }
.klini-modal-lancamento .klini-quadro-resumo dt { font-weight: 400; color: var(--tema-ink-soft); text-align: right; }
.klini-modal-lancamento .klini-quadro-resumo dd { font-weight: 700; text-align: right; margin: 0; }

/* painéis laterais largos (transferência, categorias padrão) */
.offcanvas.klini-painel-largo { width: min(46rem, 100vw); }
.klini-dropzone {
    border: 2px dashed var(--tema-line);
    border-radius: var(--bs-border-radius);
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.klini-dropzone.klini-dropzone-ativa { border-color: var(--tema-brand); background: var(--tema-accent-bg); }

/* menus dentro da tabela do extrato (⊕ colunas, Ações): saem da área de rolagem
   (strategy fixed no Popper) e não herdam a caixa alta do cabeçalho */
.klini-tabela-extrato .dropdown-menu {
    z-index: 1060;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: .9rem;
    color: var(--tema-ink);
}
#escolherColunas { min-width: 15rem; }

/* =====================================================================
   MODAL "CADASTRAR CONTA FINANCEIRA" (3 etapas, modelo Conta Azul)
   ===================================================================== */
.klini-modal-conta .modal-content { background: var(--tema-bg); }
.klini-modal-conta .modal-header { background: var(--tema-surface); }
.klini-etapa {
    background: var(--tema-surface);
    border-radius: var(--tema-radius);
    box-shadow: var(--tema-shadow-card);
    padding: 1.1rem 1.5rem;
    margin-bottom: 1.25rem;
}
.klini-etapa-cabecalho { display: flex; align-items: center; gap: .6rem; }
.klini-etapa-icone::before { content: "\F287"; color: var(--tema-line); font-size: 1.2rem; } /* bi-circle-fill */
.klini-etapa-concluida .klini-etapa-icone::before { content: "\F26A"; color: hsl(140 55% 40%); } /* bi-check-circle-fill */
.klini-etapa-concluida .klini-etapa-cabecalho { cursor: pointer; }
.klini-etapa-corpo { padding-top: 1.25rem; }
.klini-etapa-fechada .klini-etapa-corpo { display: none; }
.klini-etapa:not(.klini-etapa-fechada) .klini-etapa-seta { transform: rotate(180deg); }
.klini-etapa-seta { color: var(--tema-ink-soft); transition: transform .15s ease; }

.klini-cartao-tipo {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tema-line);
    border-radius: .5rem;
    cursor: pointer;
    background: var(--tema-surface);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.klini-cartao-tipo:hover { border-color: var(--tema-brand); }
.klini-cartao-tipo-topo {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--tema-line);
}
.klini-cartao-tipo-texto { padding: .9rem 1.1rem; font-size: .9rem; color: var(--tema-ink); }
.klini-cartao-tipo-selecionado {
    border: 2px solid var(--tema-brand);
    box-shadow: 0 0 0 3px var(--tema-accent-bg);
}

/* menus "Ações" dentro dos modais do extrato (tabela de pagamentos): posicionados
   em relação à janela (strategy fixed) e acima do conteúdo do modal */
.klini-modal-lancamento .dropdown-menu { z-index: 1070; }

/* ==========================================================================
   Rateio por categoria e centro de custo (fragments/rateio.html,
   rateio-categorias.js) — layout do Conta Azul: cabeçalho cinza, linhas com
   categoria / valor / porcentagem / centro, rodapé com restante e total.
   ========================================================================== */
.klini-rateio-cabecalho,
.klini-rateio-linha-campos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
}
.klini-rateio-cabecalho {
    background: var(--tema-surface-2);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--tema-ink);
}
.klini-rateio-cabecalho .bi-question-circle {
    color: var(--tema-ink-soft);
}
.klini-rateio-linha {
    margin-bottom: 1rem;
}
.klini-rateio-col-categoria { flex: 0 0 26%; min-width: 0; }
.klini-rateio-col-valor { flex: 0 0 15%; min-width: 0; }
.klini-rateio-col-percentual { flex: 0 0 9.5rem; min-width: 0; }
.klini-rateio-col-centro { flex: 1 1 18%; min-width: 0; }
.klini-rateio-col-centro-sub { flex: 1 1 35%; min-width: 0; }
.klini-rateio-col-acoes {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}
.klini-rateio-cabecalho .klini-rateio-col-categoria { padding-left: 0.25rem; }
.klini-rateio-remover {
    padding: 0.25rem 0.4rem;
    text-decoration: none;
}
.klini-rateio .input-group-text {
    background: var(--tema-surface-2);
    font-weight: 600;
}
.klini-rateio-sub-ativo {
    background: var(--tema-accent-bg) !important;
}
.klini-rateio-sub {
    margin-top: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--tema-line);
    border-left: 4px solid var(--tema-brand);
    border-radius: 0.5rem;
    background: var(--tema-surface);
}
.klini-rateio-rodape {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1rem 3.5rem;
    border-top: 1px solid var(--tema-line);
    margin-top: 1rem;
    padding-top: 1rem;
}
.klini-rateio-rodape-rotulo {
    color: var(--tema-ink-soft);
    margin-bottom: 0.25rem;
}
.klini-rateio-rodape-valores {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.75rem;
}
.klini-rateio-rodape-valores small {
    font-weight: 600;
    color: var(--tema-ink-soft);
}
.klini-rateio-numero {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tema-ink);
    font-variant-numeric: tabular-nums;
}
.klini-rateio-rodape-sub .klini-rateio-numero {
    font-size: 1.25rem;
}
.klini-rateio-divisor {
    align-self: stretch;
    width: 1px;
    background: var(--tema-line);
}
.klini-rateio-pendente [data-rateio-restante-percentual],
.klini-rateio-pendente [data-rateio-restante-valor],
.klini-rateio-pendente [data-sub-restante-percentual],
.klini-rateio-pendente [data-sub-restante-valor] {
    color: var(--bs-danger);
}
/* switch grande com check, como o "Habilitar rateio" do Conta Azul */
.klini-switch-grande .form-check-input {
    width: 3.4em;
    height: 1.9em;
    margin-top: 0;
    cursor: pointer;
}
.klini-switch-grande .form-check-input:checked {
    background-color: hsl(130 60% 88%);
    border-color: hsl(130 45% 62%);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
@media (max-width: 767.98px) {
    .klini-rateio-col-categoria,
    .klini-rateio-col-valor,
    .klini-rateio-col-percentual,
    .klini-rateio-col-centro,
    .klini-rateio-col-centro-sub {
        flex: 1 1 100%;
    }
    .klini-rateio-linha {
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--tema-line);
    }
    .klini-rateio-numero {
        font-size: 1.35rem;
    }
}