/*
|--------------------------------------------------------------------------
| Central Estratégica de Gestão — tema visual (identidade CHIP7)
|--------------------------------------------------------------------------
| Overrides SEGUROS sobre as classes públicas .fi-* do Filament v3.
| Identidade da marca Chip7 (extraída do logo/site chip7.net.br):
|   azul       #1070B0  (cor primária)
|   azul-escuro#0B3B5E  (sidebar)
|   verde      #0AC775  (acento / sucesso)
|
| Sidebar: azul-escuro Chip7 com acento verde no item ativo.
| Login: fundo claro com leve brilho da marca + logo Chip7.
| Regras de sidebar restritas ao light mode (html:not(.dark)); no dark mode
| o Filament já usa a própria paleta escura legível.
*/

:root {
    --chip7-azul: #1070B0;
    --chip7-azul-escuro: #0B3B5E;
    --chip7-verde: #0AC775;
    --chip7-verde-claro: #3BD98D;
    --chip7-texto-claro: #D3E3F1;
    --chip7-icone-claro: #9DBDD8;
    --chip7-label-grupo: #7BA3C3;
}

/* ============================ SIDEBAR ============================ */

/* 1) Fundo da sidebar em azul-escuro Chip7. */
html:not(.dark) .fi-sidebar {
    background-color: var(--chip7-azul-escuro);
}

/* 2) Header da marca: mesmo azul, separado por um fio verde sutil. */
html:not(.dark) .fi-sidebar-header {
    background-color: var(--chip7-azul-escuro);
    box-shadow: none;
    border-bottom: 1px solid rgb(10 199 117 / 0.35); /* verde translúcido */
}

/* Nome da marca (brandName em texto) branco sobre o azul da sidebar. */
html:not(.dark) .fi-sidebar-header .fi-logo {
    color: #ffffff;
}

/* Botões de ícone da sidebar. */
html:not(.dark) .fi-sidebar .fi-icon-btn {
    color: var(--chip7-icone-claro);
}
html:not(.dark) .fi-sidebar .fi-icon-btn:hover {
    color: #ffffff;
}

/* 3) Grupos de navegação. */
html:not(.dark) .fi-sidebar-group-label {
    color: var(--chip7-label-grupo);
}
html:not(.dark) .fi-sidebar-group-icon,
html:not(.dark) .fi-sidebar-group-collapse-button {
    color: var(--chip7-icone-claro);
}

/* 4) Itens de navegação (normal). */
html:not(.dark) .fi-sidebar-item-button .fi-sidebar-item-label {
    color: var(--chip7-texto-claro);
}
html:not(.dark) .fi-sidebar-item-button .fi-sidebar-item-icon {
    color: var(--chip7-icone-claro);
}
html:not(.dark) .fi-sidebar-item-grouped-border > div {
    background-color: rgb(255 255 255 / 0.25);
}

/* 5) Hover/focus sutil. */
html:not(.dark) .fi-sidebar-item-button:hover,
html:not(.dark) .fi-sidebar-item-button:focus-visible {
    background-color: rgb(255 255 255 / 0.06);
}
html:not(.dark) .fi-sidebar-item-button:hover .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item-button:focus-visible .fi-sidebar-item-label {
    color: #ffffff;
}
html:not(.dark) .fi-sidebar-item-button:hover .fi-sidebar-item-icon,
html:not(.dark) .fi-sidebar-item-button:focus-visible .fi-sidebar-item-icon {
    color: var(--chip7-texto-claro);
}

/* 6) Item ATIVO: acento VERDE Chip7. */
html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
html:not(.dark) .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button {
    background-color: rgb(10 199 117 / 0.16); /* verde translúcido */
    box-shadow: inset 3px 0 0 0 var(--chip7-verde);
}
html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-label {
    color: var(--chip7-verde-claro);
}
html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
html:not(.dark) .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-icon {
    color: var(--chip7-verde-claro);
}

/* 6b) Item ATIVO no ESCURO: mesmo acento VERDE. Sem isto o Filament usa a cor
   primária (azul) no escuro — a estilização verde da sidebar acima é só do tema
   claro (html:not(.dark)). Assim o acento do menu fica verde nos dois temas. */
html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
html.dark .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button {
    background-color: rgb(10 199 117 / 0.14); /* verde translúcido */
    box-shadow: inset 3px 0 0 0 var(--chip7-verde);
}
html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label,
html.dark .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-label,
html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
html.dark .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-icon {
    color: var(--chip7-verde-claro);
}

/* ===================== VIEW DO CLIENTE (layout responsivo) ===================== */
/* Layout definido aqui porque as variantes lg:/md: de grid/flex/align não
   estão todas no CSS compilado do Filament (só as que o próprio Filament usa). */

/* Oculta o H1 grande "{nome}" APENAS na tela de visualização do cliente — o
   nome já aparece em destaque no card do cabeçalho. Mantém o breadcrumb
   (voltar), que fica no mesmo bloco, visível. */
.fi-resource-view-record-page.fi-resource-clientes .fi-header-heading {
    display: none;
}

/* Reduz o espaço vazio entre o breadcrumb e o card (o H1 oculto deixava um
   vão grande, dimensionado para um título que não existe mais). */
.fi-resource-view-record-page.fi-resource-clientes > section {
    gap: 0.5rem;
}

/* Avatar: quadrado de tamanho fixo (as classes h-14/w-14 não existem no CSS
   compilado do Filament — sem isto o quadrado colapsa numa barra). Serve tanto
   para a logo (img, object-cover) quanto para o placeholder com ícone. */
.cliente-avatar {
    flex-shrink: 0;
    align-self: flex-start;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    overflow: hidden;
    object-fit: cover;
}
.cliente-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255 255 255 / 0.9);
}

/* Cabeçalho: empilhado no mobile; identificação à esquerda e KPIs à direita no desktop. */
.cliente-header {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .cliente-header {
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
    }
    .cliente-header-kpis {
        justify-content: flex-end;
        text-align: right;
    }
}

/* Lado direito do cabeçalho: Editar no topo, KPIs mais embaixo (space-between). */
.cliente-header-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 1024px) {
    .cliente-header-right {
        align-items: flex-end;
        justify-content: space-between;
    }
}

/* Botão "Editar" do card: azul sólido da marca com texto branco — legível
   em light e dark sem depender de override dark: (que nem sempre está no CSS
   compilado do Filament). */
.cliente-btn-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: #1070B0;
    color: #ffffff;
    transition: background-color 0.15s ease;
}
.cliente-btn-edit:hover {
    background-color: #0D5F96;
}

/* Visão geral: 1 coluna no mobile, 2 colunas no desktop. */
.cliente-visao-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .cliente-visao-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* ===================== VIEW DO CONTRATO (cabeçalho premium) ===================== */
/* Mesmo padrão da View do Cliente: card com cabeçalho (avatar + título + badge
   de situação), KPIs à direita e uma faixa de detalhes. Layout aqui porque as
   variantes lg: de flex/grid não estão todas no CSS compilado do Filament. */
.fi-resource-view-record-page.fi-resource-contratos .fi-header-heading { display: none; }
.fi-resource-view-record-page.fi-resource-contratos > section { gap: 0.5rem; }

.contrato-avatar {
    flex-shrink: 0;
    align-self: flex-start;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255 255 255 / 0.92);
}

.contrato-header {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .contrato-header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
    .contrato-header-kpis {
        justify-content: flex-end;
        text-align: right;
    }
}

.contrato-detalhes-wrap {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}
html.dark .contrato-detalhes-wrap { border-top-color: rgba(255, 255, 255, 0.08); }

.contrato-detalhes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem 1.5rem;
}
.contrato-det-rot {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: #9CA3AF;
}
.contrato-det-val {
    margin-top: 0.15rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #374151;
}
html.dark .contrato-det-val { color: #E5E7EB; }

/* ===================== DRE GERENCIAL (matriz 12 meses) ===================== */
/* Fonte pequena e tabular para caber os 12 meses + acumulado em colunas.
   Definido aqui (não via classes text-[11px]/tabular-nums no blade) porque
   valores arbitrários do Tailwind não existem no CSS compilado do Filament. */
.dre-tabela {
    font-size: 0.6875rem;                 /* 11px */
    font-variant-numeric: tabular-nums;
    line-height: 1.1rem;
}
.dre-tabela thead th {
    font-size: 0.625rem;                  /* 10px */
}

/* ================= TABELAS: CÉLULAS MAIS COMPACTAS ================= */
/* Padding horizontal das células reduzido (px-3 → 0.5rem) para as listas
   caberem na largura da tela sem scroll horizontal, somando-se às colunas
   secundárias ocultas por padrão nos Resources. */

.fi-ta-table .px-3 {
    padding-inline: 0.5rem;
}

/* Fonte 13px (padrão 14px) nas células e cabeçalhos: leitura densa e mais
   colunas visíveis, sem perder legibilidade. Badges acompanham. */
.fi-ta-table .fi-ta-text-item-label,
.fi-ta-table .fi-ta-header-cell-label,
.fi-ta-table td .fi-badge,
.fi-ta-table .fi-ta-text {
    font-size: 0.8125rem;
    line-height: 1.15rem;
}

/* Linhas mais baixas: padding vertical das células py-4 (1rem) → 0.5rem. */
.fi-ta-table td .py-4,
.fi-ta-table td .py-3 {
    padding-block: 0.5rem;
}

/* =================== SIDEBAR COMPACTA + SEM SCROLLBAR =================== */
/* O menu completo (19 itens + grupos) deve caber na altura da tela sem
   precisar rolar: espaçamentos do Filament reduzidos (gap-y-7/py-8 são
   largos demais) e scrollbar escondida (a rolagem por roda do mouse
   continua funcionando como reserva em telas muito baixas). */

.fi-sidebar-nav {
    padding-block: 0.5rem;       /* padrão py-8 (2rem) */
    row-gap: 0.375rem;           /* padrão gap-y-7 (1.75rem) */
    scrollbar-width: none;       /* Firefox */
}
.fi-sidebar-nav::-webkit-scrollbar {
    display: none;               /* Chrome/Edge */
}
.fi-sidebar-nav-groups {
    row-gap: 0.375rem;           /* padrão gap-y-7 (1.75rem) */
}
.fi-sidebar-item-button {
    padding-block: 0.25rem;      /* padrão py-2 (0.5rem) */
}
.fi-sidebar-group-button {
    padding-block: 0.25rem;      /* padrão py-2 (0.5rem) */
}
.fi-sidebar-group-items {
    row-gap: 0.125rem;           /* padrão gap-y-1 (0.25rem) */
}
.fi-sidebar-item-icon,
.fi-sidebar-group-icon {
    height: 1.25rem;             /* padrão h-6 (1.5rem) */
    width: 1.25rem;
}

/* Ícones do menu na MESMA posição horizontal no modo recolhido e expandido:
   o padrão do Filament CENTRALIZA o ícone quando recolhido (justify-center),
   fazendo o ícone "pular" ~8px ao expandir. Alinhando à esquerda nos dois
   estados, o ícone fica fixo e alinhado com o seu rótulo. (Só nos itens; os
   cabeçalhos de grupo mantêm o layout padrão do chevron.) */
.fi-sidebar-item-button {
    justify-content: flex-start;
}

/* Deslocamento VERTICAL ao expandir: como os grupos não têm ícone, o Filament
   OCULTA o cabeçalho de grupo no modo recolhido (x-show → display:none),
   fazendo os itens subirem; ao expandir/peek, os rótulos reaparecem e empurram
   os ícones para baixo. Aqui reservamos APENAS A ALTURA do cabeçalho no modo
   recolhido (conteúdo escondido, para não alargar a barra estreita), mantendo
   os ícones exatamente na mesma posição vertical dos dois estados. */
aside.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-button {
    position: relative;
    display: flex !important;
    align-items: center;
    height: 2rem;               /* mesma altura do cabeçalho expandido */
}
aside.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-button > * {
    display: none !important;   /* esconde rótulo/chevron — sem contribuir largura */
}

/* Chip de realce (fundo arredondado) atrás do ícone da categoria. */
aside.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group[data-group-label] .fi-sidebar-group-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.25rem;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background-color: rgb(255 255 255 / 0.1);
}

/* Ícone da categoria (máscara SVG sólida) sobre o chip, alinhado com os itens. */
aside.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group[data-group-label] .fi-sidebar-group-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.5rem;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--chip7-texto-claro, #D3E3F1);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
/* ↓ ícones por categoria (gerados dos heroicons) ↓ */
aside.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group[data-group-label="Serviços"] .fi-sidebar-group-button::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true' data-slot='icon'%3E %3Cpath fill-rule='evenodd' d='M7.5 5.25a3 3 0 0 1 3-3h3a3 3 0 0 1 3 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0 1 12 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 0 1 7.5 5.455V5.25Zm7.5 0v.09a49.488 49.488 0 0 0-6 0v-.09a1.5 1.5 0 0 1 1.5-1.5h3a1.5 1.5 0 0 1 1.5 1.5Zm-3 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z' clip-rule='evenodd'/%3E %3Cpath d='M3 18.4v-2.796a4.3 4.3 0 0 0 .713.31A26.226 26.226 0 0 0 12 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 0 1-6.477-.427C4.047 21.128 3 19.852 3 18.4Z'/%3E %3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true' data-slot='icon'%3E %3Cpath fill-rule='evenodd' d='M7.5 5.25a3 3 0 0 1 3-3h3a3 3 0 0 1 3 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0 1 12 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 0 1 7.5 5.455V5.25Zm7.5 0v.09a49.488 49.488 0 0 0-6 0v-.09a1.5 1.5 0 0 1 1.5-1.5h3a1.5 1.5 0 0 1 1.5 1.5Zm-3 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z' clip-rule='evenodd'/%3E %3Cpath d='M3 18.4v-2.796a4.3 4.3 0 0 0 .713.31A26.226 26.226 0 0 0 12 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 0 1-6.477-.427C4.047 21.128 3 19.852 3 18.4Z'/%3E %3C/svg%3E");
}
aside.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group[data-group-label="Relacionamento"] .fi-sidebar-group-button::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true' data-slot='icon'%3E %3Cpath d='M4.5 6.375a4.125 4.125 0 1 1 8.25 0 4.125 4.125 0 0 1-8.25 0ZM14.25 8.625a3.375 3.375 0 1 1 6.75 0 3.375 3.375 0 0 1-6.75 0ZM1.5 19.125a7.125 7.125 0 0 1 14.25 0v.003l-.001.119a.75.75 0 0 1-.363.63 13.067 13.067 0 0 1-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 0 1-.364-.63l-.001-.122ZM17.25 19.128l-.001.144a2.25 2.25 0 0 1-.233.96 10.088 10.088 0 0 0 5.06-1.01.75.75 0 0 0 .42-.643 4.875 4.875 0 0 0-6.957-4.611 8.586 8.586 0 0 1 1.71 5.157v.003Z'/%3E %3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true' data-slot='icon'%3E %3Cpath d='M4.5 6.375a4.125 4.125 0 1 1 8.25 0 4.125 4.125 0 0 1-8.25 0ZM14.25 8.625a3.375 3.375 0 1 1 6.75 0 3.375 3.375 0 0 1-6.75 0ZM1.5 19.125a7.125 7.125 0 0 1 14.25 0v.003l-.001.119a.75.75 0 0 1-.363.63 13.067 13.067 0 0 1-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 0 1-.364-.63l-.001-.122ZM17.25 19.128l-.001.144a2.25 2.25 0 0 1-.233.96 10.088 10.088 0 0 0 5.06-1.01.75.75 0 0 0 .42-.643 4.875 4.875 0 0 0-6.957-4.611 8.586 8.586 0 0 1 1.71 5.157v.003Z'/%3E %3C/svg%3E");
}
aside.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group[data-group-label="Financeiro"] .fi-sidebar-group-button::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true' data-slot='icon'%3E %3Cpath d='M12 7.5a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z'/%3E %3Cpath fill-rule='evenodd' d='M1.5 4.875C1.5 3.839 2.34 3 3.375 3h17.25c1.035 0 1.875.84 1.875 1.875v9.75c0 1.036-.84 1.875-1.875 1.875H3.375A1.875 1.875 0 0 1 1.5 14.625v-9.75ZM8.25 9.75a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0ZM18.75 9a.75.75 0 0 0-.75.75v.008c0 .414.336.75.75.75h.008a.75.75 0 0 0 .75-.75V9.75a.75.75 0 0 0-.75-.75h-.008ZM4.5 9.75A.75.75 0 0 1 5.25 9h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75H5.25a.75.75 0 0 1-.75-.75V9.75Z' clip-rule='evenodd'/%3E %3Cpath d='M2.25 18a.75.75 0 0 0 0 1.5c5.4 0 10.63.722 15.6 2.075 1.19.324 2.4-.558 2.4-1.82V18.75a.75.75 0 0 0-.75-.75H2.25Z'/%3E %3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true' data-slot='icon'%3E %3Cpath d='M12 7.5a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z'/%3E %3Cpath fill-rule='evenodd' d='M1.5 4.875C1.5 3.839 2.34 3 3.375 3h17.25c1.035 0 1.875.84 1.875 1.875v9.75c0 1.036-.84 1.875-1.875 1.875H3.375A1.875 1.875 0 0 1 1.5 14.625v-9.75ZM8.25 9.75a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0ZM18.75 9a.75.75 0 0 0-.75.75v.008c0 .414.336.75.75.75h.008a.75.75 0 0 0 .75-.75V9.75a.75.75 0 0 0-.75-.75h-.008ZM4.5 9.75A.75.75 0 0 1 5.25 9h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75H5.25a.75.75 0 0 1-.75-.75V9.75Z' clip-rule='evenodd'/%3E %3Cpath d='M2.25 18a.75.75 0 0 0 0 1.5c5.4 0 10.63.722 15.6 2.075 1.19.324 2.4-.558 2.4-1.82V18.75a.75.75 0 0 0-.75-.75H2.25Z'/%3E %3C/svg%3E");
}
aside.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group[data-group-label="Contratos"] .fi-sidebar-group-button::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true' data-slot='icon'%3E %3Cpath fill-rule='evenodd' d='M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z' clip-rule='evenodd'/%3E %3Cpath d='M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z'/%3E %3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true' data-slot='icon'%3E %3Cpath fill-rule='evenodd' d='M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z' clip-rule='evenodd'/%3E %3Cpath d='M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z'/%3E %3C/svg%3E");
}
aside.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group[data-group-label="Configurações"] .fi-sidebar-group-button::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true' data-slot='icon'%3E %3Cpath fill-rule='evenodd' d='M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 0 0-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 0 0-2.282.819l-.922 1.597a1.875 1.875 0 0 0 .432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 0 0 0 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 0 0-.432 2.385l.922 1.597a1.875 1.875 0 0 0 2.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 0 0 2.28-.819l.923-1.597a1.875 1.875 0 0 0-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 0 0 0-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 0 0-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 0 0-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 0 0-1.85-1.567h-1.843ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z' clip-rule='evenodd'/%3E %3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true' data-slot='icon'%3E %3Cpath fill-rule='evenodd' d='M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 0 0-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 0 0-2.282.819l-.922 1.597a1.875 1.875 0 0 0 .432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 0 0 0 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 0 0-.432 2.385l.922 1.597a1.875 1.875 0 0 0 2.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 0 0 2.28-.819l.923-1.597a1.875 1.875 0 0 0-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 0 0 0-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 0 0-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 0 0-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 0 0-1.85-1.567h-1.843ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z' clip-rule='evenodd'/%3E %3C/svg%3E");
}

/* ================== SIDEBAR RETRÁTIL (espiada + pin) ================== */
/* Com sidebarCollapsibleOnDesktop(), o menu recolhe para só ícones. Dois modos:
   ESPIADA (hover, .chip7-sidebar-peek) = expande SOBREPOSTO ao conteúdo;
   FIXADO (pin, menu aberto sem a classe de espiada) = EMPURRA o conteúdo. */

@media (min-width: 1024px) {
    /* No estado FIXADO (aberto, sem espiada) a sidebar fica `sticky` em fluxo,
       então o layout flex do Filament já coloca o conteúdo ao lado dela — não
       há sobreposição e nenhuma margem extra é necessária. A sobreposição
       existe SÓ na espiada, que é `fixed` (regras abaixo). */
    .fi-sidebar.chip7-sidebar-peek {
        position: fixed !important;
        z-index: 35; /* acima da topbar, abaixo de modais */
        box-shadow: 0 20px 45px -10px rgb(0 0 0 / 0.45);
    }

    /* Reserva a largura do menu recolhido para o conteúdo não "pular"
       enquanto a sidebar está fora do fluxo (fixed). A largura real é
       medida pelo js/app-theme.js (--chip7-collapsed-w); a var do
       Filament fica só como reserva. */
    .fi-layout:has(.fi-sidebar.chip7-sidebar-peek) .fi-main-ctn {
        margin-inline-start: var(--chip7-collapsed-w, var(--collapsed-sidebar-width, 4.5rem));
    }

    /* No desktop o Filament deixa a sidebar transparente (dark mode);
       sobreposta ao conteúdo ela precisa de fundo sólido. */
    html.dark .fi-sidebar.chip7-sidebar-peek {
        background-color: rgb(17 24 39); /* gray-900, tom do painel dark */
    }
}

/* Ícone de PIN no cabeçalho da sidebar (injetado por app-theme.js ao lado do
   toggle nativo). A caixa 36×36 arredondada casa com o toggle nativo (a classe
   fi-icon-btn sozinha não dimensiona — o botão nativo usa utilitárias inline);
   a cor segue a mesma regra do toggle (fi-icon-btn da sidebar). Só aparece com
   o menu expandido. O `margin-inline-start:auto` empurra o pin para a direita,
   encostando-o imediatamente à esquerda da seta de recolher (que tem o mesmo
   auto); sem isto o pin ficava colado na marca, longe da seta. */
.chip7-pin-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-inline-start: auto;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.chip7-pin-icon-btn:hover { background: rgb(0 0 0 / 0.05); }
html.dark .chip7-pin-icon-btn:hover { background: rgb(255 255 255 / 0.05); }
html:not(.dark) .fi-sidebar .chip7-pin-icon-btn:hover { background: rgb(255 255 255 / 0.10); }
/* Cor: o pin segue a seta nativa. No claro ambos herdam .fi-sidebar .fi-icon-btn;
   no escuro o Filament colore a seta por classe própria que o pin não tem, então
   igualamos aqui à cor da seta (zinc-500) e clareamos no hover como ela. */
html.dark .fi-sidebar .chip7-pin-icon-btn { color: rgb(113 113 122); }
html.dark .fi-sidebar .chip7-pin-icon-btn:hover { color: rgb(212 212 216); }
/* Com o menu aberto, zera a margem-auto da seta nativa para que só o pin
   (margin-inline-start:auto) absorva o espaço livre — assim ficam colados, o pin
   imediatamente à esquerda da seta. */
aside.fi-sidebar.fi-sidebar-open .fi-sidebar-header .fi-icon-btn:not(.chip7-pin-icon-btn) {
    margin-inline-start: 0;
}
.chip7-pin-icon-btn .chip7-pin-icon {
    /* !important porque o .fi-icon-btn svg do Filament tem a mesma peso e vem
       depois na cascata; sem isto o ícone sai maior que o do toggle nativo. */
    width: 1.35rem !important;
    height: 1.35rem !important;
    transition: transform .15s;
}
/* Escondido quando recolhido (só o toggle de expandir aparece) e no mobile. */
aside.fi-sidebar:not(.fi-sidebar-open) .chip7-pin-icon-btn {
    display: none;
}
@media (max-width: 1023px) {
    .chip7-pin-icon-btn { display: none; }
}
/* Estado FIXADO: o ícone fica "cravado" (girado 45°). A COR segue a mesma regra
   da seta de recolher (herda do fi-icon-btn da sidebar), sem destaque próprio —
   a rotação é o indicador de fixado. Durante a espiada fica reto (não fixado). */
aside.fi-sidebar.fi-sidebar-open:not(.chip7-sidebar-peek) .chip7-pin-icon-btn .chip7-pin-icon {
    transform: rotate(45deg);
}

/* ============================ LOGIN ============================ */

/* Fundo claro com leve brilho azul/verde da marca (ambos os modos). */
.fi-simple-layout {
    background-color: #F5F8FC;
    background-image:
        radial-gradient(1100px 520px at 50% -12%, rgba(16, 112, 176, 0.12), transparent 60%),
        radial-gradient(900px 520px at 92% 118%, rgba(10, 199, 117, 0.12), transparent 60%);
}

/* Fio verde sutil no topo do card, reforçando a marca. */
.fi-simple-main {
    border-top: 3px solid var(--chip7-verde);
}

/* ==================== TERMOS DO CONTRATO (infolist) ====================
   O Filament v3 NÃO compila as classes de tipografia (@tailwindcss/typography
   'prose' etc.), então o HTML dos termos é estilizado aqui, escopado sob
   .contrato-termos, para não vazar sobre o resto do painel. */
.contrato-termos {
    line-height: 1.6;
    font-size: 0.925rem;
    color: inherit;
    word-break: break-word;
}
.contrato-termos h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--chip7-azul);
    margin: 1.1em 0 0.4em;
}
.contrato-termos h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--chip7-azul-escuro);
    margin: 0.9em 0 0.35em;
}
html.dark .contrato-termos h2 { color: var(--chip7-verde-claro); }
html.dark .contrato-termos h3 { color: #cbd5e1; }
.contrato-termos p { margin: 0.5em 0; }
.contrato-termos ul,
.contrato-termos ol { margin: 0.5em 0 0.5em 1.25em; padding-left: 1em; }
.contrato-termos ul { list-style: disc; }
.contrato-termos ol { list-style: decimal; }
.contrato-termos li { margin: 0.25em 0; }
.contrato-termos a { color: var(--chip7-azul); text-decoration: underline; }
html.dark .contrato-termos a { color: var(--chip7-verde-claro); }
.contrato-termos strong { font-weight: 700; }
.contrato-termos em { font-style: italic; }
.contrato-termos blockquote {
    margin: 0.6em 0;
    padding: 0.4em 0.9em;
    border-inline-start: 3px solid var(--chip7-verde);
    background: rgba(16, 112, 176, 0.05);
    border-radius: 6px;
}
.contrato-termos-vazio { color: #94a3b8; font-style: italic; }

/* ==================== ANEXOS ASSINADOS (infolist) ==================== */
.contrato-anexos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.contrato-anexos a {
    display: inline-flex; align-items: center; gap: 0.45rem;
    color: var(--chip7-azul); font-weight: 600; text-decoration: none;
    word-break: break-word;
}
.contrato-anexos a:hover { text-decoration: underline; }
.contrato-anexos svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
html.dark .contrato-anexos a { color: var(--chip7-verde-claro); }

/* ==================== LISTAS DE CONTAS: LAYOUT + INDICADORES ==================== */
/* Tabela à esquerda, cards de resumo por status à direita (espaço sobrando). */
.contas-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.contas-principal { flex: 1 1 0%; min-width: 0; }
.contas-indicadores {
    flex: 0 0 232px;
    display: flex; flex-direction: column; gap: 0.65rem;
    position: sticky; top: 4.5rem;
}
.contas-indicadores-titulo {
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em;
    text-transform: uppercase; color: #64748b;
}
html.dark .contas-indicadores-titulo { color: #94a3b8; }
.contas-indicadores-periodo { font-size: 0.78rem; color: #94a3b8; margin-top: -0.45rem; }
html.dark .contas-indicadores-periodo { color: #64748b; }
.conta-ind-card {
    background: #fff;
    border: 1px solid rgba(3, 7, 18, 0.08);
    border-inline-start: 3px solid var(--ind-cor, #94a3b8);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(3, 7, 18, 0.05);
    padding: 0.7rem 0.9rem;
}
html.dark .conta-ind-card {
    background: rgb(17 24 39);
    border-color: rgba(255, 255, 255, 0.10);
    border-inline-start-color: var(--ind-cor, #94a3b8);
}
.conta-ind-topo { display: flex; align-items: center; gap: 0.45rem; }
.conta-ind-dot {
    width: 0.5rem; height: 0.5rem; border-radius: 9999px;
    background: var(--ind-cor, #94a3b8); flex-shrink: 0;
}
.conta-ind-rotulo {
    font-size: 0.8rem; font-weight: 600; color: #475569;
    flex: 1 1 auto; min-width: 0;
}
html.dark .conta-ind-rotulo { color: #cbd5e1; }
.conta-ind-qtd {
    font-size: 0.72rem; font-weight: 700; color: #475569;
    background: rgba(100, 116, 139, 0.12);
    border-radius: 9999px; padding: 0.05rem 0.5rem;
}
html.dark .conta-ind-qtd { color: #cbd5e1; background: rgba(148, 163, 184, 0.15); }
.conta-ind-valor {
    margin-top: 0.35rem; font-size: 1.05rem; font-weight: 800;
    color: #0f172a; font-variant-numeric: tabular-nums;
}
html.dark .conta-ind-valor { color: #f1f5f9; }

/* Telas estreitas: cards viram uma grade compacta ACIMA da tabela. */
@media (max-width: 1150px) {
    .contas-layout { flex-direction: column-reverse; }
    .contas-indicadores {
        position: static; width: 100%;
        display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.6rem;
    }
    .contas-indicadores-titulo,
    .contas-indicadores-periodo { grid-column: 1 / -1; }
    .contas-indicadores-periodo { margin-top: -0.35rem; }
}

/* ==========================================================================
   DASHBOARD EXECUTIVO — aproveitamento da tela larga e acabamento
   (redesign de 2026-07-20, a partir do print anotado pelo dono)
   ========================================================================== */

/* [A] LARGURA. A largura total vem do PAINEL (maxContentWidth(Full) no
   AdminPanelProvider) e o teto global de 1880px vive no bloco
   "APROVEITAMENTO DE TELA" no fim deste arquivo. Este seletor permanece pelo
   ajuste fino via `--dash-largura-max` e como lembrete: `.fi-dashboard-page` é
   DESCENDENTE de `.fi-main` (layout/index.blade.php envolve page/index.blade)
   — `.fi-dashboard-page .fi-main` seria seletor morto.
   1880px = 4 cartões de KPI a ~445px + 3 gaps de 24px. Em 1920 com a sidebar
   recolhida a área útil fica abaixo disso, ou seja, o teto NÃO corta nada na
   tela do dono — ele só engaja em monitores acima de ~2100px. Para liberar de
   vez: trocar por `none`. */
.fi-dashboard-page {
    max-width: var(--dash-largura-max, 1880px);
    margin-inline: auto;
}

/* [I] Numerais tabulares de verdade. A classe `tabular-nums` estava escrita em
   3 blades e NÃO existe no CSS compilado do Filament — estava inerte, e as
   colunas de dinheiro "dançavam" a cada dígito. */
.fi-wi {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* [D] ALTURA CASADA. Um widget de 5 colunas ao lado de um de 7 terminava mais
   curto e deixava o buraco que o dono circulou. O item do grid já estica
   (stretch); o que faltava era a corrente de altura chegar até o conteúdo da
   section. As classes REAIS do Filament 3.3 são .fi-section /
   .fi-section-content-ctn / .fi-section-content (`.fi-se*` é nomenclatura da
   v4 e entraria como no-op silencioso). */
.dash-card-cheio,
.dash-card-cheio > .fi-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.dash-card-cheio .fi-section-content-ctn {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.dash-card-cheio .fi-section-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
/* O rodapé (link "Ver contas financeiras →") cola na base, alinhado com o
   rodapé do card vizinho. */
.dash-card-cheio .dash-rodape {
    margin-top: auto;
    padding-top: 0.75rem;
}

/* CHIP DA EMPRESA ATIVA na topbar, ao lado da marca. */
.chip7-empresa {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2rem;
    padding: 0 0.7rem 0 0.35rem;
    border: 1px solid rgba(16, 112, 176, 0.35);
    border-radius: 999px;
    background: rgba(16, 112, 176, 0.07);
    max-width: 22rem;
}
html.dark .chip7-empresa {
    border-color: rgba(155, 197, 227, 0.28);
    background: rgba(255, 255, 255, 0.05);
}
.chip7-empresa-botao {
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.chip7-empresa-botao:hover {
    background: rgba(16, 112, 176, 0.13);
    border-color: rgba(16, 112, 176, 0.55);
}
html.dark .chip7-empresa-botao:hover {
    background: rgba(255, 255, 255, 0.09);
}
.chip7-empresa-inicial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 0.35rem;
    background: var(--chip7-azul);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
}
.chip7-empresa-nome {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.dark .chip7-empresa-nome { color: var(--chip7-texto-claro); }
.chip7-empresa-seta {
    width: 0.9rem;
    height: 0.9rem;
    color: #64748b;
    flex: 0 0 auto;
}

/* Em telas estreitas o nome sai e fica só a inicial, para não empurrar a
   busca e os ícones da topbar. */
@media (max-width: 640px) {
    .chip7-empresa-nome { display: none; }
    .chip7-empresa { padding-inline: 0.35rem; }
}

/* Composição do caixa: uma barra empilhada com a cor de cada conta. */
.dash-composicao {
    display: flex;
    width: 100%;
    height: 0.5rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.18);
}
.dash-composicao-fatia { display: block; height: 100%; }

/* Projeção de caixa do período. */
.dash-projecao {
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    padding-top: 0.7rem;
}
html.dark .dash-projecao { border-top-color: rgba(255, 255, 255, 0.10); }
.dash-projecao-titulo {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.45rem;
}
html.dark .dash-projecao-titulo { color: #94a3b8; }
.dash-projecao-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: #475569;
    padding: 0.12rem 0;
}
html.dark .dash-projecao-linha { color: #cbd5e1; }
.dash-projecao-total {
    margin-top: 0.35rem;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.35);
    font-weight: 700;
    color: #0f172a;
}
html.dark .dash-projecao-total { color: #f1f5f9; border-top-color: rgba(255, 255, 255, 0.14); }
.dash-valor {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.01em;
    font-weight: 600;
}
.dash-positivo { color: #0AC775; }
.dash-negativo { color: #dc2626; }
html.dark .dash-negativo { color: #f87171; }

/* Trilho do bloco "Contas a pagar": barra + marca de ritmo (bullet graph). */
.dash-trilho {
    position: relative;
    width: 100%;
    height: 0.625rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.18);
}
.dash-trilho-preenchido { height: 100%; border-radius: 999px; }
.dash-trilho-ritmo {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: #475569;
    opacity: 0.8;
    border-radius: 2px;
}
html.dark .dash-trilho-ritmo { background: #e2e8f0; }

/* Resultado do período: barra de ponta a ponta, zero no meio. */
.dash-resultado {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}
html.dark .dash-resultado { border-top-color: rgba(255, 255, 255, 0.10); }
.dash-resultado-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.dash-resultado-titulo {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}
html.dark .dash-resultado-titulo { color: #94a3b8; }

/* O percentual que a barra representa, na mesma cor do preenchimento. */
.dash-resultado-percentual {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.dash-resultado-barra {
    position: relative;
    width: 100%;
    height: 0.875rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    overflow: hidden;
}
html.dark .dash-resultado-barra { background: rgba(255, 255, 255, 0.08); }

.dash-resultado-preenchido {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
}

/* Zero: a referência que dá sentido ao lado em que a barra cresce. */
.dash-resultado-zero {
    position: absolute;
    left: 50%;
    top: -1px;
    bottom: -1px;
    width: 2px;
    margin-left: -1px;
    background: #64748b;
    z-index: 2;
}
html.dark .dash-resultado-zero { background: #cbd5e1; }

/* Onde o período fecha se tudo que está lançado for liquidado. */
.dash-resultado-previsto {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-left: -1px;
    background: repeating-linear-gradient(
        to bottom,
        currentColor 0 3px,
        transparent 3px 6px
    );
    color: #475569;
    z-index: 3;
}
html.dark .dash-resultado-previsto { color: #e2e8f0; }

.dash-resultado-escalas {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.dash-resultado-valor {
    margin-top: 0.5rem;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.dash-resultado-legenda {
    margin-top: 0.1rem;
    font-size: 0.6875rem;
    color: #94a3b8;
}

/* ==================== PLANO DE CONTAS (lista de categorias) ==================== */
/* Recuo da subcategoria sob a principal na tabela. Classe própria porque
   valores arbitrários do Tailwind (pl-[24px] etc.) não existem no CSS
   compilado do Filament. */
.plano-contas-sub {
    padding-inline-start: 1.5rem;
}

/* ==================== FLUXO DE CAIXA (previsto × realizado) ==================== */
/* Numerais tabulares nas duas tabelas da página: a classe `tabular-nums` não
   existe no CSS compilado do Filament, então a variante fica aqui, na tabela
   inteira, e as colunas de dinheiro não "dançam" a cada dígito. */
.fluxo-tabela {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Valores de entrada/resultado positivo no verde da marca: `text-success-*`
   também não é compilado pelo Filament (`text-danger-*` é, e segue no blade).
   No dark, o verde-claro da paleta para manter contraste sobre fundo escuro. */
.fluxo-valor-positivo { color: var(--chip7-verde); }
html.dark .fluxo-valor-positivo { color: var(--chip7-verde-claro); }

/* ==================== DRE GERENCIAL: utilitários fora do CSS compilado ==================== */
/* O CSS do Filament embarca só as classes que o painel usa; left-0, uppercase,
   tracking-wide, mt-4, border-l e hover:text-* não existem lá. As regras
   equivalentes vivem aqui, penduradas na .dre-tabela e em classes próprias. */
.dre-tabela-wrapper { margin-top: 1rem; }
.dre-tabela thead tr {
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
/* Coluna de rótulos fixa no scroll horizontal: o blade traz `sticky`/`z-10`
   (existem no compilado), mas o offset `left-0` não — sem ele o sticky não gruda. */
.dre-tabela th:first-child,
.dre-tabela td:first-child { left: 0; }
/* Separador vertical da coluna Acumulado (largura; a cor segue no blade). */
.dre-tabela .dre-col-acum { border-left-width: 1px; }
/* Hover dos botões Realizado/Projetado (só o inativo recebe a classe). */
.dre-cenario-btn:hover { color: rgb(17 24 39); }
html.dark .dre-cenario-btn:hover { color: #fff; }

/* Fluxo de caixa: separador da linha de totais (border-t-2 não é compilado). */
.fluxo-total-row { border-top-width: 2px; }

/* Conector visual da hierarquia no Plano de Contas: barra verde à esquerda
   das linhas de subcategoria (classe aplicada na <tr> via recordClasses).
   Linhas adjacentes formam o trilho contínuo sob a principal. */
.plano-contas-sub-row > td:first-child {
    border-inline-start: 3px solid var(--chip7-verde);
}

/* ==================== APROVEITAMENTO DE TELA (painel inteiro) ==================== */
/* O painel declara maxContentWidth(Full) no AdminPanelProvider: o `.fi-main`
   troca `max-w-7xl` (1280px) por `max-w-full` e o conteúdo passa a acompanhar
   a largura do monitor em TODAS as páginas — em 1366/1440/1536/1920 a área
   útil cresce sozinha. O teto de leitura fica aqui: 1880px, o mesmo já usado
   pelo dashboard, para monitores ultrawide não esticarem linha de texto ao
   infinito. O `.fi-main` já traz `mx-auto`, então acima do teto ele centraliza. */
.fi-main {
    max-width: 117.5rem; /* 1880px */
}

/* Exceção deliberada: CRIAR/EDITAR seguem no teto clássico de 1280px — campo
   de digitação esticado até 1880px piora o preenchimento (o olho viaja entre
   rótulo e campo). Listas, views e relatórios é que ganham a largura.
   A classe fica na página (descendente do .fi-main), mesmo padrão do dashboard. */
.fi-page.fi-resource-create-record-page,
.fi-page.fi-resource-edit-record-page {
    max-width: 80rem; /* 1280px */
    margin-inline: auto;
}

/* ==================== DRE GERENCIAL: barra, cards, árvore e gráfico ==================== */
/* Estende o bloco DRE acima. Cada regra aqui existe porque o utilitário Tailwind
   equivalente NÃO está no CSS compilado do Filament (grade de 3 colunas, alturas
   por tipo de linha, recuo por nível, dropdown ancorado, valores arbitrários) —
   usar a classe morta no blade não pintaria nada. Cores: verde e azul da marca
   (--chip7-*) mais um âmbar dedicado só à 3ª série do gráfico, que precisa se
   distinguir de verde e azul. */

/* --- Barra de topo: botões de ícone (+ e calendário) --- */
.dre-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
    color: rgb(107 114 128); background: transparent;
    border: 1px solid rgb(229 231 235);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.dre-icon-btn:hover { background: rgb(243 244 246); color: rgb(31 41 55); }
.dre-icon-btn svg { width: 1.15rem; height: 1.15rem; }
.dre-icon-btn-ativo { color: var(--chip7-verde); border-color: var(--chip7-verde); }
html.dark .dre-icon-btn { color: rgb(156 163 175); border-color: rgb(255 255 255 / 0.1); }
html.dark .dre-icon-btn:hover { background: rgb(255 255 255 / 0.06); color: #fff; }
html.dark .dre-icon-btn-ativo { color: var(--chip7-verde-claro); border-color: var(--chip7-verde-claro); }

/* --- Dropdown ancorado (expansão e exercício) --- */
.dre-menu {
    position: absolute; top: calc(100% + 0.375rem); right: 0; z-index: 30;
    min-width: 14rem; padding: 0.375rem;
    background: #fff; border: 1px solid rgb(229 231 235);
    border-radius: 0.625rem; box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.25);
}
.dre-menu[x-cloak] { display: none !important; }
html.dark .dre-menu { background: rgb(17 24 39); border-color: rgb(255 255 255 / 0.1); }
.dre-menu-titulo {
    padding: 0.25rem 0.5rem 0.375rem; font-size: 0.625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; color: rgb(107 114 128);
}
html.dark .dre-menu-titulo { color: rgb(156 163 175); }
.dre-menu-item {
    display: flex; align-items: center; gap: 0.375rem; width: 100%;
    padding: 0.375rem 0.5rem; border-radius: 0.375rem; text-align: left;
    font-size: 0.8125rem; color: rgb(55 65 81); background: transparent; cursor: pointer;
}
.dre-menu-item:hover { background: rgb(243 244 246); }
.dre-menu-item-ativo { color: var(--chip7-azul); font-weight: 600; }
html.dark .dre-menu-item { color: rgb(209 213 219); }
html.dark .dre-menu-item:hover { background: rgb(255 255 255 / 0.06); }
html.dark .dre-menu-item-ativo { color: var(--chip7-verde-claro); }
.dre-menu-check { display: inline-flex; flex: none; width: 1rem; justify-content: center; color: var(--chip7-azul); }
html.dark .dre-menu-check { color: var(--chip7-verde-claro); }
.dre-menu-anos { max-height: 15rem; overflow-y: auto; }

/* --- Cards de KPI (3 colunas; o grid-cols-3 e o responsivo não são compilados) --- */
.dre-cards {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
@media (max-width: 640px) { .dre-cards { grid-template-columns: 1fr; } }
.dre-card { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.25rem; }
.dre-card-titulo {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: rgb(107 114 128);
}
html.dark .dre-card-titulo { color: rgb(156 163 175); }
.dre-card-valor { font-size: 1.5rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
/* Líquido (grande, à esquerda) e o bruto de referência (menor, à direita). */
.dre-card-linha { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }
.dre-card-bruto { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.2; }
.dre-card-bruto-rotulo {
    font-size: 0.625rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: rgb(156 163 175);
}
html.dark .dre-card-bruto-rotulo { color: rgb(107 114 128); }
.dre-card-bruto-valor { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dre-card-sub { font-size: 0.6875rem; color: rgb(156 163 175); }
html.dark .dre-card-sub { color: rgb(107 114 128); }
.dre-tom-neutro { color: rgb(17 24 39); }
.dre-tom-positivo { color: var(--chip7-verde); }
.dre-tom-negativo { color: rgb(220 38 38); }
html.dark .dre-tom-neutro { color: #fff; }
html.dark .dre-tom-positivo { color: var(--chip7-verde-claro); }
html.dark .dre-tom-negativo { color: rgb(248 113 113); }

/* --- Tabela: coluna LINHA fixa em 240px + árvore recolhível --- */
.dre-tabela th:first-child,
.dre-tabela td:first-child { width: 240px; min-width: 240px; max-width: 240px; }
.dre-tabela tbody td { padding-block: 0.2rem; vertical-align: middle; }
.dre-linha-btn, .dre-linha-plain {
    display: flex; align-items: center; gap: 0.25rem; width: 100%;
    background: transparent; text-align: left; color: inherit; font: inherit;
}
.dre-linha-btn { cursor: pointer; }
.dre-linha-btn:hover .dre-lin-label { text-decoration: underline; text-underline-offset: 2px; }
.dre-seta {
    display: inline-flex; flex: none; width: 0.85rem; justify-content: center;
    font-size: 0.6rem; color: rgb(107 114 128);
}
html.dark .dre-seta { color: rgb(156 163 175); }
.dre-lin-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dre-lin-0 { padding-inline-start: 0; }
.dre-lin-1 { padding-inline-start: 1rem; }
.dre-lin-2 { padding-inline-start: 2rem; }

/* Alturas e pesos por tipo de linha (do design). */
.dre-tr-receita > td      { height: 38px; }
.dre-tr-deducao > td      { height: 34px; }
.dre-tr-categoria > td    { height: 32px; }
.dre-tr-subcategoria > td { height: 28px; }
.dre-tr-subtotal > td     { height: 38px; }
.dre-tr-final > td        { height: 42px; }
.dre-tr-receita, .dre-tr-subtotal, .dre-tr-final { font-weight: 700; }
.dre-tr-deducao { font-weight: 600; }
.dre-tr-categoria { font-weight: 500; }
.dre-tr-subcategoria { font-weight: 400; }

/* ACUM. levemente destacada nas linhas de detalhe (subtotais/final já têm realce). */
.dre-tr-receita > .dre-col-acum,
.dre-tr-deducao > .dre-col-acum,
.dre-tr-categoria > .dre-col-acum,
.dre-tr-subcategoria > .dre-col-acum { background-color: rgb(2 6 23 / 0.035); }
html.dark .dre-tr-receita > .dre-col-acum,
html.dark .dre-tr-deducao > .dre-col-acum,
html.dark .dre-tr-categoria > .dre-col-acum,
html.dark .dre-tr-subcategoria > .dre-col-acum { background-color: rgb(255 255 255 / 0.04); }

/* --- Gráfico "Evolução mensal" (SVG puro; barras em HTML + polyline na sobreposição) --- */
.dre-chart { --dre-margem: #D97706; padding: 1.25rem 1.25rem 1rem; }
html.dark .dre-chart { --dre-margem: #FBBF24; }
.dre-chart-cabecalho {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.75rem; margin-bottom: 0.75rem;
}
.dre-chart-titulo { font-size: 0.875rem; font-weight: 700; color: rgb(31 41 55); }
html.dark .dre-chart-titulo { color: #fff; }
.dre-chart-legenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.dre-legenda-item { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; color: rgb(75 85 99); }
html.dark .dre-legenda-item { color: rgb(209 213 219); }
.dre-legenda-cor { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 0.25rem; flex: none; }
.dre-legenda-linha { display: inline-block; width: 1rem; height: 0; border-top: 2px solid var(--dre-margem); flex: none; }
.dre-legenda-receita { background: var(--chip7-verde); }
.dre-legenda-resultado { background: var(--chip7-azul); }
.dre-chart-scroll { overflow-x: auto; }
.dre-chart-area { position: relative; min-width: 640px; }
.dre-chart-plot { position: relative; height: 210px; margin-top: 1.5rem; }
.dre-chart-zero { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgb(148 163 184 / 0.6); }
.dre-chart-cols { position: absolute; inset: 0; display: flex; align-items: stretch; }
.dre-chart-col { position: relative; flex: 1 1 0; }
.dre-chart-col-vazio {
    background: repeating-linear-gradient(45deg, transparent, transparent 5px,
        rgb(148 163 184 / 0.08) 5px, rgb(148 163 184 / 0.08) 10px);
}
.dre-bar { position: absolute; min-height: 1px; border-radius: 3px 3px 0 0; }
.dre-bar-receita { left: 18%; width: 28%; background: var(--chip7-verde); }
.dre-bar-resultado { right: 18%; width: 28%; background: var(--chip7-azul); }
.dre-bar-neg { border-radius: 0 0 3px 3px; }
.dre-bar-resultado.dre-bar-neg { background: rgb(220 38 38); }
html.dark .dre-bar-resultado.dre-bar-neg { background: rgb(248 113 113); }
.dre-bar-rotulo {
    position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
    margin-bottom: 2px; font-size: 0.5625rem; line-height: 1; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.dre-bar-rotulo-baixo { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 2px; }
.dre-bar-rotulo-rec { color: var(--chip7-verde); }
.dre-bar-rotulo-res { color: var(--chip7-azul); }
.dre-bar-rotulo-neg { color: rgb(220 38 38); }
html.dark .dre-bar-rotulo-rec { color: var(--chip7-verde-claro); }
html.dark .dre-bar-rotulo-res { color: #7FB4D8; }
html.dark .dre-bar-rotulo-neg { color: rgb(248 113 113); }
.dre-chart-linha { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dre-linha-margem { fill: none; stroke: var(--dre-margem); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dre-ponto-margem { position: absolute; width: 6px; height: 6px; border-radius: 9999px; background: var(--dre-margem); transform: translate(-50%, -50%); }
.dre-chart-eixo { display: flex; margin-top: 0.5rem; }
.dre-chart-eixo-item { flex: 1 1 0; text-align: center; font-size: 0.625rem; color: rgb(107 114 128); }
html.dark .dre-chart-eixo-item { color: rgb(156 163 175); }

/* ==================== CAIXAS E BANCOS (extrato consolidado) ==================== */

.razao-busca { max-width: 26rem; }

.razao-quadro {
    background: #fff;
    border: 1px solid rgba(3, 7, 18, 0.08);
    border-radius: 0.75rem;
    overflow-x: auto;
}
html.dark .razao-quadro {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.09);
}

.razao-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.razao-tabela thead th {
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(3, 7, 18, 0.08);
    white-space: nowrap;
}
html.dark .razao-tabela thead th { color: #94a3b8; border-bottom-color: rgba(255, 255, 255, 0.09); }

.razao-tabela tbody td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(3, 7, 18, 0.05);
    color: #334155;
    vertical-align: top;
}
html.dark .razao-tabela tbody td { color: #cbd5e1; border-bottom-color: rgba(255, 255, 255, 0.06); }
.razao-tabela tbody tr:last-child td { border-bottom: 0; }
.razao-tabela tbody tr:hover td { background: rgba(16, 112, 176, 0.04); }
html.dark .razao-tabela tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }

.razao-col-data { white-space: nowrap; font-variant-numeric: tabular-nums; }
.razao-col-conta, .razao-col-tipo { white-space: nowrap; }
.razao-col-categoria { white-space: nowrap; max-width: 16rem; }
.razao-col-valor {
    text-align: right;
    white-space: nowrap;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.razao-col-acoes { text-align: right; white-space: nowrap; width: 1%; }

/* Título de coluna: ordena no clique, filtra no funil.
   O <th> já é uppercase/letter-spacing, então os botões só herdam. */
.razao-th { display: inline-flex; align-items: center; gap: 0.15rem; }
.razao-th-direita { justify-content: flex-end; width: 100%; }

.razao-ordenar {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0.1rem 0.15rem;
    border-radius: 0.3rem;
    cursor: pointer;
}
.razao-ordenar:hover { color: var(--chip7-azul); background: rgba(16, 112, 176, 0.08); }
html.dark .razao-ordenar:hover { color: #e2e8f0; background: rgba(255, 255, 255, 0.08); }
.razao-ordenar-ativa { color: var(--chip7-azul); }
html.dark .razao-ordenar-ativa { color: #93c5fd; }

/* A seta some do fluxo visual quando a coluna não ordena, mas continua no
   lugar para o título não pular ao trocar de coluna. */
.razao-ordenar-icone { width: 0.85rem; height: 0.85rem; opacity: 0.35; }
.razao-ordenar-ativa .razao-ordenar-icone { opacity: 1; }

.razao-funil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0.2rem;
    border-radius: 0.3rem;
    color: inherit;
    opacity: 0.45;
    cursor: pointer;
}
.razao-funil:hover { opacity: 1; color: var(--chip7-azul); background: rgba(16, 112, 176, 0.08); }
html.dark .razao-funil:hover { color: #e2e8f0; background: rgba(255, 255, 255, 0.08); }
.razao-funil-icone { width: 0.8rem; height: 0.8rem; }

/* "Principal > Subcategoria" é longo por natureza; corta com reticências em vez
   de esticar a coluna e empurrar o valor para fora da tela. */
.razao-categoria { display: block; overflow: hidden; text-overflow: ellipsis; }
.razao-sem-categoria { display: block; color: #94a3b8; font-style: italic; }
html.dark .razao-sem-categoria { color: #64748b; }

/* Abertura e fechamento: fixas no topo e no rodapé, com fundo próprio para
   não se confundirem com movimento do extrato. */
.razao-linha-saldo td {
    background: rgba(176, 141, 87, 0.08);
    font-weight: 600;
}
html.dark .razao-linha-saldo td { background: rgba(176, 141, 87, 0.14); }
.razao-tabela tbody tr.razao-linha-saldo:hover td { background: rgba(176, 141, 87, 0.14); }
html.dark .razao-tabela tbody tr.razao-linha-saldo:hover td { background: rgba(176, 141, 87, 0.2); }

.razao-descricao { display: block; font-weight: 600; color: #0f172a; }
html.dark .razao-descricao { color: #f1f5f9; }
.razao-contraparte { display: block; font-size: 0.75rem; color: #64748b; margin-top: 0.1rem; }
html.dark .razao-contraparte { color: #94a3b8; }

.razao-etiqueta {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}
html.dark .razao-etiqueta { background: rgba(255, 255, 255, 0.08); color: #cbd5e1; }

/* Verde/vermelho do extrato: mesmos tons do fluxo de caixa, com o par claro
   para o tema escuro (a estilização base é html:not(.dark)). */
.razao-entrada { color: #0AC775; }
.razao-saida { color: #dc2626; }
html.dark .razao-entrada { color: #3BD98D; }
html.dark .razao-saida { color: #f87171; }

.razao-acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.5rem;
    color: #64748b;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.razao-acao:hover { background: rgba(16, 112, 176, 0.1); color: var(--chip7-azul); }
.razao-acao-perigo:hover { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
html.dark .razao-acao { color: #94a3b8; }
html.dark .razao-acao:hover { background: rgba(255, 255, 255, 0.08); color: #e2e8f0; }
.razao-acao-icone { width: 1.05rem; height: 1.05rem; }

.razao-vazio { text-align: center; color: #64748b; padding: 1.75rem 0.75rem; }
html.dark .razao-vazio { color: #94a3b8; }

.razao-paginacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.razao-paginacao-info { font-size: 0.78rem; color: #64748b; }
html.dark .razao-paginacao-info { color: #94a3b8; }
.razao-paginacao-botoes { display: inline-flex; gap: 0.4rem; }
.razao-paginacao-botao {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(3, 7, 18, 0.12);
    color: #475569;
    background: #fff;
    cursor: pointer;
}
.razao-paginacao-botao:hover:not(:disabled) { background: rgba(16, 112, 176, 0.07); }
.razao-paginacao-botao:disabled { opacity: 0.45; cursor: not-allowed; }
html.dark .razao-paginacao-botao {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}

.razao-card-nota { margin-top: 0.3rem; font-size: 0.7rem; color: #94a3b8; }

/* ==================== DASHBOARD: CARDS DA DOBRA DE CIMA ==================== */

/* Par "valor principal + valor de apoio" (recebido × previsto), na mesma forma
   dos cards de KPI do DRE: o secundário é menor e alinhado pela base. */
.kpi-par {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.kpi-par-principal, .kpi-par-secundario { min-width: 0; }
.kpi-par-secundario { text-align: right; }
.kpi-par-valor {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
html.dark .kpi-par-valor { color: #f8fafc; }
.kpi-par-valor-menor {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    color: #475569;
    font-variant-numeric: tabular-nums;
}
html.dark .kpi-par-valor-menor { color: #cbd5e1; }
.kpi-par-rotulo {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-top: 0.15rem;
}

.kpi-linhas {
    margin-top: 0.15rem;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    padding-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
html.dark .kpi-linhas { border-top-color: rgba(255, 255, 255, 0.1); }
.kpi-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8125rem;
}
.kpi-linha-rotulo { color: #64748b; }
html.dark .kpi-linha-rotulo { color: #94a3b8; }
.kpi-linha-valor {
    font-weight: 600;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
html.dark .kpi-linha-valor { color: #e2e8f0; }

/* Vencidas em um card só: a pagar à esquerda, a receber à direita. */
.vencidas-par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (max-width: 640px) {
    .vencidas-par { grid-template-columns: 1fr; }
}
.vencidas-bloco {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(3, 7, 18, 0.08);
    border-radius: 0.75rem;
    transition: background-color 120ms ease, border-color 120ms ease;
}
html.dark .vencidas-bloco { border-color: rgba(255, 255, 255, 0.09); }
.vencidas-bloco:hover { background: rgba(16, 112, 176, 0.05); }
html.dark .vencidas-bloco:hover { background: rgba(255, 255, 255, 0.04); }
/* Âmbar só quando há o que cobrar; sem alerta, o card fica neutro. */
.vencidas-bloco-alerta {
    border-color: rgba(217, 164, 65, 0.55);
    background: rgba(217, 164, 65, 0.07);
}
.vencidas-titulo {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}
html.dark .vencidas-titulo { color: #94a3b8; }
.vencidas-valor {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
html.dark .vencidas-valor { color: #f1f5f9; }
.vencidas-nota { font-size: 0.75rem; color: #64748b; }
html.dark .vencidas-nota { color: #94a3b8; }

/* Faixa "Highlights de hoje": um bloco por sinal, com barra da severidade. */
.sinal {
    border-inline-start: 3px solid var(--sinal-cor, #94a3b8);
    padding: 0.1rem 0 0.1rem 0.7rem;
}
.sinal + .sinal {
    margin-top: 0.85rem;
    border-top: 0;
}
.sinal-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.sinal-area {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sinal-cor, #64748b);
}
.sinal-valor {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    font-variant-numeric: tabular-nums;
}
html.dark .sinal-valor { color: #cbd5e1; }
.sinal-titulo {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 0.1rem;
}
html.dark .sinal-titulo { color: #f1f5f9; }
.sinal-link { text-decoration: underline; text-underline-offset: 2px; }
.sinal-link:hover { color: var(--chip7-azul); }
html.dark .sinal-link:hover { color: #9BC5E3; }
.sinal-texto {
    font-size: 0.78rem;
    line-height: 1.45;
    color: #64748b;
    margin-top: 0.15rem;
}
html.dark .sinal-texto { color: #94a3b8; }
.sinal-vazio-titulo {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0AC775;
}
html.dark .sinal-vazio-titulo { color: #3BD98D; }

/* Resultado do período centralizado no card de Execução financeira. */
.dash-resultado-valor, .dash-resultado-legenda { text-align: center; }

/* ---- Correções de especificidade (revisão de 22/07) --------------------
   `.razao-tabela tbody td` tem especificidade (0,1,2) e vencia as classes de
   cor (0,1,0) aplicadas na MESMA célula: a coluna Valor saía cinza e o estado
   vazio perdia o respiro. Os seletores abaixo empatam o peso na própria
   célula em vez de mover blocos de lugar. Mesma história para os valores dos
   cards do dashboard, declarados depois de `.razao-saida`. */
.razao-tabela tbody td.razao-entrada { color: #0AC775; }
.razao-tabela tbody td.razao-saida { color: #dc2626; }
html.dark .razao-tabela tbody td.razao-entrada { color: #3BD98D; }
html.dark .razao-tabela tbody td.razao-saida { color: #f87171; }

.razao-tabela tbody td.razao-vazio {
    text-align: center;
    color: #64748b;
    padding: 1.75rem 0.75rem;
}
html.dark .razao-tabela tbody td.razao-vazio { color: #94a3b8; }

.kpi-linha-valor.razao-entrada, .vencidas-valor.razao-entrada { color: #0AC775; }
.kpi-linha-valor.razao-saida, .vencidas-valor.razao-saida { color: #dc2626; }
html.dark .kpi-linha-valor.razao-entrada, html.dark .vencidas-valor.razao-entrada { color: #3BD98D; }
html.dark .kpi-linha-valor.razao-saida, html.dark .vencidas-valor.razao-saida { color: #f87171; }

.conta-ind-valor.razao-saida { color: #dc2626; }
html.dark .conta-ind-valor.razao-saida { color: #f87171; }

/* A severidade fica na barra lateral (como nos cards de indicador); o rótulo
   volta ao cinza legível, com o par escuro — âmbar de 10px sobre branco dava
   ~2,2:1 de contraste. */
.sinal-area { color: #64748b; }
html.dark .sinal-area { color: #94a3b8; }

/* ---- "Highlights de hoje" em faixa cheia (revisão dos ajustes) ----------
   O card nasceu como coluna estreita; ao virar faixa de 12 colunas, o
   `space-between` do topo jogava o rótulo numa borda e o valor na outra, com
   ~1400px de vazio no meio, e o texto virava uma linha de ~250 caracteres.
   Medida de leitura no conteúdo resolve sem mexer no grid. */
.sinal { max-width: 78ch; }
.sinal-topo { justify-content: flex-start; gap: 0.6rem; }
.sinal-valor { margin-inline-start: auto; }

/* ---- "Highlights de hoje" em quatro colunas ----------------------------
   Os sinais são blocos curtos e independentes: em lista vertical sobrava
   metade da faixa vazia. Em telas menores cai para duas colunas e depois
   para uma, senão o texto vira uma coluna de palavras soltas.
   A medida de leitura (max-width) sai de cena: cada coluna já é estreita. */
.sinais-grade {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}
@media (max-width: 1279px) {
    .sinais-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .sinais-grade { grid-template-columns: minmax(0, 1fr); }
}
.sinais-grade .sinal { max-width: none; }
.sinais-grade .sinal + .sinal { margin-top: 0; }

/* ==================== CONFIGURAÇÕES FINANCEIRAS (hub dos cadastros) ==================== */

.cfg-fin {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: 68rem;
    margin: 0 auto;
}
@media (max-width: 1023px) { .cfg-fin { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cfg-fin { grid-template-columns: minmax(0, 1fr); } }

.cfg-fin-cartao {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 2rem 1.5rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(3, 7, 18, 0.08);
    border-top: 3px solid var(--cfg-cor);
    border-radius: 0.9rem;
    box-shadow: 0 1px 2px rgba(3, 7, 18, 0.05);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.cfg-fin-cartao:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(3, 7, 18, 0.1);
    border-color: var(--cfg-cor);
}
html.dark .cfg-fin-cartao {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.09);
    border-top-color: var(--cfg-cor);
    box-shadow: none;
}
html.dark .cfg-fin-cartao:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); border-color: var(--cfg-cor); }

.cfg-fin-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: var(--cfg-cor-fraca);
    color: var(--cfg-cor);
}
.cfg-fin-icone-svg { width: 1.75rem; height: 1.75rem; }

.cfg-fin-titulo { font-size: 1.0625rem; font-weight: 700; color: #0f172a; }
html.dark .cfg-fin-titulo { color: #f1f5f9; }

.cfg-fin-descricao { font-size: 0.8125rem; line-height: 1.45; color: #64748b; }
html.dark .cfg-fin-descricao { color: #94a3b8; }

.cfg-fin-abrir {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: auto;
    padding-top: 0.6rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--cfg-cor);
}
.cfg-fin-abrir-icone { width: 0.9rem; height: 0.9rem; }

/* Retorno ao hub, no cabeçalho dos três cadastros. */
.cfg-fin-voltar { display: inline-flex; }