/* ================================================================
   Condomínio Web — CSS principal
   Identidade Visual: Krugertopware Sistemas
   Cores: Blue-grey + Laranja | Bootstrap 5.3 light/dark
   ================================================================ */

/* ── Variáveis de cores da empresa ─────────────────────────────── */
:root {
    --kt-primary:        #455A64;
    --kt-primary-dark:   #263238;
    --kt-primary-light:  #607D8B;
    --kt-accent:         #E64A19;
    --kt-accent-light:   #FF7043;
    --kt-sidebar-width:  260px;
    --kt-sidebar-collapsed: 64px;
    --kt-topbar-height:  56px;
    --kt-tabbar-height:  40px;

    /* Escala tipografica - texto. Antes havia 23 tamanhos ad-hoc (0.65 a
       1.5rem, com passos de meio pixel). Use sempre um token; se nenhum
       servir, o problema provavelmente e o layout, nao a escala. */
    --fs-2xs:   0.6875rem;  /* 11px - rotulos maiusculos, badges numericos */
    --fs-xs:    0.75rem;    /* 12px - metadados, cabecalho de tabela, abas */
    --fs-sm:    0.8125rem;  /* 13px - nav, listas densas, breadcrumb */
    --fs-base:  0.875rem;   /* 14px - corpo, formularios */
    --fs-md:    1rem;       /* 16px */
    --fs-lg:    1.125rem;   /* 18px */
    --fs-xl:    1.375rem;   /* 22px - titulo de pagina */
    --fs-2xl:   1.5rem;     /* 24px - valor de indicador */

    /* Escala de icones - separada de proposito. Icone dimensionado por
       font-size nao segue a escala de texto: e elemento grafico e mudar
       o tamanho desloca o layout ao redor. */
    --ico-xs:   0.7rem;
    --ico-sm:   0.8rem;
    --ico-md:   1rem;
    --ico-lg:   1.15rem;
    --ico-xl:   1.3rem;
}

/* ── Tab bar de edifícios abertos — tema claro ─────────────────── */
/* A aba ativa e branca pura, a mesma cor da superficie de conteudo:
   assim ela se liga a pagina em vez de flutuar sobre a barra. As
   inativas descem para 79.6% de luminosidade, longe o bastante da
   ativa para a hierarquia ser lida sem depender so do peso da fonte. */
[data-bs-theme="light"] {
    --kt-tabbar-bg:       #d3dee5;
    --kt-tab-bg:          #bfced7;
    --kt-tab-hover-bg:    #ccd9e0;
    /* A aba ativa herda a superficie de conteudo em vez de repetir o
       valor: abaixo da barra ficam o #kt-page-content e o iframe em
       bare-mode, ambos pintando --kt-body-bg. Cravar a cor aqui fazia
       a aba flutuar sobre um fundo que nao era o dela. */
    --kt-tab-active-bg:   var(--kt-body-bg);
    --kt-tab-text:        #4a5f6a;
    --kt-tab-active-text: #16232a;
    --kt-tab-border:      rgba(23, 35, 42, 0.16);
    --kt-wb-nav-bg:       #eef2f6;
    --kt-wb-nav-border:   rgba(23, 35, 42, 0.10);
    --kt-wb-header-bg:    #ffffff;
}

/* ── Superficies, tinta e acento — tema claro ──────────────────── */
/* As quatro superficies que dominam a tela viviam dentro de 4.9 pontos
   de luminosidade: card, fundo, sidebar e hero eram o mesmo cinza
   claríssimo, e sem hierarquia de camada a interface lia como
   desbotada. Agora sao 10.4 pontos, com o card 8.4 acima do fundo.

   Os cinzas carregam de proposito o viés azul-esverdeado do #455A64 da
   marca - cinza neutro e o que faz uma interface parecer nao-decidida. */
[data-bs-theme="light"] {
    --bs-primary:        #455A64;
    --bs-primary-rgb:    69, 90, 100;
    --bs-link-color:     #37505B;
    --bs-link-hover-color: #263238;

    /* Tinta: preto azulado acompanha os cinzas em vez de brigar com
       eles. 16.0:1 sobre o card, 13.2:1 sobre o fundo. */
    --bs-body-color:     #17232a;
    --bs-body-color-rgb: 23, 35, 42;
    --bs-secondary-color: #53666f;
    --bs-border-color:   rgba(23, 35, 42, 0.16);

    /* Acento so do tema claro: o #E64A19 herdado do :root da 3.9:1 sobre
       branco e reprova em AA para texto e icone. Mesmo matiz, alguns
       graus mais fundo, 5.2:1. No tema escuro o original segue valendo,
       porque la ele assenta sobre fundo escuro. */
    --kt-accent:         #C63C0F;
    --kt-accent-light:   #E4551F;

    --kt-sidebar-bg:     #eef2f6;
    --kt-sidebar-text:   #2f4149;
    --kt-sidebar-hover:  rgba(69, 90, 100, 0.13);
    --kt-sidebar-active: #455A64;
    --kt-topbar-bg:      #ffffff;
    --kt-body-bg:        #e4eaef;
    --kt-hero-bg:        #dde5ec;

    /* Grade de dados: zebra/selecao entram como fundo do Bootstrap 5.3, por
       isso sao rgba - precisam deixar a cor da linha aparecer por baixo.
       Subiram junto com o fundo, senao a zebra sumiria na superficie nova. */
    --kt-grid-zebra:     rgba(69, 90, 100, 0.055);
    --kt-grupo-bg:       #dae2e9;
    --kt-grid-sel:       rgba(69, 90, 100, 0.17);
    /* Estado do titulo: a mesma cor serve ao texto do chip e a faixa da
       linha, entao nao ha como um dizer verde e a outra dizer amarelo.
       Escolhidas para dar 4.7-5.3:1 sobre a propria tinta - contraste
       parelho e o que faz a coluna parecer regular. */
    --kt-grid-ok:        #1c6b47;
    --kt-grid-ok-bg:     rgba(28, 107, 71, 0.14);
    --kt-grid-wait:      #8a5a10;
    --kt-grid-wait-bg:   rgba(138, 90, 16, 0.14);
    --kt-grid-off:       #566a73;
    --kt-grid-off-bg:    rgba(86, 106, 115, 0.14);
    --kt-grid-erro:      #a6321f;
    --kt-grid-erro-bg:   rgba(166, 50, 31, 0.14);
    --kt-grid-info:      #345c73;
    --kt-grid-info-bg:   rgba(52, 92, 115, 0.14);
    --kt-card-bg:        #ffffff;
}

/* ── Tab bar — tema escuro ─────────────────────────────────────── */
/* Mesma regra do claro: a aba ativa E a superficie de conteudo, nao uma
   cor parecida. Aqui isso obrigou a refazer as camadas — a ativa era a
   MAIS CLARA da barra (22.2% contra 10.0% do conteudo), entao igualar ao
   conteudo sem mexer no resto faria a aba sumir dentro da barra.

   A barra desceu para 3.5% para abrir espaco: barra -> inativa = 3.7
   pontos, inativa -> ativa = 2.7. Sao folgas menores que as do tema claro,
   mas a aba ativa tambem carrega altura maior, o traco de acento e o texto
   a 15:1 contra 7.1:1 das inativas - a hierarquia nao depende so do fundo. */
[data-bs-theme="dark"] {
    --kt-tabbar-bg:       #050b0d;
    --kt-tab-bg:          #0c1419;
    --kt-tab-hover-bg:    #0f181d;
    --kt-tab-active-bg:   var(--kt-body-bg);
    --kt-tab-text:        #8ea3ad;
    --kt-tab-active-text: #eceff1;
    --kt-tab-border:      rgba(255,255,255,0.10);
    --kt-wb-nav-bg:       #1a2226;
    --kt-wb-nav-border:   rgba(255,255,255,0.07);
    --kt-wb-header-bg:    #1e2a30;
}

[data-bs-theme="dark"] {
    --bs-primary:        #607D8B;
    --bs-primary-rgb:    96, 125, 139;

    --kt-sidebar-bg:     #1a2226;
    --kt-sidebar-text:   #90A4AE;
    --kt-sidebar-hover:  rgba(255,255,255,0.06);
    --kt-sidebar-active: #455A64;
    --kt-topbar-bg:      #1e2a30;
    --kt-body-bg:        #121c21;
    --kt-hero-bg:        #16232a;

    --kt-grid-zebra:     rgba(255, 255, 255, 0.035);
    --kt-grupo-bg:       #2a3a43;
    --kt-grid-sel:       rgba(96, 125, 139, 0.30);
    --kt-grid-ok:        #6fc79b;
    --kt-grid-ok-bg:     rgba(111, 199, 155, 0.18);
    --kt-grid-wait:      #e0ad63;
    --kt-grid-wait-bg:   rgba(224, 173, 99, 0.18);
    --kt-grid-off:       #9fb2ba;
    --kt-grid-off-bg:    rgba(159, 178, 186, 0.18);
    --kt-grid-erro:      #f6ab99;
    --kt-grid-erro-bg:   rgba(246, 171, 153, 0.18);
    --kt-grid-info:      #8fb8cf;
    --kt-grid-info-bg:   rgba(143, 184, 207, 0.18);
    --kt-card-bg:        #1e2a30;
}

/* ── Layout principal ──────────────────────────────────────────── */
body {
    background-color: var(--kt-body-bg);
    font-family: 'Source Sans 3', 'Source Sans Pro', system-ui, sans-serif;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ── Sidebar ───────────────────────────────────────────────────── */
#sidebar {
    position: fixed;
    top: var(--kt-topbar-height);
    left: 0;
    width: var(--kt-sidebar-width);
    height: calc(100vh - var(--kt-topbar-height));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    background-color: var(--kt-sidebar-bg);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.25s ease;
    z-index: 1030;
    display: flex;
    flex-direction: column;
}

#sidebar.collapsed {
    width: var(--kt-sidebar-collapsed);
}

/* Scrollbar oculta por padrão, visível ao hover */
#sidebar::-webkit-scrollbar       { width: 4px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background .2s; }
#sidebar:hover {
    scrollbar-color: rgba(128,128,128,.35) transparent;
}
#sidebar:hover::-webkit-scrollbar-thumb { background: rgba(128,128,128,.35); }

/* Links do menu */
.sidebar-nav {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    flex: 1;
}

.sidebar-nav .nav-section {
    color: #78909C;
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 16px 20px 4px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s ease;
}

#sidebar.collapsed .nav-section {
    opacity: 0;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    padding: 10px 12px 10px 0;
    color: var(--kt-sidebar-text);
    text-decoration: none;
    border-radius: 6px;
    margin: 1px 8px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-nav a:hover {
    background-color: var(--kt-sidebar-hover);
    color: var(--kt-primary);
}

[data-bs-theme="dark"] .sidebar-nav a:hover {
    color: #fff;
}

/* Linguagem unica de selecao: tinta de acento + barra na aresta inicial.
   Mesma regra em .wb-nav-link.active e .nav-anchor.active. */
.sidebar-nav a.active {
    background-color: rgba(230,74,25,0.10);
    color: var(--kt-accent);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--kt-accent);
}

[data-bs-theme="dark"] .sidebar-nav a.active {
    background-color: rgba(255,112,67,0.14);
    color: var(--kt-accent-light);
    box-shadow: inset 3px 0 0 var(--kt-accent-light);
}

.sidebar-nav a i:not(.nav-fav-btn) {
    font-size: var(--ico-lg);
    flex-shrink: 0;
    /* Ícone alinhado com o toggle do header — mesma largura da faixa fixa */
    width: var(--kt-sidebar-collapsed);
    text-align: center;
}

.sidebar-nav a .nav-label {
    font-size: var(--fs-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    transition: max-width 0.25s ease, opacity 0.25s ease;
}

#sidebar.collapsed .nav-label {
    max-width: 0;
    opacity: 0;
}

/* ── Grupos colapsáveis ──────────────────────────────────────── */
.nav-group {
    list-style: none;
}

.nav-group-header {
    display: flex;
    align-items: center;
    color: #78909C;
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 16px 20px 4px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    transition: color 0.15s, opacity 0.2s ease;
}

.nav-group-header:hover {
    color: #B0BEC5;
}

.nav-group-header .nav-label {
    flex: 1;
    width: auto;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.nav-chevron {
    flex-shrink: 0;
    font-size: var(--ico-xs);
    margin-left: 4px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-group.closed > .nav-group-header > .nav-chevron {
    transform: rotate(-90deg);
}

.nav-sublist {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    max-height: 800px;
    transition: max-height 0.3s ease;
}

.nav-group.closed > .nav-sublist {
    max-height: 0;
}

/* Modo colapsado: oculta headers de grupo, abre todos os sublists */
#sidebar.collapsed .nav-group-header {
    opacity: 0;
    pointer-events: none;
    padding-top: 4px;
    padding-bottom: 0;
}

#sidebar.collapsed .nav-group.closed > .nav-sublist {
    max-height: 800px;
}

/* Colapsado: ícone já tem 64px de largura, elimina padding/margin lateral */
#sidebar.collapsed .sidebar-nav a {
    padding: 10px 0;
    margin: 1px 0;
    border-radius: 0;
}

/* Seção "Principal" some suavemente */
#sidebar.collapsed .nav-section {
    opacity: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
}

/* ── Hover expand: sidebar colapsado abre ao passar o mouse ─── */
#sidebar.collapsed.hover-open {
    width: var(--kt-sidebar-width);
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
}

[data-bs-theme="dark"] #sidebar.collapsed.hover-open {
    box-shadow: 4px 0 20px rgba(0,0,0,0.45);
}

#sidebar.collapsed.hover-open .nav-label {
    max-width: 200px;
    opacity: 1;
}

#sidebar.collapsed.hover-open .nav-section {
    opacity: 1;
    height: auto;
    padding: 16px 20px 4px;
    overflow: visible;
}

#sidebar.collapsed.hover-open .nav-group-header {
    opacity: 1;
    pointer-events: auto;
    padding-top: 16px;
    padding-bottom: 4px;
}

#sidebar.collapsed.hover-open .sidebar-nav a {
    padding: 10px 12px 10px 0;
    margin: 1px 8px;
    border-radius: 6px;
}

/* Restaura grupos fechados ao fazer hover */
#sidebar.collapsed.hover-open .nav-group.closed > .nav-sublist {
    max-height: 0;
}

/* ── Topbar ────────────────────────────────────────────────────── */
#topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--kt-topbar-height);
    background-color: var(--kt-topbar-bg);
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    padding: 0 20px 0 0;
    z-index: 1035;
    transition: background-color 0.2s ease;
    gap: 12px;
}

[data-bs-theme="dark"] #topbar {
    border-bottom-color: rgba(255,255,255,0.06);
}

/* Sidebar tema claro: borda separadora e seções mais escuras */
[data-bs-theme="light"] #sidebar {
    border-right: 1px solid var(--bs-border-color);
}

[data-bs-theme="light"] .nav-section,
[data-bs-theme="light"] .nav-group-header {
    color: #607D8B;
}

/* ── Área de marca no header (toggle + logo) ─────────────────── */
.topbar-brand {
    display: flex;
    align-items: center;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
    /* Largura fixa — NÃO muda quando o sidebar colapsa (igual ao Gmail) */
    width: var(--kt-sidebar-width);
}

.topbar-sidebar-toggle {
    width: var(--kt-sidebar-collapsed);
    min-width: var(--kt-sidebar-collapsed);
    height: 100%;
    background: none;
    border: none;
    color: var(--bs-body-color);
    font-size: var(--ico-xl);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.topbar-sidebar-toggle:hover {
    background: rgba(0,0,0,0.06);
    color: var(--kt-primary);
}

[data-bs-theme="dark"] .topbar-sidebar-toggle:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

/* Logo troca conforme o tema. Os arquivos _trim sao os originais sem a
   moldura transparente - ver o comentario em .topbar-logo-img. */
[data-bs-theme="light"] .topbar-logo-img {
    content: url('/assets/img/logo_dark_trim.png');
}

[data-bs-theme="dark"] .topbar-logo-img {
    content: url('/assets/img/logo_white_trim.png');
}

.topbar-brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0 12px 0 4px;
    overflow: hidden;
    flex: 1;
    height: 100%;
    /* Logo NUNCA colapsa — sempre visível */
}

.topbar-logo-img {
    /* Os PNGs originais (450x260) carregavam 74% de altura transparente: a
       marca ocupava so 400x68 no centro. Como height dimensiona a TELA e nao
       a marca, ela acabava desenhada com ~20px de altura, e era preciso
       ampliar 1.4x e recortar o excesso no overflow do .topbar-brand.

       Os arquivos _trim tem a moldura removida (406x74), entao a altura aqui
       e a altura real da marca - sem ampliacao, sem recorte. Cabem 30px nos
       ~180px livres da area de marca; a 2x isso pede 330px de bitmap e o
       arquivo tem 406px de largura, entao continua nitido. */
    height: 30px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.topbar-toggle {
    background: none;
    border: none;
    color: var(--bs-body-color);
    font-size: var(--ico-xl);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
}

.topbar-toggle:hover {
    background: rgba(0,0,0,0.06);
}

[data-bs-theme="dark"] .topbar-toggle:hover {
    background: rgba(255,255,255,0.08);
}

.topbar-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--bs-body-color);
}

/* ── Botão seletor de edifício (topbar) ────────────────────────── */
.topbar-wb-picker {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid rgba(69,90,100,0.25);
    border-radius: 6px;
    color: var(--kt-primary);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.topbar-wb-picker:hover {
    background: rgba(69,90,100,0.08);
    border-color: var(--kt-primary);
}
[data-bs-theme="dark"] .topbar-wb-picker {
    color: #90a4ae;
    border-color: rgba(255,255,255,0.15);
}
[data-bs-theme="dark"] .topbar-wb-picker:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.3);
    color: #eceff1;
}

/* ── Itens da lista do picker ──────────────────────────────────── */
.wb-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--kt-tab-border);
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}
.wb-picker-item:last-child { border-bottom: none; }
.wb-picker-item:hover { background: var(--kt-sidebar-hover); }

.wb-picker-num {
    font-size: var(--fs-2xs);
    font-weight: 700;
    background: var(--kt-primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    min-width: 38px;
    text-align: center;
    font-family: var(--bs-font-monospace);
}
.wb-picker-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wb-picker-label {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wb-picker-sub {
    font-size: var(--fs-xs);
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Conteúdo principal ────────────────────────────────────────── */
#main-content {
    margin-left: var(--kt-sidebar-width);
    margin-top: var(--kt-topbar-height);
    height: calc(100vh - var(--kt-topbar-height));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: margin-left 0.25s ease;
}

#main-content.sidebar-collapsed {
    margin-left: var(--kt-sidebar-collapsed);
}

.page-content {
    padding: 24px;
}

/* ── Barra de abas unificada (edifícios + programa) ────────────── */
#kt-tabbar {
    flex-shrink: 0;
    height: var(--kt-tabbar-height);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    background: var(--kt-tabbar-bg);
    display: flex;
    align-items: flex-end;
    padding: 6px 6px 0;
    gap: 3px;
}
#kt-tabbar::-webkit-scrollbar { display: none; }
#kt-prog-tabs { display: contents; }

#kt-frames {
    flex: 1;
    position: relative;
    min-height: 0;
    display: none;
    overflow: hidden;
}

#kt-page-content {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.kt-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    height: 30px;
    cursor: pointer;
    background: var(--kt-tab-bg);
    color: var(--kt-tab-text);
    font-size: var(--fs-xs);
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid var(--kt-tab-border);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    flex: 0 1 auto;
    min-width: 80px;
    max-width: 200px;
    padding: 0 2px 0 10px;
    transition: background 0.12s, color 0.12s;
    user-select: none;
}
.kt-tab:hover:not(.active) {
    background: var(--kt-tab-hover-bg);
    color: var(--kt-tab-active-text);
}
/* Aba ativa = cor da superficie do conteudo (unica na barra com essa cor),
   mais alta, mais escura no texto, com faixa de acento no topo. */
.kt-tab.active {
    height: 34px;
    background: var(--kt-tab-active-bg);
    color: var(--kt-tab-active-text);
    font-weight: 600;
    border-color: var(--kt-tab-border);
    border-bottom: none;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.07);
    z-index: 2;
}
.kt-tab.active::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--kt-accent);
    border-radius: 12px 12px 0 0;
}
/* Ver bloco "Foco visivel" no fim do arquivo. */
.kt-tab-body {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    overflow: hidden;
    min-width: 0;
}
.kt-tab-icon { font-size: var(--ico-sm); opacity: 0.7; flex-shrink: 0; }
.kt-tab.active .kt-tab-icon { opacity: 1; color: var(--kt-accent); }
.kt-tab-title { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.kt-tab-close {
    background: none; border: none; color: inherit; cursor: pointer;
    padding: 2px 4px; opacity: 0; border-radius: 3px; flex-shrink: 0;
    line-height: 1; font-size: var(--ico-sm); margin-left: 2px; transition: opacity 0.1s;
}
.kt-tab:hover .kt-tab-close,
.kt-tab.active .kt-tab-close { opacity: 0.45; }
.kt-tab-close:hover { opacity: 1 !important; background: rgba(0,0,0,.10); }
[data-bs-theme="dark"] .kt-tab-close:hover { background: rgba(255,255,255,.12); }

/* ── Bare mode (páginas carregadas em iframes) ─────────────────── */
body.bare-mode {
    background: var(--kt-body-bg);
    overflow: hidden;
}
body.bare-mode #main-content {
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
body.bare-mode .page-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
}
/* Workbench em iframe: remove offset de topbar/tabbar do shell externo */
body.bare-mode .wb-nav {
    top: 0;
    height: 100vh;
}
body.bare-mode .wb-layout {
    min-height: 100vh;
    margin-top: -6px; /* padding-top 10px − 6px = 4px de respiro no topo */
}

/* O cabecalho de formulario gruda em --kt-topbar-height, que e a altura
   da barra do shell externo. Dentro do iframe essa barra nao existe: o
   cabecalho parava 56px abaixo do topo do container de scroll e os
   cards subiam para essa faixa, aparecendo por tras dele.

   O sangramento lateral tambem acompanha: -24px valia para o padding
   de 24px do shell, enquanto .page-content em bare mode usa 16px - os
   8px de sobra empurravam a barra para fora do container. */
body.bare-mode .page-header {
    /* Os 10px sao o padding-top de .page-content: a faixa acima do
       cabecalho onde os cards apareciam ao rolar. O cabecalho sobe
       sobre ela (top e margin negativos) e devolve o respiro por
       dentro, entao parado ele fica no mesmo lugar de antes. */
    top: -10px;
    margin-top: -10px;
    padding-top: 20px;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
}

/* ── Cards ─────────────────────────────────────────────────────── */
/* A borda e a sombra saem do token, nao de preto puro cravado: o tema
   claro afastou o card do fundo em 8.4 pontos de luminosidade, e um
   contorno a 7% de opacidade jogava esse ganho fora - o card voltava a
   se dissolver na pagina. A sombra ganhou um segundo nivel, mais aberto
   e mais fraco, que e o que da a leitura de "acima do fundo". */
.card {
    background-color: var(--kt-card-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(23, 35, 42, 0.07),
                0 4px 14px rgba(23, 35, 42, 0.05);
}

[data-bs-theme="dark"] .card {
    border-color: rgba(255,255,255,0.07);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ── Botões com cor da empresa ─────────────────────────────────── */
.btn-primary {
    background-color: var(--kt-primary);
    border-color: var(--kt-primary);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--kt-primary-dark);
    border-color: var(--kt-primary-dark);
}

.btn-accent {
    background-color: var(--kt-accent);
    border-color: var(--kt-accent);
    color: #fff;
}

.btn-accent:hover {
    background-color: var(--kt-accent-light);
    border-color: var(--kt-accent-light);
    color: #fff;
}

/* ── Toggle de tema ────────────────────────────────────────────── */
.theme-toggle {
    background: none;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 20px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: var(--ico-md);
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}

.theme-toggle:hover {
    border-color: var(--kt-primary);
    color: var(--kt-primary);
}

[data-bs-theme="dark"] .theme-toggle {
    border-color: rgba(255,255,255,0.2);
}

/* ── Badges de perfil ──────────────────────────────────────────── */
.badge-admin {
    background-color: var(--kt-accent);
    color: #fff;
    font-size: var(--fs-2xs);
    padding: 2px 7px;
    border-radius: 10px;
}

/* ── Responsividade ────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    #sidebar {
        transform: translateX(-100%);
        width: var(--kt-sidebar-width) !important;
        z-index: 1050;
        transition: transform 0.25s ease;
    }

    #sidebar.show {
        transform: translateX(0);
    }

    #main-content {
        margin-left: 0 !important;
    }

    .topbar-brand {
        width: auto !important;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        top: var(--kt-topbar-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.4);
        z-index: 1040;
    }

    .sidebar-overlay.show {
        display: block;
    }
}

/* ── Utilitários ───────────────────────────────────────────────── */
.page-header {
    position: sticky;
    top: var(--kt-topbar-height);
    z-index: 100;
    margin-bottom: 20px;
    margin-left: -24px;
    margin-right: -24px;
    padding: 10px 24px;
    background-color: var(--kt-body-bg);
    border-bottom: 1px solid rgba(0,0,0,0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    transition: background-color 0.25s;
}

[data-bs-theme="dark"] .page-header {
    border-bottom-color: rgba(255,255,255,0.07);
}

.page-header h1 {
    font-size: var(--fs-xl);
    font-weight: 600;
    margin: 0;
}

.text-accent { color: var(--kt-accent); }

/* ── Sidebar de navegação por âncoras (cadastros) ──────────── */
.nav-anchor-sidebar {
    position: sticky;
    top: calc(50vh - 100px);
    width: 42px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.nav-anchor {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: var(--bs-secondary-color);
    text-decoration: none;
    font-size: var(--ico-lg);
    transition: background .15s, color .15s;
    position: relative;
    flex-shrink: 0;
}

.nav-anchor:hover {
    background: var(--kt-sidebar-hover);
    color: var(--kt-primary);
}

.nav-anchor.active {
    background: rgba(230,74,25,0.10);
    color: var(--kt-accent);
}

[data-bs-theme="dark"] .nav-anchor:hover { color: #fff; }
[data-bs-theme="dark"] .nav-anchor.active {
    background: rgba(255,112,67,0.14);
    color: var(--kt-accent-light);
}

.nav-anchor::after {
    content: attr(data-tooltip);
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.75);
    color: #fff;
    font-size: var(--fs-xs);
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}

.nav-anchor:hover::after {
    opacity: 1;
}

/* Toasts */
.toast-container {
    position: fixed;
    top: calc(var(--kt-topbar-height) + 8px);
    right: 20px;
    z-index: 9999;
}

/* Tabelas */
.table-responsive .table th {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════
   STAT CARD — Componente de indicador numérico (x-stat-card)
   ════════════════════════════════════════════════════════════════ */

.kt-stat-icon {
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ico-xl);
}

.kt-stat-icon--primary { background: rgba(69,90,100,0.12);  color: var(--kt-primary); }
.kt-stat-icon--accent  { background: rgba(230,74,25,0.12);  color: var(--kt-accent); }
.kt-stat-icon--danger  { background: rgba(220,53,69,0.12);  color: var(--bs-danger); }
.kt-stat-icon--warning { background: rgba(255,193,7,0.15);  color: var(--bs-warning); }
.kt-stat-icon--success { background: rgba(25,135,84,0.12);  color: var(--bs-success); }
.kt-stat-icon--info    { background: rgba(13,202,240,0.12); color: var(--bs-info); }
.kt-stat-icon--purple  { background: rgba(111,66,193,0.12); color: #6f42c1; }

[data-bs-theme="dark"] .kt-stat-icon--danger  { background: rgba(220,53,69,0.2); }
[data-bs-theme="dark"] .kt-stat-icon--warning { background: rgba(255,193,7,0.2); }
[data-bs-theme="dark"] .kt-stat-icon--success { background: rgba(25,135,84,0.2); }

.kt-stat-value {
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.2;
}

.kt-stat-label {
    font-size: var(--fs-xs);
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.kt-stat-sub {
    font-size: var(--fs-xs);
    margin-top: 3px;
    line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════
   TABELAS — Sticky thead + Sort + Pagination
   ════════════════════════════════════════════════════════════════ */

/* Container com scroll interno — thead fica sticky dentro dele */
.kt-table-scroll {
    overflow-y: auto;
    max-height: max(320px, calc(100vh - var(--kt-topbar-height) - var(--kt-tabbar-height) - 220px));
}

/* Mecanica do cabecalho fixo, compartilhada por todas as grades com scroll
   interno. Adicione novos containers a esta lista em vez de recriar a regra. */
.kt-table-scroll thead th,
.kt-table-scroll thead td,
.leitura-scroll thead th,
.recibo-table-scroll thead th,
.recibo-table-scroll thead td {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bs-secondary-bg);
    box-shadow: inset 0 -2px 0 var(--bs-border-color);
}

/* Tipografia de cabecalho: so nas grades genericas. As grades de leitura e
   recibo tem muitas colunas e a caixa-alta as alargaria demais. */
.kt-table-scroll thead th,
.kt-table-scroll thead td {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    white-space: nowrap;
}

/* Digitos de largura fixa: colunas de valores alinham verticalmente.
   Escopo em .table para nao afetar os templates de PDF/e-mail. */
.table th,
.table td {
    font-variant-numeric: tabular-nums;
}

/* Link de cabeçalho ordenável */
.kt-th-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-weight: inherit;
    white-space: nowrap;
    transition: color 0.12s;
}

.kt-th-sort:hover {
    color: var(--kt-primary);
}

.kt-th-sort i {
    font-size: var(--ico-xs);
    opacity: 0.35;
    transition: opacity 0.12s;
    flex-shrink: 0;
}

.kt-th-sort:hover i {
    opacity: 0.7;
}

.kt-th-sort.kt-sort-active {
    color: var(--kt-accent);
}

.kt-th-sort.kt-sort-active i {
    opacity: 1;
    color: var(--kt-accent);
}

/* Rodapé de paginação */
.kt-table-pagination {
    background-color: var(--bs-secondary-bg);
    border-radius: 0 0 10px 10px;
}

.kt-table-footer {
    font-size: var(--fs-sm);
    color: var(--bs-secondary-color);
    background-color: var(--bs-secondary-bg);
    border-radius: 0 0 10px 10px;
}

.kt-table-pagination .pagination .page-link {
    border-radius: 5px !important;
    font-size: var(--fs-xs);
    padding: 3px 8px;
    color: var(--kt-primary);
    border-color: var(--bs-border-color);
}

.kt-table-pagination .pagination .page-item.active .page-link {
    background-color: var(--kt-primary);
    border-color: var(--kt-primary);
    color: #fff;
}

.kt-table-pagination .pagination .page-item.disabled .page-link {
    color: var(--bs-secondary-color);
}

.kt-table-pagination .pagination .page-link:hover:not(.active) {
    background-color: var(--kt-sidebar-hover);
    color: var(--kt-primary-dark);
}

/* ════════════════════════════════════════════════════════════════
   BREADCRUMB — Navegação hierárquica
   ════════════════════════════════════════════════════════════════ */

.kt-breadcrumb {
    margin-bottom: 0.75rem;
}
.kt-breadcrumb .breadcrumb {
    font-size: var(--fs-sm);
    background: transparent;
    padding: 0;
}
.kt-breadcrumb .breadcrumb-item a {
    color: var(--kt-primary);
    text-decoration: none;
}
.kt-breadcrumb .breadcrumb-item a:hover {
    color: var(--kt-accent);
    text-decoration: underline;
}
.kt-breadcrumb .breadcrumb-item.active {
    color: var(--bs-secondary-color);
}
.kt-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-secondary-color);
    content: "›";
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL SEARCH — Busca na topbar
   ════════════════════════════════════════════════════════════════ */

.kt-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.kt-search-wrap input {
    width: 0;
    padding: 0;
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--fs-sm);
    transition: width 0.25s ease, padding 0.25s ease;
    color: inherit;
}
.kt-search-wrap.open input {
    width: 200px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-secondary-bg);
}
.kt-search-btn {
    background: transparent;
    border: none;
    padding: 0 4px;
    cursor: pointer;
    color: inherit;
    line-height: 1;
    font-size: var(--ico-md);
    opacity: 0.75;
    transition: opacity .15s;
}
.kt-search-btn:hover { opacity: 1; }

/* Dropdown de resultados */
.kt-search-results {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 9999;
    display: none;
}
.kt-search-results.show { display: block; }
.kt-search-result-group {
    padding: 6px 10px 2px;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
}
.kt-search-result-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    text-decoration: none;
    color: var(--bs-body-color);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background .1s;
}
.kt-search-result-item:hover {
    background: var(--bs-secondary-bg);
    color: var(--kt-accent);
}
.kt-search-result-item .kt-sr-sub {
    font-size: var(--fs-xs);
    color: var(--bs-secondary-color);
}
.kt-search-empty {
    padding: 14px 12px;
    font-size: var(--fs-sm);
    color: var(--bs-secondary-color);
    text-align: center;
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR FAVORITOS
   ════════════════════════════════════════════════════════════════ */

.nav-fav-btn {
    flex-shrink: 0;
    width: 0;
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
    color: var(--bs-secondary-color);
    font-size: var(--ico-sm);
    line-height: 1;
    text-align: center;
    transition: width .15s, opacity .15s, color .15s;
}
.nav-fav-btn:hover, .nav-fav-btn.active { opacity: 1 !important; color: var(--kt-accent); }
#sidebar a:hover .nav-fav-btn,
#sidebar a.active .nav-fav-btn { width: 20px; opacity: 0.6; }

/* Favoritos — section divider after the favs group */
#nav-favs-group + li.nav-fav-li:last-of-type { margin-bottom: 6px; }

/* ════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ════════════════════════════════════════════════════════════════ */

/* No topo a direita, no mesmo canto das mensagens vindas do servidor
   (#flash-toast-area, que usa top-0 end-0 p-3). Os dois avisos sao a
   mesma coisa para quem le: nao faz sentido um subir e outro descer. */
#kt-toast-area {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 340px;
    width: 100%;
}
.kt-toast {
    border-left: 4px solid var(--bs-success);
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    font-size: var(--fs-sm);
}
.kt-toast-success { border-left-color: var(--bs-success); }
.kt-toast-danger  { border-left-color: var(--bs-danger); }
.kt-toast-warning { border-left-color: var(--bs-warning); }
.kt-toast-info    { border-left-color: var(--bs-info); }

/* page-header: sticky relativo ao topo do #kt-page-content */
.page-header {
    top: 0;
}


/* ════════════════════════════════════════════════════════════════
   WORKBENCH — Layout interno (nav lateral + conteúdo)
   ════════════════════════════════════════════════════════════════ */

.wb-layout {
    display: flex;
    gap: 0;
    min-height: calc(100vh - var(--kt-topbar-height) - var(--kt-tabbar-height));
    margin: -24px;
}

/* Nav lateral do edifício */
.wb-nav {
    width: 200px;
    flex-shrink: 0;
    background-color: var(--kt-wb-nav-bg);
    border-right: 1px solid var(--kt-wb-nav-border);
    display: flex;
    flex-direction: column;
    padding-top: 0;
    position: sticky;
    top: calc(var(--kt-topbar-height) + var(--kt-tabbar-height));
    height: calc(100vh - var(--kt-topbar-height) - var(--kt-tabbar-height));
    overflow: hidden;
    transition: width 0.2s ease;
}

.wb-nav--collapsed {
    width: 42px;
}

.wb-nav-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--kt-wb-nav-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
}

.wb-nav--collapsed .wb-nav-header {
    padding: 10px 0;
    justify-content: center;
}

.wb-nav-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bs-body-color);
    opacity: 0.5;
    padding: 2px 4px;
    line-height: 1;
    flex-shrink: 0;
    font-size: var(--ico-md);
    transition: opacity 0.15s;
}
.wb-nav-toggle:hover { opacity: 1; }

.wb-nav-num {
    font-size: var(--fs-2xs);
    font-weight: 700;
    background-color: var(--kt-primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.wb-nav--collapsed .wb-nav-num { display: none; }

.wb-nav-list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.wb-nav-section {
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #78909C;
    padding: 12px 14px 4px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}

.wb-nav--collapsed .wb-nav-section { display: none; }

.wb-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    font-size: var(--fs-sm);
    color: var(--bs-body-color);
    text-decoration: none;
    border-radius: 5px;
    margin: 1px 6px;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
    overflow: hidden;
}

.wb-nav--collapsed .wb-nav-link {
    justify-content: center;
    padding: 8px 0;
    margin: 1px 4px;
    gap: 0;
}

.wb-nav--collapsed .wb-nav-link span { display: none; }

.wb-nav-link i { font-size: var(--ico-md); width: 18px; text-align: center; flex-shrink: 0; }

.wb-nav--collapsed .wb-nav-link i { width: auto; }

.wb-nav-link:hover:not(.disabled) {
    background-color: rgba(69,90,100,0.10);
    color: var(--kt-primary);
}

.wb-nav-link.active {
    background-color: rgba(230,74,25,0.10);
    color: var(--kt-accent);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--kt-accent);
}

[data-bs-theme="dark"] .wb-nav-link.active {
    background-color: rgba(255,112,67,0.14);
    color: var(--kt-accent-light);
    box-shadow: inset 3px 0 0 var(--kt-accent-light);
}

.wb-nav-link.disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* Barra de filtro sticky */
.wb-filter-sticky {
    position: sticky;
    top: calc(var(--kt-topbar-height) + var(--kt-tabbar-height));
    z-index: 10;
    background-color: var(--kt-body-bg);
    margin: 0 -20px;
    padding: 0 20px 8px;
    border-bottom: 1px solid var(--kt-wb-nav-border);
}

/* Área de conteúdo principal do workbench */
.wb-main {
    flex: 1;
    min-width: 0;
    padding: 0 20px 20px 20px;
    overflow: visible;
}

/* Header do edifício no workbench */
.wb-edificio-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0 12px;
    border-bottom: 1px solid var(--kt-wb-nav-border);
    margin-bottom: 4px;
}

.wb-edificio-nome {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--bs-body-color);
    line-height: 1.3;
}

.wb-edificio-fantasia {
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--bs-secondary-color);
    margin-left: 6px;
}

.wb-edificio-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    font-size: var(--fs-xs);
    color: var(--bs-secondary-color);
}

.wb-edificio-meta span { display: flex; align-items: center; gap: 4px; }
.wb-edificio-meta i { font-size: var(--ico-sm); }

.wb-periodo-badge {
    text-align: center;
    background-color: var(--kt-primary);
    color: #fff;
    border-radius: 8px;
    padding: 6px 14px;
    flex-shrink: 0;
}

.wb-periodo-label {
    display: block;
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.8;
}

.wb-periodo-valor {
    display: block;
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* ── Badge de módulo no header do edifício ──────────────────── */
.wb-modulo-badge {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--bs-secondary-color);
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: 4px 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Leitura (água/gás) — layout com grid scrollável ────────── */
.wb-main--leitura {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--kt-topbar-height) - var(--kt-tabbar-height));
    overflow: hidden;
    padding-bottom: 0;
}

.leitura-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 8px;
    flex-shrink: 0;
}

.leitura-form {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.leitura-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.leitura-card .card-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

.leitura-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(128,128,128,.3) transparent;
}

/* Rodape de totais fixo - contraparte do cabecalho fixo: so o corpo da grade
   rola, cabecalho e totais ficam parados. Adicione novos containers aqui em
   vez de recriar a regra.

   O sticky vai no <tfoot> (grupo), NAO nas celulas: a grade de lancamentos de
   despesa monta ate 3 linhas de total (Total / Despesas / Receitas) e, com
   sticky por celula, todas se fixariam em bottom:0 e se sobreporiam.
   Navegador sem suporte a sticky em grupo de linhas apenas rola o rodape
   junto com o corpo, que e o comportamento anterior. */
.leitura-scroll tfoot {
    position: sticky;
    bottom: 0;
    z-index: 3;
}

/* Fundo opaco nas celulas: sem isso as linhas do corpo aparecem por tras do
   rodape enquanto rolam. */
.leitura-scroll tfoot td,
.leitura-scroll tfoot th,
.kt-table-scroll tfoot td,
.kt-table-scroll tfoot th,
.kt-grid-scroll tfoot td,
.kt-grid-scroll tfoot th,
.recibo-table-scroll tfoot td,
.recibo-table-scroll tfoot th {
    background-color: var(--bs-secondary-bg);
}

/* Separador so na grade de leitura: despesas usa .table-group-divider e
   lancamentos usa .border-top na primeira linha, ambos ja no markup. */
.leitura-scroll tfoot td {
    box-shadow: inset 0 2px 0 var(--bs-border-color);
}

.leitura-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 0 12px;
    flex-shrink: 0;
}

/* ── Recibos — layout com grid scrollável ────────────────────── */
.wb-main--recibo {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--kt-topbar-height) - var(--kt-tabbar-height));
    overflow: hidden;
    padding-bottom: 0;
}
body.bare-mode .wb-main--recibo {
    height: 100vh;
}
.recibo-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.recibo-table-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.recibo-table-card .card-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}
.recibo-table-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(128,128,128,.3) transparent;
}
/* Dentro do layout flex do recibo, o filtro não precisa ser sticky */
.wb-main--recibo .wb-filter-sticky {
    position: relative;
    top: 0;
}

@media (max-width: 768px) {
    .wb-layout { flex-direction: column; }
    .wb-nav {
        width: 100% !important;
        border-right: none;
        border-bottom: 1px solid var(--kt-wb-nav-border);
        position: static;
        height: auto;
        overflow-y: visible;
    }
    .wb-nav--collapsed { width: 100% !important; }
    .wb-nav-list { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; }
    .wb-nav-section { display: none; }
    .wb-nav-link { padding: 5px 10px; font-size: var(--fs-xs); }
    .wb-nav-toggle { display: none; }
}

/* ================================================================
   FOCO VISIVEL - controles proprios que nao tem indicador nativo
   (usam border:none/background:none, apagando o outline do browser).
   Escopo deliberadamente restrito: .btn, .form-control e .form-select
   ja recebem o anel de foco do Bootstrap.
   ================================================================ */
.kt-tab:focus-visible,
.kt-tab-close:focus-visible,
.wb-nav-toggle:focus-visible,
.wb-nav-link:focus-visible,
.topbar-sidebar-toggle:focus-visible,
.topbar-toggle:focus-visible,
.topbar-wb-picker:focus-visible,
.theme-toggle:focus-visible,
.wb-picker-item:focus-visible,
.sidebar-nav a:focus-visible,
.nav-anchor:focus-visible {
    outline: 2px solid var(--kt-accent);
    outline-offset: -2px;
}

[data-bs-theme="dark"] .kt-tab:focus-visible,
[data-bs-theme="dark"] .kt-tab-close:focus-visible,
[data-bs-theme="dark"] .wb-nav-toggle:focus-visible,
[data-bs-theme="dark"] .wb-nav-link:focus-visible,
[data-bs-theme="dark"] .topbar-sidebar-toggle:focus-visible,
[data-bs-theme="dark"] .topbar-toggle:focus-visible,
[data-bs-theme="dark"] .topbar-wb-picker:focus-visible,
[data-bs-theme="dark"] .theme-toggle:focus-visible,
[data-bs-theme="dark"] .wb-picker-item:focus-visible,
[data-bs-theme="dark"] .sidebar-nav a:focus-visible,
[data-bs-theme="dark"] .nav-anchor:focus-visible {
    outline-color: var(--kt-accent-light);
}

/* ================================================================
   PAGINA DE ALTURA FIXA - cabecalho e filtros parados, so a grade rola.
   Ative com @section('content-class', 'page-content--fill') na view e
   marque o cartao que contem a grade com .kt-grid-card.

   Sem isso a grade usa o max-height de .kt-table-scroll, que reserva uma
   folga FIXA de 220px para tudo que vem acima. Quando o topo da pagina
   passa disso (page-header + filtros + card-header), o fim do container
   cai abaixo da dobra e o rodape de totais sai da tela.
   ================================================================ */
.page-content--fill {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Em bare mode (pagina dentro de aba/iframe) .page-content ja e flex:1 com
   min-height:0, entao a altura vem do proprio fluxo. */
body.bare-mode .page-content--fill {
    height: auto;
    overflow: hidden;
}

.page-content--fill .kt-grid-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.page-content--fill .kt-grid-card > .card-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Dentro da pagina de altura fixa a grade ocupa a sobra, sem teto fixo. */
.page-content--fill .kt-table-scroll {
    flex: 1;
    min-height: 0;
    max-height: none;
}

/* ================================================================
   FAIXA DE TOTAIS - fora do container de scroll
   position:sticky fixa o rodape mas NAO reserva espaco: as linhas passam
   por tras dele. Para os totais nao cobrirem a grade, eles ficam num
   .card-footer proprio, fora de .kt-table-scroll, e as larguras das
   colunas sao copiadas do cabecalho por JS (sincronizarTotais).
   ================================================================ */
.kt-totais-table {
    table-layout: fixed;
}

.kt-totais-table > tbody > tr > td {
    border-top: 0;
}

.page-content--fill .kt-grid-card > .card-footer {
    flex-shrink: 0;
}

/* A paginacao e irma do .card-body, nao um .card-footer: sem isto ela
   encolheria junto com a grade em vez de ficar ancorada no rodape. */
.page-content--fill .kt-grid-card > .kt-table-pagination {
    flex-shrink: 0;
}

/* ================================================================
   SOBREPOSICAO DE PROCESSAMENTO
   Cobre a viewport enquanto um POST longo corre. Dentro de uma aba a
   viewport e o proprio iframe, entao o bloqueio vale so para aquela
   aba: as demais seguem utilizaveis, que e o comportamento desejado.
   Ver resources/views/components/busy-overlay.blade.php.
   ================================================================ */
.kt-busy {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 22, 26, 0.55);
    backdrop-filter: blur(2px);
    cursor: progress;
}

/* O atributo hidden nao vence display:flex; precisa ser explicito. */
.kt-busy[hidden] {
    display: none;
}

.kt-busy-card {
    max-width: 340px;
    padding: 26px 32px;
    text-align: center;
    border-radius: 12px;
    background: var(--kt-card-bg);
    border: 1px solid var(--kt-tab-border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

/* O anel gira e a lupa gira ao contrario, ficando parada. */
.kt-busy-ring {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    border: 3px solid var(--kt-tab-border);
    border-top-color: var(--kt-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: kt-busy-spin 0.9s linear infinite;
}

.kt-busy-ring i {
    font-size: var(--ico-lg);
    color: var(--kt-accent);
    animation: kt-busy-spin 0.9s linear infinite reverse;
}

.kt-busy-title {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--bs-body-color);
}

.kt-busy-sub {
    margin-top: 4px;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--bs-secondary-color);
}

@keyframes kt-busy-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .kt-busy-ring,
    .kt-busy-ring i {
        animation: none;
    }
}

/* ================================================================
   DASHBOARD - faixa de boas-vindas
   Saudacao a esquerda, data e hora da carga a direita.
   ================================================================ */
.kt-dash-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: var(--kt-hero-bg);
    border: 1px solid var(--kt-tab-border);
}

.kt-dash-hero-titulo {
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-body-color);
}

.kt-dash-hero-sub {
    margin-top: 2px;
    font-size: var(--fs-sm);
    color: var(--bs-secondary-color);
}

.kt-dash-hero-data {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--bs-body-color);
    white-space: nowrap;
}

.kt-dash-hero-data i {
    font-size: var(--ico-lg);
    color: var(--kt-primary);
}

.kt-dash-hero-atualizacao {
    margin-top: 2px;
    font-size: var(--fs-2xs);
    color: var(--bs-secondary-color);
    text-align: right;
}

/* ================================================================
   GRADE DE DADOS - zebra, faixa de estado e rodape de totais
   Marque a <table> com .kt-grid e o container rolavel com
   .kt-grid-scroll.

   Zebra e selecao NAO pintam background direto: no Bootstrap 5.3 a cor
   da celula sai de um box-shadow interno alimentado por
   --bs-table-bg-type (zebra/selecao) e --bs-table-bg-state (hover).
   Usando bg-type para os dois, o hover continua ganhando de ambos em
   vez de ser cancelado - que e o que acontece ao pintar background.
   ================================================================ */
/* Um tamanho para a grade inteira. Antes cada coluna trazia o seu proprio
   font-size em rem solto (1rem / 0.82rem / 0.78rem na mesma linha), e a
   diferenca de 22% entre vizinhas era lida como troca de fonte, nao de
   corpo. Se uma coluna precisar de destaque, use peso ou cor - nao tamanho. */
.kt-grid { font-size: var(--fs-base); }

/* Coluna que encolhe ate o proprio conteudo. Numa tabela de layout
   automatico, width:1% e lido como "o minimo possivel", entao toda a
   sobra de largura vai para a unica coluna sem a classe - no caso, Nome,
   que e a que de fato precisa. Sem isso o navegador reparte a folga
   proporcionalmente e colunas de tamanho fixo, como o nosso numero de 17
   digitos, ficam com o dobro da largura que usam. */
.kt-grid .kt-col-fit {
    width: 1%;
    white-space: nowrap;
}

/* Coluna de identificador colada na de valor: Valor alinha a direita e o
   proximo campo comeca a esquerda, entao sem esta calha os dois numeros
   encostam e viram um so. */
.kt-grid > tbody > tr > .td-nosso,
.kt-grid > thead > tr > .th-nosso {
    padding-left: 16px;
}

.kt-grid > tbody > tr:nth-of-type(even) > * {
    --bs-table-bg-type: var(--kt-grid-zebra);
}

/* A segunda regra existe so para bater a especificidade do :nth-of-type
   e valer tambem nas linhas pares. */
.kt-grid > tbody > tr.kt-row-sel > *,
.kt-grid > tbody > tr.kt-row-sel:nth-of-type(even) > * {
    --bs-table-bg-type: var(--kt-grid-sel);
}

/* Faixa de estado: repete na borda esquerda a situacao que a ultima
   coluna escreve, para achar os pendentes sem atravessar a linha. E so
   atalho visual - a coluna Situacao continua no markup, porque cor
   sozinha nao e informacao acessivel.

   A chave e o data-situacao que renderTabela() ja grava na <tr>: 2 =
   registrado, 3 = cancelado, qualquer outro = pendente. */
.kt-grid > tbody > tr > td:first-child {
    border-left: 3px solid transparent;
}

.kt-grid > tbody > tr[data-situacao="2"] > td:first-child {
    border-left-color: var(--kt-grid-ok);
}

.kt-grid > tbody > tr[data-situacao="3"] > td:first-child {
    border-left-color: var(--kt-grid-off);
}

.kt-grid > tbody > tr[data-situacao]:not([data-situacao="2"]):not([data-situacao="3"]) > td:first-child {
    border-left-color: var(--kt-grid-wait);
}

/* Rodape de totais dentro da propria tabela: a coluna de valor alinha
   com a das linhas sem precisar sincronizar largura por JS, como faz a
   .kt-totais-table. */
.kt-grid > tfoot > tr > td {
    font-weight: 600;
    border-top: 2px solid var(--bs-border-color);
}

.kt-grid > tfoot > tr + tr > td {
    border-top: 0;
    padding-top: 0;
}

.kt-grid > tfoot .kt-tot-rotulo {
    font-size: var(--fs-2xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.kt-grid > tfoot .kt-tot-sel td,
.kt-grid > tfoot .kt-tot-sel .kt-tot-rotulo {
    color: var(--kt-accent);
}

/* Contraparte do cabecalho fixo. Sem max-height: a altura deste
   container vem do flex da propria pagina. */
.kt-grid-scroll tfoot {
    position: sticky;
    bottom: 0;
    z-index: 3;
}

/* ================================================================
   CHIP DE ESTADO e CAMPO DE CATEGORIA

   Os badges do Bootstrap misturavam a cor da marca (bg-primary, 18% de
   saturacao) com quatro cores de fabrica nao ajustadas a paleta -
   bg-warning tem 100% e bg-secondary tem 7%. Na mesma coluna, o ambar
   gritava e o ardosia sumia: era isso que fazia umas parecerem apagadas
   e o conjunto parecer irregular.

   Aqui todo chip tem a mesma construcao - tinta clara do proprio matiz
   com o texto saturado por cima - entao o peso e identico e a cor
   continua legivel. Contraste medido: 4.7 a 5.3:1 nos dois temas.
   ================================================================ */
.kt-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.kt-chip--ok   { color: var(--kt-grid-ok);   background: var(--kt-grid-ok-bg); }
.kt-chip--wait { color: var(--kt-grid-wait); background: var(--kt-grid-wait-bg); }
.kt-chip--off  { color: var(--kt-grid-off);  background: var(--kt-grid-off-bg); }
.kt-chip--erro { color: var(--kt-grid-erro); background: var(--kt-grid-erro-bg); }
.kt-chip--info { color: var(--kt-grid-info); background: var(--kt-grid-info-bg); }

/* Contadores ao lado de um titulo ("Condominos 32") sao chip tambem,
   mas dentro de texto corrido: sem o alinhamento eles empurram a linha
   de base do cabecalho. */
h1 > .kt-chip, h2 > .kt-chip, h3 > .kt-chip,
h4 > .kt-chip, h5 > .kt-chip, h6 > .kt-chip {
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Destino nao e estado: E-mail nao e melhor nem pior que Edificio. Quatro
   cores ali competiam com a coluna Situacao, que e a unica da linha onde
   a cor carrega significado. Texto discreto com icone basta para
   distinguir, e devolve a atencao para o estado. */
.kt-destino {
    color: var(--bs-secondary-color);
    font-size: var(--fs-sm);
    white-space: nowrap;
}

.kt-destino i {
    margin-right: 5px;
    opacity: 0.7;
}

/* ================================================================
   BOTAO EXTRA-PEQUENO

   .btn-xs e usada em 42 botoes de acao de linha (editar, remover,
   baixar) mas nao existe: o Bootstrap 5 removeu a classe e ela nunca
   foi redefinida aqui. Em 38 desses casos ela aparece sozinha, entao o
   botao vinha renderizando no tamanho MEDIO - bem maior do que o
   autor pretendia, e maior que a propria linha da grade.

   Definir a classe conserta os 42 de uma vez e preserva a intencao;
   trocar tudo por .btn-sm mudaria a altura das linhas em varias telas.
   ================================================================ */
/* ================================================================
   ROTULO DE FORMULARIO PEQUENO

   Mesma historia do .btn-xs: .form-label-sm nao existe no Bootstrap 5
   nem foi definida aqui, e mesmo assim aparece em 13 views. Nessas
   telas o rotulo vinha do tamanho e do peso normais, enquanto as
   outras 35 usam 'form-label small fw-semibold' - dai a sensacao de
   que algumas telas estao fora do padrao.

   Definir a classe alinha as 13 de uma vez, com o mesmo resultado
   visual do par small + fw-semibold.
   ================================================================ */
.form-label-sm {
    font-size: 0.875em;
    font-weight: 600;
}

.btn-xs {
    --bs-btn-padding-y: 0.1rem;
    --bs-btn-padding-x: 0.35rem;
    --bs-btn-font-size: var(--fs-2xs);
    --bs-btn-border-radius: 4px;
    line-height: 1.35;
}

/* ================================================================
   ACOES DA LINHA

   Os tres pontos dispensam borda e dispensam o caret do
   .dropdown-toggle: eram dois indicadores para a mesma coisa, e a
   borda permanente de cada linha pesava a coluna inteira. O contorno
   aparece no hover e enquanto o menu esta aberto.

   O alvo tem 26px para continuar clicavel sem a borda - abaixo disso
   o acerto do mouse fica dificil numa grade densa.
   ================================================================ */
.kt-acoes {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.kt-acao {
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
    line-height: 1;
    transition: background-color .12s, color .12s, border-color .12s;
}

.kt-acao:hover,
.kt-acao[aria-expanded="true"] {
    background-color: rgba(var(--bs-body-color-rgb), 0.08);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.kt-acao:focus-visible {
    outline: 2px solid var(--kt-accent);
    outline-offset: 1px;
}

/* O caret viria do .dropdown-toggle; aqui nao ha classe, mas a regra
   fica como rede de seguranca se alguem reintroduzi-la. */
.kt-acoes-toggle::after {
    display: none;
}

/* ================================================================
   SELETOR DE EDIFICIO

   Numero, nome e acoes num unico campo, para o seletor ter a mesma
   altura e a mesma borda dos selects vizinhos e acompanhar a largura
   da coluna. Antes eram uma caixa de 140px cravados mais um texto
   solto ao lado, sem contorno - vazio, a linha parecia quebrada.

   O texto de vazio vem por ::before, e nao dentro do span: quatro
   views leem ep_*_nome.textContent esperando string vazia quando nada
   esta selecionado (a linha-resumo da Emissao de Boletos monta a
   partir disso). Placeholder como conteudo real quebraria as quatro.
   ================================================================ */
.kt-ep {
    display: flex;
    height: 38px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius, 6px);
    overflow: hidden;
    background: var(--bs-body-bg);
    transition: border-color 0.12s, box-shadow 0.12s;
}

/* O foco acende o grupo inteiro, como acontece nos selects ao lado. */
.kt-ep:focus-within {
    border-color: var(--kt-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.kt-ep--erro { border-color: var(--bs-danger); }

.kt-ep-num {
    width: 78px;
    flex-shrink: 0;
    border: none;
    border-right: 1px solid var(--bs-border-color);
    outline: none;
    background: transparent;
    color: var(--bs-body-color);
    padding: 6px 10px;
    /* E um codigo, nao um texto: monoespacado alinha entre linhas e
       separa 1 de 7. */
    font-family: var(--bs-font-monospace);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.kt-ep-nome {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 11px;
    background: var(--bs-secondary-bg);
    font-size: var(--fs-base);
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kt-ep-nome:empty::before {
    content: 'nenhum edifício selecionado';
    color: var(--bs-secondary-color);
    font-style: italic;
}

.kt-ep-btn {
    flex-shrink: 0;
    width: 38px;
    border: none;
    border-left: 1px solid var(--bs-border-color);
    background: transparent;
    color: var(--bs-secondary-color);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: var(--ico-md);
    transition: background 0.12s, color 0.12s;
}

.kt-ep-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-body-color);
}

.kt-ep-btn:focus-visible {
    outline: 2px solid var(--kt-accent);
    outline-offset: -2px;
}

.kt-ep-btn[hidden] { display: none; }

/* Variante compacta. Substitui o .edificio-picker-sm que estava
   copiado em quatro views. */
.kt-ep--sm { height: 31px; }
.kt-ep--sm .kt-ep-num  { width: 66px; font-size: var(--fs-xs); padding: 4px 8px; }
.kt-ep--sm .kt-ep-nome { font-size: var(--fs-sm); padding: 0 9px; }
.kt-ep--sm .kt-ep-btn  { width: 31px; font-size: var(--ico-sm); }

/* ================================================================
   QUEBRA DE GRUPO EM GRADE

   O fundo vai na CÉLULA, nunca na linha. O Bootstrap 5.3 pinta
   `background-color: var(--bs-table-bg)` em `.table > * > * > *`, e
   isso cobre qualquer cor posta na <tr> — era por isso que a faixa de
   condômino na Manutenção de Recibos aparecia sem fundo nenhum,
   sobrando um texto de 12px em cinza claro.

   A cor vem de token: a versão anterior cravava #edf0f3, que além de
   invisível estaria errada no tema escuro.
   ================================================================ */
.kt-grid tr.kt-grupo > td,
.table tr.kt-grupo > td {
    background-color: var(--kt-grupo-bg);
    padding: 9px 11px;
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.kt-grupo-linha {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

/* A unidade é um código: monoespaçada alinha entre os grupos. */
.kt-grupo-un {
    font-family: var(--bs-font-monospace);
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 4px;
    background: rgba(var(--bs-primary-rgb), 0.14);
    white-space: nowrap;
}

.kt-grupo-nome {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--bs-body-color);
}

.kt-grupo-resumo {
    margin-left: auto;
    font-size: var(--fs-sm);
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.kt-grupo-resumo b {
    color: var(--bs-body-color);
    font-variant-numeric: tabular-nums;
}