/* ==========================================================
ARQUIVO CSS PRINCIPAL - AJ ERP / AJ SOLUÇÕES
=============================================================
Versão organizada: Design System AJ V2.2
Data da organização: 2026-07-09

Mapa de manutenção:
01. Tokens globais, gradientes, reset e layout base
02. Sidebar, cabeçalhos e estrutura principal
03. Componentes base do Design System
    - Botões
    - Campos
    - Cards
    - Modais
    - Filtros
    - Paginações
    - Scrollbars
04. Login
05. Dashboard e cards de resumo
06. Clientes, usuários, configurações e financeiro
07. Investimentos, obras internas e obras externas
08. Gastos e domicílio fiscal
09. Planejamento orçamentário
10. Responsividade, modo escuro e compatibilidades finais

Nota técnica:
Este arquivo mantém a ordem de cascata validada durante a auditoria.
A organização foi feita de forma segura para preservar telas já funcionais.
Remoções agressivas devem continuar sendo feitas por módulo após teste visual.
========================================================== */

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - TOKENS GLOBAIS DO SISTEMA
   ----------------------------------------------------------
   Base oficial de cores, textos, fundos, bordas, radius,
   espaçamentos e sombras do AJ ERP.
   Preserva variáveis antigas do V2.1 para não quebrar módulos.
========================================================== */

:root {
    /* ======================================================
       CORES INSTITUCIONAIS
    ====================================================== */

    --azul-aj: #003366;
    --azul-aj-escuro: #00264d;
    --azul-aj-profundo: #001f3f;
    --azul-aj-claro: #0f4c81;
    --dourado-aj: #d99a21;

    --aj-primary: #003366;
    --aj-primary-dark: #00264d;
    --aj-primary-deep: #001f3f;
    --aj-primary-light: #0b5ed7;
    --aj-primary-soft: #dbeafe;

    /* ======================================================
       CORES DE STATUS
    ====================================================== */

    --verde: #0f766e;
    --vermelho: #b91c1c;
    --laranja: #b45309;
    --roxo: #7c3aed;
    --azul-vivo: #2563eb;

    --aj-success: #16a34a;
    --aj-success-soft: #dcfce7;

    --aj-warning: #d97706;
    --aj-warning-soft: #fef3c7;

    --aj-danger: #dc2626;
    --aj-danger-soft: #fee2e2;

    --aj-info: #2563eb;
    --aj-info-soft: #dbeafe;

    /* ======================================================
       TEXTOS
    ====================================================== */

    --texto-principal: #0f172a;
    --texto-secundario: #64748b;
    --texto-claro: #ffffff;

    /* ======================================================
       FUNDOS
    ====================================================== */

    --fundo-sistema: #f4f7fb;
    --branco: #ffffff;
    --bg-card: #ffffff;
    --bg-soft: #f8fafc;

    /* ======================================================
       BORDAS
    ====================================================== */

    --borda-suave: #e2e8f0;
    --border-color: #e2e8f0;

    /* ======================================================
       BORDER RADIUS
    ====================================================== */

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-card: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* ======================================================
       ESPAÇAMENTOS
    ====================================================== */

    --esp-1: 4px;
    --esp-2: 8px;
    --esp-3: 12px;
    --esp-4: 16px;
    --esp-5: 20px;
    --esp-6: 24px;
    --esp-7: 32px;
    --esp-8: 40px;

    /* ======================================================
       SOMBRAS
    ====================================================== */

    --sombra-suave: 0 12px 30px rgba(15, 23, 42, 0.08);
    --sombra-card: 0 10px 24px rgba(0, 51, 102, 0.10);

    --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 14px 34px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 22px 55px rgba(15, 23, 42, 0.12);
	
	    /* ======================================================
       TRANSIÇÕES
    ====================================================== */

    --transition-fast: 0.16s ease;
    --transition-base: 0.22s ease;
    --transition-slow: 0.32s ease;

    /* ======================================================
       Z-INDEX
    ====================================================== */

    --z-sidebar: 100;
    --z-modal: 999;
    --z-modal-premium: 99999;
    --z-toast: 100000;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - GRADIENTES OFICIAIS
   ----------------------------------------------------------
   Gradientes semânticos autorizados para dashboards,
   indicadores, status visuais, gráficos e barras de progresso.
   Cabeçalhos e modais devem usar cores sólidas.
========================================================== */

:root {
    --gradient-primary: linear-gradient(135deg, var(--azul-aj), var(--aj-info));
    --gradient-success: linear-gradient(135deg, var(--verde), #22c55e);
    --gradient-danger: linear-gradient(135deg, var(--vermelho), #ef4444);
    --gradient-warning: linear-gradient(135deg, #ca8a04, #facc15);
    --gradient-purple: linear-gradient(135deg, var(--roxo), #a855f7);
    --gradient-info: linear-gradient(135deg, var(--aj-info), #38bdf8);
    --gradient-dark: linear-gradient(145deg, #1e293b, #0f172a);
    --gradient-dark-soft: linear-gradient(145deg, #172033, #111827);
	--gradient-sidebar: linear-gradient(180deg, var(--azul-aj-escuro) 0%, var(--azul-aj-profundo) 100%);
}

/* ==========================================================
BASE GLOBAL E RESET VISUAL
========================================================== */

* {
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: var(--fundo-sistema);
    color: var(--texto-principal);
}

/* ==========================================================
LAYOUT PRINCIPAL DO SISTEMA
========================================================== */

.layoutSistema {
    min-height: 100vh;
    background: var(--fundo-sistema);
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - SIDEBAR E MENU LATERAL
========================================================== */

.sidebar {
    width: 260px;
    height: calc(100vh - 24px);
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 24px 18px;
    background: var(--gradient-sidebar);
    border-radius: var(--radius-lg);
    box-shadow: 0 22px 48px rgba(0, 38, 77, 0.28);

    overflow: hidden;
}

.conteudoSistema {
    margin-left: 300px;
    min-height: 100vh;
    padding: 32px;
    position: relative;
    z-index: 1;
    background: var(--fundo-sistema);
}

.container {
    width: 100%;
    max-width: 1240px;
}

.oculto {
    display: none !important;
}

.sidebarLogo {
    padding: 8px 8px 24px;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebarLogo strong {
    display: block;
    color: var(--texto-claro);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.sidebarLogo span {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
}

.menuLateral {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow-y: auto;
    padding-right: 8px;
}

.sidebar button.menuItem,
.menuItem {
    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 14px;

    border: none;
    border-radius: var(--radius-md);

    background: transparent;
    color: rgba(255, 255, 255, 0.88) !important;

    font-size: 14px;
    font-weight: 700;
    text-align: left;

    cursor: pointer;

    transition:
        background 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.sidebar button.menuItem i,
.sidebar button.menuItem span,
.menuItem i,
.menuItem span {
    color: inherit !important;
}

.menuItem i {
    min-width: 22px;
    font-size: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.sidebar button.menuItem:hover,
.menuItem:hover {
    background: rgba(255, 255, 255, 0.10);
    transform: translateX(3px);
}

.sidebar button.menuItem.ativo,
.menuItem.ativo {
    background: var(--branco) !important;
    color: var(--azul-aj) !important;
    box-shadow: 0 14px 28px rgba(255, 255, 255, 0.12);
}

.sidebar button.menuItem.desativado,
.sidebar button.menuItem.desativado i,
.sidebar button.menuItem.desativado span,
.menuItem.desativado {
    color: rgba(255, 255, 255, 0.42) !important;
    opacity: 1;
    cursor: not-allowed;
}

.menuItem.desativado:hover {
    transform: none;
    background: transparent;
}

.sidebar button.menuItem.sair,
.sidebar button.menuItem.sair i,
.sidebar button.menuItem.sair span,
.menuItem.sair {
    margin-top: auto;
    color: #fecaca !important;
}

.menuItem.sair:hover {
    background: rgba(185, 28, 28, 0.24);
    color: var(--texto-claro) !important;
}

.sidebarRodape {
    margin-top: 18px;
    padding: 16px 10px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.usuarioSidebar strong {
    display: block;
    color: var(--texto-claro);
    font-size: 13px;
    font-weight: 700;
}

.usuarioSidebar span {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - CABEÇALHO PADRÃO DE TELAS
   ----------------------------------------------------------
   Estrutura visual oficial para títulos, subtítulos e
   descrições dos módulos do AJ ERP.
========================================================== */

.container .cabecalhoSistema h1 {
    margin: 0;
    color: var(--azul-aj);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -1px;
}

.container .cabecalhoSistema h2 {
    margin: 8px 0 6px;
    color: var(--texto-principal);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.container .cabecalhoSistema p {
    margin: 0;
    color: var(--texto-secundario);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
}

/* MODO ESCURO */

body.modoEscuro .container .cabecalhoSistema h1,
body.dark .container .cabecalhoSistema h1 {
    color: var(--texto-claro) !important;
}

body.modoEscuro .container .cabecalhoSistema h2,
body.dark .container .cabecalhoSistema h2 {
    color: #e2e8f0 !important;
}

body.modoEscuro .container .cabecalhoSistema p,
body.dark .container .cabecalhoSistema p {
    color: #94a3b8 !important;
}

/* ==========================================================
BOTÕES GERAIS DO SISTEMA
========================================================== */

button {
    cursor: pointer;
}

.acoes {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

#campoPesquisa {
    flex: 1;
    padding: 13px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 15px;
}

.filtros {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.resumoPesquisa {
    color: var(--texto-secundario);
    font-size: 14px;
    margin: 12px 0 18px 0;
    font-weight: 600;
}

.ordenacaoClientes {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.ordenacaoClientes label {
    color: var(--azul-aj);
    font-weight: 700;
}

.ordenacaoClientes select {
    width: 180px;
}

/* Foco de inputs/selects centralizado em CAMPOS DO SISTEMA. */

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - DASHBOARD PRINCIPAL
   ----------------------------------------------------------
   Base visual para cards de resumo, blocos e listas rápidas
   do dashboard inicial do AJ ERP.
========================================================== */

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

.cardResumo {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--branco);
    border: 1px solid var(--borda-suave);
    border-left: 6px solid var(--azul-aj);
    border-radius: var(--radius-card);
    padding: 22px;
    box-shadow: var(--sombra-card);
}

.cardResumo span {
    display: block;
    margin-bottom: 4px;
    color: var(--texto-secundario);
    font-size: 13px;
    font-weight: 600;
}

.cardResumo strong {
    display: block;
    color: var(--azul-aj);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
}

.cardResumo.ativo {
    border-left-color: var(--aj-success);
}

.cardResumo.inativo {
    border-left-color: var(--aj-danger);
}

.cardResumo.premium {
    border-left-color: var(--roxo);
}

.cardResumo.basico {
    border-left-color: var(--aj-info);
}

.cardResumo.ultimo {
    border-left-color: var(--aj-warning);
}

.dashboardSecoes {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 18px;
    margin-top: 24px;
}

.dashboardBloco {
	background: var(--branco);
	border: 1px solid var(--borda-suave);
	border-radius: var(--radius-card);
	padding: 20px;
	box-shadow: var(--sombra-suave);
}

.dashboardBloco h3 {
    margin: 0 0 12px;
    color: var(--azul-aj);
    font-size: 18px;
    font-weight: 900;
}

.dashboardSituacaoFinanceira {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.dashboardSituacaoTopo {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 20px;
	align-items: center;
}

.dashboardDonutSituacao {
	width: 170px;
	height: 170px;
	border-radius: 50%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dashboardDonutCentro {
	position: absolute;
	width: 116px;
	height: 116px;
	border-radius: 50%;
	background: var(--bg-card);
	border: 1px solid var(--borda-suave);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-shadow: var(--sombra-suave);
}

.dashboardDonutCentro strong {
	font-size: 36px;
	line-height: 1;
	font-weight: 900;
	color: var(--azul-aj);
}

.dashboardDonutCentro span {
	font-size: 13px;
	color: var(--cinza-texto);
}

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

.dashboardLegendaItem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.dashboardLegendaRotulo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: var(--azul-aj);
}

.dashboardLegendaCor {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
}

.dashboardLegendaCor.em-dia {
	background: #166534;
}

.dashboardLegendaCor.pendente {
	background: #92400e;
}

.dashboardLegendaCor.inadimplente {
	background: #991b1b;
}

.dashboardLegendaItem strong {
	font-size: 16px;
	font-weight: 900;
	color: var(--azul-aj);
}

.dashboardSituacaoValores {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.dashboardMiniCard {
	background: var(--bg-card);
	border: 1px solid var(--borda-suave);
	border-radius: 14px;
	padding: 14px 16px;
}

.dashboardMiniCard small {
	display: block;
	font-size: 12px;
	color: var(--cinza-texto);
	margin-bottom: 6px;
}

.dashboardMiniCard strong {
	font-size: 18px;
	font-weight: 900;
	color: var(--azul-aj);
}

.itemDashboard,
.planoLinha {
    padding: 12px 0;
    border-bottom: 1px solid var(--borda-suave);
}

.itemDashboard:last-child,
.planoLinha:last-child {
    border-bottom: none;
}

.itemDashboard strong {
    display: block;
    color: var(--texto-principal);
    font-weight: 800;
}

.itemDashboard small {
    color: var(--texto-secundario);
}

.planoLinha {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.planoLinha strong {
    color: var(--azul-aj);
    font-weight: 800;
}

/* ==========================================================
DASHBOARD - RESUMO POR PLANO
========================================================== */

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


.planoResumoCard {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	min-height: 58px;

	padding: 12px 14px;

	background: var(--bg-card);
	border: 1px solid var(--borda-suave);
	border-radius: var(--radius-card);
}


.planoResumoCard span {
	font-size: 12px;
	font-weight: 700;
	color: var(--azul-aj);

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


.planoResumoCard strong {
	flex-shrink: 0;

	font-size: 22px;
	font-weight: 900;
	color: var(--azul-aj);
}

/* ==========================================================
DASHBOARD - VISÃO FINANCEIRA
========================================================== */

.dashboardFinanceiro {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 18px;
	margin-top: 18px;
}


.dashboardFinanceiroCabecalho p {
	margin: -6px 0 14px;
	font-size: 12px;
	color: var(--texto-secundario);
}


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


.dashboardIndicadorFinanceiro {
	padding: 12px 14px;
	border: 1px solid var(--borda-suave);
	border-radius: var(--radius-card);
}


.dashboardIndicadorFinanceiro span,
.dashboardFinanceiroValores span {
	display: block;
	font-size: 11px;
	color: var(--texto-secundario);
}


.dashboardIndicadorFinanceiro strong {
	display: block;
	margin-top: 4px;
	font-size: 20px;
	color: var(--azul-aj);
}


.dashboardGraficoBarras {
	display: flex;
	flex-direction: column;
	gap: 10px;
}


.dashboardBarraTopo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 5px;
	font-size: 11px;
}


.dashboardBarraTopo span {
	font-weight: 800;
	color: var(--azul-aj);
}


.dashboardBarraTrilho {
	height: 7px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--fundo-claro);
}


.dashboardBarraValor {
	height: 100%;
	border-radius: inherit;
	background: var(--azul-aj);
}

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

.dashboardFinanceiroValores > div {
	padding: 12px 14px;
	border: 1px solid var(--borda-suave);
	border-radius: var(--radius-card);
}


.dashboardFinanceiroValores strong {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	color: var(--azul-aj);
}

/* ==========================================================
DASHBOARD - RESPONSIVO
========================================================== */

@media (max-width: 768px) {

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

	.dashboardFinanceiroIndicadores,
	.dashboardFinanceiroValores {
		grid-template-columns: 1fr;
	}

	.dashboardSituacaoFinanceira {
		grid-template-columns: 1fr;
		justify-items: center;
	}

}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - LEGADO CLIENTES E USUÁRIOS
   ----------------------------------------------------------
   Bloco preservado por compatibilidade.
   Cards premium atuais devem usar CARD SISTEMA.
========================================================== */

.cliente {
    background: var(--branco);
    margin-bottom: 12px;
}

.cardPremium {
    padding: 22px;
    border-left: 6px solid var(--azul-aj);
    border-radius: var(--radius-card);
    box-shadow: var(--sombra-suave);
    background: var(--branco);
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.cardPremium:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(0, 51, 102, 0.12);
}

.cardTopo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.cardTopo h3 {
    margin: 0;
    color: var(--azul-aj);
    font-size: 18px;
    font-weight: 800;
}

.cardTopo p {
    margin: 4px 0 0;
    color: var(--texto-secundario);
    font-size: 14px;
}

.cardInfo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.cardInfo div {
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    padding: 12px;
}

.cardInfo small {
    display: block;
    color: var(--texto-secundario);
    font-size: 12px;
    margin-bottom: 4px;
}

.cardInfo strong {
    color: var(--texto-principal);
    font-size: 14px;
    word-break: break-word;
}

.acoesCliente,
.acoesUsuario,
.detalheAcoes {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.acoesCliente {
    margin-top: 12px;
}

.detalheAcoes {
    margin-top: 22px;
}

.badgeStatus.ativo {
    background: var(--aj-success-soft);
    color: #166534 !important;
}

.badgeStatus.inativo {
    background: var(--aj-danger-soft);
    color: #991b1b !important;
}

.detalheCliente {
    background: var(--branco);
    border-radius: var(--radius-card);
    padding: 24px;
    border-left: 6px solid var(--azul-aj);
    box-shadow: var(--sombra-suave);
    margin-bottom: 24px;
}

.detalheTitulo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin: 20px 0;
}

.detalheTitulo h2 {
    margin: 0;
    color: var(--azul-aj);
}

.detalheTitulo p {
    margin: 6px 0 0;
    color: var(--texto-secundario);
}

.detalheGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.detalheCampo {
    background: var(--bg-soft);
    padding: 14px;
    border-radius: var(--radius-sm);
}

.detalheCampo small {
    display: block;
    color: var(--texto-secundario);
    margin-bottom: 5px;
}

.detalheCampo strong {
    color: var(--texto-principal);
}

.listaFichas {
    margin-top: 24px;
}

.tabelaFichasCabecalho,
.tabelaUsuariosCabecalho {
    display: grid;
    gap: 12px;
    background: var(--azul-aj);
    color: var(--texto-claro);
    padding: 14px 18px;
    border-radius: 12px 12px 0 0;
    font-weight: 800;
    font-size: 14px;
}

.tabelaFichasCabecalho {
    grid-template-columns: 130px 1.5fr 180px 120px 150px;
}

.tabelaUsuariosCabecalho {
    grid-template-columns: 70px 1.3fr 1.5fr 130px 120px 190px;
}

.tabelaFichasLinha,
.tabelaUsuariosLinha {
    display: grid;
    gap: 12px;
    align-items: center;
    background: var(--branco);
    padding: 16px 18px;
    border-bottom: 1px solid var(--borda-suave);
    box-shadow: var(--sombra-suave);
}

.tabelaFichasLinha {
    grid-template-columns: 130px 1.5fr 180px 120px 150px;
}

.tabelaUsuariosLinha {
    grid-template-columns: 70px 1.3fr 1.5fr 130px 120px 190px;
}

.tabelaFichasLinha:last-child,
.tabelaUsuariosLinha:last-child {
    border-radius: 0 0 12px 12px;
}

.tabelaFichasLinha small {
    display: block;
    margin-top: 4px;
    color: var(--texto-secundario);
}

.textoProtegido {
    color: var(--texto-secundario);
    font-weight: 700;
    font-size: 13px;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - MODAL BASE DO SISTEMA
   ----------------------------------------------------------
   Estrutura global oficial para modais do AJ ERP.
   Modais devem permanecer fora das sections/workspaces,
   no final do index.html, junto aos modais globais.
========================================================== */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal.aberto {
    display: flex;
}

.modalConteudo {
    width: min(980px, 96vw);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--branco);
    color: var(--texto-principal);
    border: 1px solid var(--borda-suave);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.modalTopo {
    min-height: 76px;
    padding: 0 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--azul-aj);
    border-bottom:
        1px solid rgba(255, 255, 255, 0.10);
}

.modalTopo h2 {
    margin: 0;
    color: var(--texto-claro);
    font-size: 24px;
    font-weight: 900;
}

.modalTopo p {
    margin: 4px 0 0;

    color: rgba(255, 255, 255, 0.76);

    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
}

.btnFechar {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    color: var(--texto-claro);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: none;
    transition: background var(--transition-base), opacity var(--transition-base);
}

.btnFechar:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: none;
}

.btnFechar:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.45);
    outline-offset: 2px;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - CORPO PADRÃO DE MODAL BASE DO SISTEMA
   ----------------------------------------------------------
   Área de conteúdo rolável para modais que não utilizam
   formulário. Reutilizável em consultas, visualizações,
   históricos e demais conteúdos de leitura.
========================================================== */

.modalCorpo {
    flex: 1 1 auto;
    min-height: 0;
    padding: 26px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - FICHA DE LEITURA EM MODAL
   ----------------------------------------------------------
   Estrutura oficial para modais de consulta e visualização.
========================================================== */

.modalFichaCabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;

    padding-bottom: 18px;

    border-bottom:
        1px solid var(--borda-suave);
}

.modalFichaCabecalho h3 {
    margin: 0;

    color: var(--azul-aj);

    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.modalFichaCabecalho p {
    margin: 5px 0 0;

    color: var(--texto-secundario);

    font-size: 13px;
    line-height: 1.45;
}

/* ==========================================================
   STATUS DENTRO DA FICHA
========================================================== */

.modalFichaCabecalho .badgeSistema {
    flex-shrink: 0;
    min-width: 74px;
    padding: 7px 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fundo-suave);
    color: var(--azul-aj);
    border: 1px solid var(--borda-suave);
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

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

.modalSecao {
    padding: 15px 0;
    border-bottom:
        1px solid var(--borda-suave);
}

.modalSecao:last-child {
    padding-bottom: 4px;
    border-bottom: none;
}

.modalSecaoTitulo {
    margin: 0 0 12px;
    color: var(--azul-aj);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
}

/* ==========================================================
   GRID DE DADOS
========================================================== */

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

.modalDado {
    min-width: 0;
}

.modalDado--grande {
    grid-column: 1 / -1;
}

/* ==========================================================
   LABEL
========================================================== */

.modalDado small {
    display: block;
    margin: 0 0 2px;
    color: var(--texto-secundario);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
}

/* ==========================================================
   VALOR
========================================================== */

.modalDado strong {
    display: block;

    margin: 0;

    color: var(--texto-principal);

    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;

    word-break: break-word;
}

.modalDado p {
    margin: 0;

    color: var(--texto-principal);

    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;

    word-break: break-word;
}

/* ==========================================================
MODO ESCURO - FICHA DE LEITURA EM MODAL
========================================================== */

body.modoEscuro .modalFichaCabecalho {
	border-bottom-color: #40506a;
}

body.modoEscuro .modalFichaCabecalho h3 {
	color: #ffffff;
}

body.modoEscuro .modalFichaCabecalho p {
	color: #cbd5e1;
}

body.modoEscuro .modalSecao {
	border-bottom-color: #40506a;
}

body.modoEscuro .modalSecaoTitulo {
	color: #e5edf7;
}

body.modoEscuro .modalDado small {
	color: #94a3b8;
}

body.modoEscuro .modalDado strong,
body.modoEscuro .modalDado p {
	color: #f8fafc;
}

/* ==========================================================
   RESPONSIVIDADE
========================================================== */

@media (max-width: 700px) {

    .modalFichaCabecalho {
        flex-direction: column;
        gap: 12px;
    }

    .modalDadosGrid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .modalDado--grande {
        grid-column: auto;
    }

}

.formGrid {
    flex: 1 1 auto;
    min-height: 0;
    padding: 26px;
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 22px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - CAMPO BASE
========================================================== */

.campo {
    display: flex;
    flex-direction: column;
}

.campoGrande {
    grid-column: span 2;
}

.modalRodape {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 26px;
    background: #f3f4f6;
    border-top:
        1px solid var(--borda-suave);
}

/* ==========================================================
   LOGIN PREMIUM PLUS
========================================================== */

.loginBody {
    margin: 0;
    min-height: 100vh;
    padding: 24px;
    background:
        radial-gradient(circle at 18% 18%, rgba(96, 165, 250, 0.30), transparent 26%),
        radial-gradient(circle at 82% 82%, rgba(0, 51, 102, 0.88), transparent 44%),
        linear-gradient(135deg, #f4f9ff 0%, #dbeafe 42%, #003366 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
	overflow-y: auto;
}

.loginShellPremium {
    width: min(960px, 94vw);
    min-height: 520px;
    margin: 20px 0;
    background: #ffffff;
    border-radius: 34px;
    display: grid;
    grid-template-columns: 54% 46%;
    overflow: hidden;
    box-shadow: 0 34px 90px rgba(0, 31, 63, 0.28);
}

.loginPainelVisual {
    position: relative;
	isolation: isolate;
    padding: 54px;
    background: linear-gradient(135deg, #003366 0%, #155da0 52%, #7c3aed 100%);
    color: #ffffff;
    overflow: hidden;
}

.loginMarcaPremium {
    position: relative;
    z-index: 10;
    max-width: 420px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loginLogoPremium {
    width: 230px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.loginMarcaPremium small {
    display: block;
    margin-top: 12px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.45;
    opacity: 0.96;
    letter-spacing: 0.5px;
    text-align: center;
}

/* ==========================================================
   LOGIN PREMIUM PLUS - IMAGEM PNG
========================================================== */

.loginIlustracaoPremium {
    position: relative;
    z-index: 10;
    height: 330px;
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loginImagemPremium {
    width: 100%;
    max-width: 350px;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.16));
}

.loginPainelVisual .loginRodape {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.4px;
    z-index: 5;
}

.loginPainelFormulario {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background:
        radial-gradient(circle at 50% 24%, rgba(124, 58, 237, 0.08), transparent 25%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.loginContainer {
    width: 100%;
    max-width: 390px;
}

.loginCardPremium {
    width: 100%;
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: none;
}

.loginAvatar {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    margin: 0 auto 28px;
    background: radial-gradient(circle at 35% 30%, #ffffff, #eef2f7);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 18px 38px rgba(15, 23, 42, 0.08),
        inset 0 0 0 1px rgba(148, 163, 184, 0.24);
}

.loginAvatar i {
    font-size: 62px;
    color: #7c3aed;
}

.loginCardPremium h1 {
    margin: 0 0 26px;
    color: #003366;
    font-size: 27px;
    font-weight: 900;
}

.loginCardPremium p {
    display: none;
}

.campoLoginPremium {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.campoLoginPremium i {
    position: absolute;
    right: 18px;
    color: #64748b;
    font-size: 18px;
    z-index: 2;
}

.campoLoginPremium input {
    width: 100%;
    height: 52px;
    padding: 0 54px 0 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    outline: none;
    background: #e5e7eb;
    color: #003366;
    font-size: 14px;
    font-weight: 700;
    transition: var(--transition-base);
}

.campoLoginPremium input:focus {
    background: #ffffff;
    border-color: rgba(124, 58, 237, 0.45);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.10);
}

.campoLoginPremium input::placeholder {
    color: #7c8aa5;
    font-weight: 500;
}

.btnLogin {
    width: 100%;
    max-width: 235px;
    margin-top: 18px;
    padding: 15px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 18px 38px rgba(124, 58, 237, 0.28);
    transition: var(--transition-base);
}

.btnLogin:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #6d28d9, #1d4ed8);
}

.mensagemLogin {
    margin-top: 16px;
    color: var(--azul-aj);
    font-size: 13px;
    font-weight: 700;
}

/* ==========================================================
   LOGIN PREMIUM PLUS - RESPONSIVO
========================================================== */

@media (max-width: 980px) {
    .loginShellPremium {
        grid-template-columns: 1fr;
        width: min(460px, 94vw);
        min-height: auto;
    }

    .loginPainelVisual {
        display: none;
    }

    .loginPainelFormulario {
        padding: 48px 32px;
    }
}

@media (max-width: 480px) {
    .loginBody {
        padding: 16px;
        align-items: flex-start;
        overflow-y: auto;
    }

    .loginShellPremium {
        width: 100%;
        border-radius: 26px;
    }

    .loginPainelFormulario {
        padding: 42px 24px;
    }

    .loginAvatar {
        width: 104px;
        height: 104px;
        margin-bottom: 24px;
    }

    .loginAvatar i {
        font-size: 56px;
    }

    .loginCardPremium h1 {
        font-size: 24px;
    }

    .btnLogin {
        max-width: 100%;
    }
}

/* FIM DO CSS LOGIN PREMIUM PLUS */

@media (max-width: 1100px) {
    .tabelaUsuariosCabecalho,
    .tabelaFichasCabecalho {
        display: none;
    }

    .tabelaUsuariosLinha,
    .tabelaFichasLinha {
        grid-template-columns: 1fr;
        border-radius: 12px;
        margin-bottom: 12px;
    }
}

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

    .cardInfo,
    .detalheGrid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .acoes {
        flex-direction: column;
    }
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - SIDEBAR RESPONSIVA
========================================================== */

@media (max-width: 800px) {
    .sidebar {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
        margin: 12px;
    }
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - REFINO MENU LATERAL
========================================================== */

.sidebar .menuItem {
    color: var(--texto-claro) !important;
    background: transparent;
}

.sidebar .menuItem * {
    color: inherit !important;
}

.sidebar .menuItem.ativo {
    background: var(--branco) !important;
    color: var(--azul-aj) !important;
}

.sidebar .menuItem.ativo * {
    color: var(--azul-aj) !important;
}

.sidebar .menuItem.desativado {
    color: rgba(255, 255, 255, 0.45) !important;
}

.sidebar .menuItem.sair {
    color: #fecaca !important;
}

.formLinha {
    gap: 26px 32px;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - COMPONENTE SCROLLBAR
   ----------------------------------------------------------
   Base visual oficial para barras de rolagem internas do
   AJ ERP. Usada por modais, menus, grades e painéis.
========================================================== */

.modalConteudo::-webkit-scrollbar,
.formGrid::-webkit-scrollbar,
.menuLateral::-webkit-scrollbar,
.gradePlanejamentoWrapper::-webkit-scrollbar,
.pagamentosPainelDomicilio::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.modalConteudo::-webkit-scrollbar-thumb,
.formGrid::-webkit-scrollbar-thumb,
.menuLateral::-webkit-scrollbar-thumb,
.gradePlanejamentoWrapper::-webkit-scrollbar-thumb,
.pagamentosPainelDomicilio::-webkit-scrollbar-thumb {
    background: rgba(0, 51, 102, 0.32);
    border-radius: var(--radius-pill);
}

.modalConteudo::-webkit-scrollbar-thumb:hover,
.formGrid::-webkit-scrollbar-thumb:hover,
.menuLateral::-webkit-scrollbar-thumb:hover,
.gradePlanejamentoWrapper::-webkit-scrollbar-thumb:hover,
.pagamentosPainelDomicilio::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 51, 102, 0.48);
}

.modalConteudo::-webkit-scrollbar-track,
.formGrid::-webkit-scrollbar-track,
.menuLateral::-webkit-scrollbar-track,
.gradePlanejamentoWrapper::-webkit-scrollbar-track,
.pagamentosPainelDomicilio::-webkit-scrollbar-track {
    background: transparent;
}

/* MODO ESCURO */

body.modoEscuro .modalConteudo::-webkit-scrollbar-thumb,
body.modoEscuro .formGrid::-webkit-scrollbar-thumb,
body.modoEscuro .menuLateral::-webkit-scrollbar-thumb,
body.modoEscuro .gradePlanejamentoWrapper::-webkit-scrollbar-thumb,
body.modoEscuro .pagamentosPainelDomicilio::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.35);
}

body.modoEscuro .modalConteudo::-webkit-scrollbar-thumb:hover,
body.modoEscuro .formGrid::-webkit-scrollbar-thumb:hover,
body.modoEscuro .menuLateral::-webkit-scrollbar-thumb:hover,
body.modoEscuro .gradePlanejamentoWrapper::-webkit-scrollbar-thumb:hover,
body.modoEscuro .pagamentosPainelDomicilio::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.52);
}

.cardResumo {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 96px;
    border-left: none !important;
    position: relative;
    overflow: hidden;
}

.cardResumo::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
}

.iconeCard {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    flex-shrink: 0;
}

.cardAzul::before,
.cardAzul .iconeCard {
    background: var(--azul-aj);
}

.cardVerde::before,
.cardVerde .iconeCard {
    background: var(--gradient-success);
}

.cardVermelho::before,
.cardVermelho .iconeCard {
    background: var(--gradient-danger);
}

.cardRoxo::before,
.cardRoxo .iconeCard {
    background: var(--gradient-purple);
}

.cardBlue::before,
.cardBlue .iconeCard {
    background: var(--gradient-info);
}

.cardDourado::before,
.cardDourado .iconeCard {
    background: var(--gradient-warning);
}

.cardResumo span {
    display: block;
    margin-bottom: 6px;

    font-size: 14px;
    font-weight: 600;
    color: var(--texto-secundario);
}

.cardResumo strong {
    display: block;

    font-size: 36px;
    font-weight: 700;
    line-height: 1;

    color: var(--azul-aj);
}

#ultimoCadastro {
    font-size: 24px !important;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.cardResumo:hover {
    transform: translateY(-3px);
    transition: var(--transition-base);
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - DASHBOARD CLIENTES
   ----------------------------------------------------------
   Lista de últimos clientes e resumo por plano.
========================================================== */

.clienteDashboardItem {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;

    padding: 14px 0;

    border-bottom: 1px solid var(--borda-suave);

    transition:
        background 0.20s ease,
        padding 0.20s ease;
}

.clienteDashboardItem:last-child {
    border-bottom: none;
}

.clienteDashboardItem:hover {
    background: var(--bg-soft);
    border-radius: var(--radius-md);
    padding-left: 8px;
    padding-right: 8px;
}

.avatarClienteDashboard {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-md);

    background: var(--azul-aj);
    color: var(--texto-claro);

    font-size: 14px;
    font-weight: 800;

    flex-shrink: 0;
}

.clienteDashboardInfo strong {
    display: block;

    color: var(--azul-aj);

    font-size: 14px;
    font-weight: 800;
}

.clienteDashboardInfo span {
    display: block;

    margin-top: 2px;

    color: var(--texto-secundario);

    font-size: 12px;
}

.dataClienteDashboard {
    padding: 6px 10px;

    border-radius: var(--radius-pill);

    color: var(--azul-aj);

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}

.planoDashboardItem {
    margin-bottom: 18px;
}

.planoDashboardItem:last-child {
    margin-bottom: 0;
}

.planoDashboardTopo {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-bottom: 8px;
}

.planoDashboardTopo span,
.planoDashboardTopo strong {
    color: var(--azul-aj);

    font-size: 14px;
    font-weight: 700;
}

.planoDashboardBarra {
    height: 9px;

    background: var(--bg-soft);

    border-radius: var(--radius-pill);

    overflow: hidden;
}

.planoDashboardBarra div {
    height: 100%;

    border-radius: inherit;

    background: var(--gradient-primary);

    transition: width 0.30s ease;
}

.avatarCliente {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--azul-aj);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
}

.infoChip {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px;
}

.infoChip i {
    color: #003366;
    font-size: 18px;
}

.infoChip small {
    display: block;
    color: #64748b;
    font-size: 11px;
    margin-bottom: 3px;
}

.infoChip strong {
    color: #0f172a;
    font-size: 13px;
    word-break: break-word;
}

.btnAcaoCliente {
    border: none;
    border-radius: 11px;
    padding: 10px 14px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.2s ease;
}

.btnAcaoCliente:hover {
    transform: translateY(-1px);
}

.btnAcaoCliente.detalhes {
    background: #e0f2fe;
    color: #075985;
}

.btnAcaoCliente.editar {
    background: #003366;
    color: #ffffff;
}

.btnAcaoCliente.status.inativar {
    background: var(--vermelho);
    color: #ffffff;
}

.btnAcaoCliente.status.reativar {
    background: #0f766e;
    color: #ffffff;
}

.btnAcaoCliente.pdf {
    background: #334155;
    color: #ffffff;
}

.usuarioIdentidade {
    display: flex;
    align-items: center;
    gap: 14px;
}

.avatarUsuario {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--azul-aj);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
}

.usuarioIdentidade h3 {
    margin: 0;
    color: #003366;
    font-size: 18px;
    font-weight: 700;
}

.usuarioIdentidade p {
    margin: 4px 0 0 0;
    color: #64748b;
    font-size: 13px;
}

.infoUsuarioChip {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 13px;
}

.infoUsuarioChip i {
    color: #003366;
    font-size: 18px;
}

.infoUsuarioChip small {
    display: block;
    color: #64748b;
    font-size: 11px;
    margin-bottom: 3px;
}

.infoUsuarioChip strong {
    color: #0f172a;
    font-size: 13px;
}

.perfilADMIN {
    background: #dbeafe;
    color: #003366 !important;
}

.perfilGERENTE {
    background: #dcfce7;
    color: #166534 !important;
}

.perfilOPERADOR {
    background: #fef3c7;
    color: #92400e !important;
}

.perfilCONSULTA {
    background: #f3e8ff;
    color: #6b21a8 !important;
}

.textoProtegido.premium {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 11px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
}

.configGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 32px;
}

.configCard{
    position:relative;
    background:#fff;
    border:1px solid #e2e8f0;
    border-left:5px solid #003366;
    border-radius:20px;
    padding:24px;
    display:grid;
    grid-template-columns:60px 1fr;
    gap:18px;
    box-shadow:0 14px 34px rgba(15,23,42,.08);
    transition:.22s;
}

.configCard:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.13);
}

.configIcone {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--azul-aj);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.configCard h3 {
    margin: 0 0 10px 0;
    color: #003366;
}

.configCard p {
    margin: 7px 0;
    color: #475569;
    font-size: 14px;
}

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

.notificacoesContainer {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notificacao {
    min-width: 320px;
    max-width: 420px;
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 12px;
    animation: entrarNotificacao 0.25s ease-out;
    border-left: 6px solid #003366;
}

.notificacaoIcone {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.notificacaoTexto strong {
    display: block;
    color: #003366;
    font-size: 14px;
    margin-bottom: 2px;
}

.notificacaoTexto span {
    color: #64748b;
    font-size: 13px;
}

.notificacaoFechar {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 18px;
    cursor: pointer;
}

.notificacao.sucesso {
    border-left-color: #0f766e;
}

.notificacao.sucesso .notificacaoIcone {
    background: var(--gradient-success);
}

.notificacao.erro {
    border-left-color: #b91c1c;
}

.notificacao.erro .notificacaoIcone {
    background: var(--gradient-danger);
}

.notificacao.aviso {
    border-left-color: #ca8a04;
}

.notificacao.aviso .notificacaoIcone {
    background: var(--gradient-warning);
}

@keyframes entrarNotificacao {
    from {
        transform: translateX(30px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.dashboardResumo {
    margin-top: 15px;
}

.detalheSecao {
    margin-top: 22px;
    background: #ffffff;
    border-radius: 18px;
    padding: 20px;
    border-left: 5px solid #003366;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.detalheSecao h3 {
    margin: 0 0 16px 0;
    color: #003366;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detalheGridPremium {
    grid-template-columns: repeat(4, 1fr);
}

.detalheSetores {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.detalheSetores div {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px;
}

.detalheSetores small {
    display: block;
    color: #64748b;
    font-size: 12px;
    margin-bottom: 8px;
}

.setorBadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.setorBadge.sim {
    background: #dcfce7;
    color: #166534;
}

.setorBadge.nao {
    background: #fee2e2;
    color: #991b1b;
}

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

    .detalheSetores {
        grid-template-columns: repeat(2, 1fr);
    }
}

.configCardGrande {
    grid-column: span 2;
}

.configCardTopo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.listaContadoresConfig {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contadorLinhaConfig {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.contadorLinhaConfig strong {
    color: #003366;
    font-size: 14px;
}

.contadorLinhaConfig small {
    color: #64748b;
}

.contadorAcoes {
    display: flex;
    gap: 8px;
    align-items: center;
}

@media (max-width: 900px) {
    .configCardGrande {
        grid-column: span 1;
    }

    .configCardTopo,
    .contadorLinhaConfig {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - CONTROLE DE CAIXA ALTA
========================================================== */

.campoUppercase,
.campoUppercase input,
.campoUppercase textarea,
.campoUppercase select,
input.campoUppercase,
textarea.campoUppercase,
select.campoUppercase {
    text-transform: uppercase;
}

.campoTextoLivre,
.campoTextoLivre input,
.campoTextoLivre textarea,
.campoTextoLivre select,
input.campoTextoLivre,
textarea.campoTextoLivre,
select.campoTextoLivre {
    text-transform: none;
}

.modalConfirmacao {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(5px);
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;
}

.modalConfirmacao.oculto {
    display: none;
}

.modalConfirmacaoCard {
    width: 100%;
    max-width: 430px;
    background: #ffffff;
    border-radius: 24px;
    padding: 34px;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    border-left: 6px solid #eab308;
}

.modalConfirmacaoIcone {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    margin: 0 auto 18px;

    background: #eab308;
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 30px;
}

.modalConfirmacaoCard h3 {
    margin: 0 0 10px;
    color: #003366;
    font-size: 22px;
}

.modalConfirmacaoCard p {
    margin: 0 0 26px;
    color: #64748b;
    line-height: 1.5;
}

.modalConfirmacaoAcoes {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ======================================================
   MODO ESCURO DEFINITIVO - AJ SOLUÇÕES
====================================================== */

html,
body.modoEscuro {
    background: #0f172a !important;
}

body.modoEscuro {
    color: #e5edf7 !important;

    --bg-card: #0f2744;
}

/* Fundo geral do sistema */
body.modoEscuro .app,
body.modoEscuro .sistema,
body.modoEscuro .layout,
body.modoEscuro .layoutSistema,
body.modoEscuro .areaSistema,
body.modoEscuro .conteudo,
body.modoEscuro .conteudoPrincipal,
body.modoEscuro main,
body.modoEscuro .container {
    background: #0f172a !important;
    color: #e5edf7 !important;
}

/* Sidebar */
body.modoEscuro aside,
body.modoEscuro .sidebar,
body.modoEscuro .menuLateral,
body.modoEscuro .barraLateral {
    background: linear-gradient(180deg, #00284f, #00172f) !important;
    color: #ffffff !important;
}

/* Remove fundo diferente atrás dos botões do menu */
body.modoEscuro nav,
body.modoEscuro .menuLateral nav,
body.modoEscuro .menuLateral {
    box-shadow: none !important;
}

/* Itens do menu lateral */
body.modoEscuro .menuItem {
    background: transparent !important;
    color: #dbeafe !important;
    box-shadow: none !important;
    border: none !important;
}

body.modoEscuro .menuItem i,
body.modoEscuro .menuItem span {
    color: #dbeafe !important;
}

body.modoEscuro .menuItem:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.modoEscuro .menuItem:hover i,
body.modoEscuro .menuItem:hover span {
    color: #ffffff !important;
}

body.modoEscuro .menuItem.ativo {
    background: #ffffff !important;
    color: #003366 !important;
}

body.modoEscuro .menuItem.ativo i,
body.modoEscuro .menuItem.ativo span {
    color: #003366 !important;
}

/* Rodapé do usuário no sidebar */
body.modoEscuro .usuarioLogado,
body.modoEscuro .sidebarRodape,
body.modoEscuro .menuRodape {
    background: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

/* Cabeçalhos */
body.modoEscuro .cabecalhoSistema h1,
body.modoEscuro .cabecalhoSistema h2,
body.modoEscuro .cabecalhoSistema p {
    color: #f8fafc !important;
}

/* Cards principais */
body.modoEscuro .configCard,
body.modoEscuro .cardClientePremium,
body.modoEscuro .cardUsuarioPremium,
body.modoEscuro .cardResumo,
body.modoEscuro .dashboardCard,
body.modoEscuro .detalheSecao,
body.modoEscuro .cliente,
body.modoEscuro .usuarioCard,
body.modoEscuro .card,
body.modoEscuro .painel,
body.modoEscuro .box {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e5edf7 !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.25) !important;
}

/* Textos de cards */
body.modoEscuro h1,
body.modoEscuro h2,
body.modoEscuro h3,
body.modoEscuro h4 {
    color: #ffffff !important;
}

body.modoEscuro p,
body.modoEscuro span,
body.modoEscuro label,
body.modoEscuro small {
    color: #cbd5e1 !important;
}

body.modoEscuro strong {
    color: #ffffff !important;
}

/* Chips internos */
body.modoEscuro .infoChip,
body.modoEscuro .infoUsuarioChip,
body.modoEscuro .detalheCampo,
body.modoEscuro .chip {
    background: #0f2744 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.modoEscuro .infoChip *,
body.modoEscuro .infoUsuarioChip *,
body.modoEscuro .detalheCampo * {
    color: inherit !important;
}

/* Dashboard - Últimos clientes e resumo por plano */
body.modoEscuro .ultimosClientes,
body.modoEscuro .resumoPlanos,
body.modoEscuro #ultimosClientes,
body.modoEscuro #resumoPlanos,
body.modoEscuro .dashboardBloco,
body.modoEscuro .dashboardPainel {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e5edf7 !important;
}

/* Remove bloco azul escuro dentro dos itens do dashboard */
body.modoEscuro .clienteDashboardItem,
body.modoEscuro .resumoPlanoItem {
    background: transparent !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: #e5edf7 !important;
}

body.modoEscuro .clienteDashboardItem *,
body.modoEscuro .resumoPlanoItem * {
    color: inherit !important;
}

/* Botões */
body.modoEscuro .btnPrincipal {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
}

body.modoEscuro .btnSecundario {
    background: #334155 !important;
    color: #ffffff !important;
}

body.modoEscuro .btnAcaoCliente i {
	color: inherit !important;
}

/* Formulários e modais */
body.modoEscuro .modal {
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(5px);
}

body.modoEscuro .modalConteudo {
    background: #1e293b !important;
    color: #f8fafc !important;
}

body.modoEscuro .modalTopo {
    background: #003366 !important;
    color: #ffffff !important;
}

body.modoEscuro .modalTopo h2,
body.modoEscuro .modalTopo button {
    color: #ffffff !important;
}

body.modoEscuro .formGrid,
body.modoEscuro .modalRodape,
body.modoEscuro .campoIcone {
    background: transparent !important;
}

body.modoEscuro .campoIcone i,
body.modoEscuro .campoIcone label {
    color: #cbd5e1 !important;
}

body.modoEscuro input,
body.modoEscuro select,
body.modoEscuro textarea {
    background: transparent !important;
    color: #ffffff !important;
    border-color: #64748b !important;
}

body.modoEscuro input::placeholder,
body.modoEscuro textarea::placeholder {
    color: #94a3b8 !important;
}

body.modoEscuro option {
    background: #1e293b !important;
    color: #ffffff !important;
}

/* Badges */
body.modoEscuro .badgePerfil,
body.modoEscuro .usuarioPerfil,
body.modoEscuro .perfilBadge {
    background: #0ea5e9 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

/* Status mantém identidade */
body.modoEscuro .badgeStatus.ativo {
    background: #0f766e !important;
    color: #ffffff !important;
}

body.modoEscuro .badgeStatus.inativo {
    background: var(--vermelho) !important;
    color: #ffffff !important;
}

/* Avatares e ícones */
body.modoEscuro .avatarCliente,
body.modoEscuro .avatarUsuario,
body.modoEscuro .configIcone,
body.modoEscuro .cardIcone {
    color: #ffffff !important;
}

/* Linhas e separadores */
body.modoEscuro hr,
body.modoEscuro .linha,
body.modoEscuro .separador {
    border-color: #334155 !important;
}

/* Notificações e modal de confirmação continuam claros */
body.modoEscuro .notificacao,
body.modoEscuro .modalConfirmacaoCard {
    background: #ffffff !important;
    color: #0f172a !important;
}

body.modoEscuro .modalConfirmacaoCard h3 {
    color: #003366 !important;
}

body.modoEscuro .modalConfirmacaoCard p {
    color: #64748b !important;
}

/* NOTIFICAÇÕES PREMIUM - MODO ESCURO */
body.modoEscuro .notificacao {
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.35) !important;
}

body.modoEscuro .notificacao * {
    color: inherit !important;
}

body.modoEscuro .notificacao h4,
body.modoEscuro .notificacao strong {
    color: #ffffff !important;
}

body.modoEscuro .notificacao p,
body.modoEscuro .notificacao span {
    color: #cbd5e1 !important;
}

body.modoEscuro .notificacao .iconeNotificacao,
body.modoEscuro .notificacao i {
    color: #ffffff !important;
}

body.modoEscuro .notificacao.sucesso {
    border-left-color: #22c55e !important;
}

body.modoEscuro .notificacao.erro {
    border-left-color: #ef4444 !important;
}

body.modoEscuro .notificacao.aviso {
    border-left-color: #eab308 !important;
}

body.modoEscuro .notificacao button {
    color: #cbd5e1 !important;
}

body.modoEscuro .notificacao button:hover {
    color: #ffffff !important;
}

/* DETALHE DO CLIENTE - MODO ESCURO */
body.modoEscuro #detalheCliente,
body.modoEscuro .detalheCliente,
body.modoEscuro #conteudoDetalheCliente {
    background: #0f172a !important;
    color: #e5edf7 !important;
}

body.modoEscuro .detalheTitulo,
body.modoEscuro .detalhePremiumTitulo {
    background: #1e293b !important;
    color: #ffffff !important;
    border-color: #334155 !important;
}

body.modoEscuro .detalheTitulo h2,
body.modoEscuro .detalhePremiumTitulo h2 {
    color: #ffffff !important;
}

body.modoEscuro .detalheTitulo p,
body.modoEscuro .detalhePremiumTitulo p {
    color: #cbd5e1 !important;
}

body.modoEscuro .detalheSecao {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body.modoEscuro .detalheCampo small {
    color: #cbd5e1 !important;
}

body.modoEscuro .detalheCampo strong {
    color: #ffffff !important;
}

/* CABEÇALHO DETALHE CLIENTE */
body.modoEscuro .detalheTitulo,
body.modoEscuro .detalhePremiumTitulo,
body.modoEscuro .clienteDetalheTopo {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    padding-left: 0 !important;

    padding-right: 0 !important;
}

body.modoEscuro .detalhePremiumTitulo h2 {
    color: #ffffff !important;
    font-size: 2rem;
    font-weight: 700;
}

body.modoEscuro .detalhePremiumTitulo p {
    color: #cbd5e1 !important;
}

/* SETORES ATENDIDOS - DETALHE CLIENTE - MODO ESCURO */
body.modoEscuro .detalheSetores > div {
    background: #0f2744 !important;
    border: 1px solid #334155 !important;
    color: #ffffff !important;
}

body.modoEscuro .detalheSetores > div small {
    color: #cbd5e1 !important;
}

body.modoEscuro .setorBadge.sim {
	background: rgba(34, 197, 94, 0.18) !important;
	color: #86efac !important;
}

body.modoEscuro .setorBadge.nao {
	background: rgba(239, 68, 68, 0.18) !important;
	color: #fca5a5 !important;
}

body.modoEscuro .setorBadge i {
	color: inherit !important;
}

/* DETALHE CLIENTE - CARDS INTERNOS PREMIUM */
body.modoEscuro .detalheCampo {
    background: #0f2744 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.modoEscuro .detalheCampo:hover {
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

.loginAvatar.comFoto {
    background: transparent;
    padding: 0;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.55);
}

.loginAvatar.comFoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ==========================================================
DESIGN SYSTEM AJ ERP V2.2

MODAL DE INFORMAÇÕES - MODO ESCURO

Descrição:
Adaptação oficial do novo componente modalInfo para
o modo escuro do AJ ERP.

Este componente foi repensado para uso em modais
exclusivamente informativos, como:

- históricos;
- auditorias;
- logs;
- detalhes;
- visualizações;
- informações sem formulário.

Não altera os modais tradicionais de cadastro.
========================================================== */

/* ==========================================================
ESTRUTURA PRINCIPAL
========================================================== */

body.modoEscuro .modalConteudo.modalInfo {
	background: #172235 !important;
	border: 1px solid #40506a !important;
	color: #e5edf7 !important;
	box-shadow:
		0 24px 60px rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================
CABEÇALHO
========================================================== */

body.modoEscuro .modalInfo .modalInfoTopo {
	background: #003f73 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.modoEscuro .modalInfo .modalInfoTituloIcone {
	background: rgba(255, 255, 255, 0.12) !important;
	color: #ffffff !important;
}

body.modoEscuro .modalInfo .modalInfoTituloIcone i {
	color: #ffffff !important;
}

body.modoEscuro .modalInfo .modalInfoTitulo h2 {
	color: #ffffff !important;
}

body.modoEscuro .modalInfo .modalInfoTitulo p {
	color: #cbd5e1 !important;
}

body.modoEscuro .modalInfo .modalInfoTopo .btnFechar {
	background: rgba(255, 255, 255, 0.12) !important;
	color: #ffffff !important;
}

body.modoEscuro .modalInfo .modalInfoTopo .btnFechar i {
	color: #ffffff !important;
}

/* ==========================================================
CORPO
========================================================== */

body.modoEscuro .modalInfo .modalInfoCorpo {
	background: #0f172a !important;
}

/* ==========================================================
RESUMO DA INFORMAÇÃO
========================================================== */

body.modoEscuro .modalInfo .modalInfoResumo {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #e5edf7 !important;
}

body.modoEscuro .modalInfo .modalInfoResumoIcone {
	background: #0f2744 !important;
	color: #7dd3fc !important;
}

body.modoEscuro .modalInfo .modalInfoResumoIcone i {
	color: #7dd3fc !important;
}

body.modoEscuro .modalInfo .modalInfoRotulo {
	color: #94a3b8 !important;
}

body.modoEscuro .modalInfo .modalInfoResumoTitulo {
	color: #ffffff !important;
}

body.modoEscuro .modalInfo .modalInfoResumoSubtitulo {
	color: #cbd5e1 !important;
}

body.modoEscuro .modalInfo .modalInfoResumoSubtitulo span {
	color: #cbd5e1 !important;
}

body.modoEscuro .modalInfo .modalInfoSeparador {
	color: #64748b !important;
}

/* ==========================================================
STATUS
========================================================== */

body.modoEscuro
.modalInfo
.badgeSistema--ativo {
	background: rgba(34, 197, 94, 0.18) !important;
	color: #86efac !important;
	border-color: rgba(34, 197, 94, 0.28) !important;
}

body.modoEscuro
.modalInfo
.badgeSistema--pendente {
	background: rgba(234, 179, 8, 0.18) !important;
	color: #fde047 !important;
	border-color: rgba(234, 179, 8, 0.28) !important;
}

body.modoEscuro
.modalInfo
.badgeSistema--inativo {
	background: rgba(239, 68, 68, 0.18) !important;
	color: #fca5a5 !important;
	border-color: rgba(239, 68, 68, 0.28) !important;
}

/* ==========================================================
ESTADOS
CARREGAMENTO, ERRO E VAZIO
========================================================== */

body.modoEscuro .modalInfo .modalInfoEstado {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #e5edf7 !important;
}

body.modoEscuro .modalInfo .modalInfoEstadoIcone {
	background: #0f2744 !important;
	color: #7dd3fc !important;
}

body.modoEscuro .modalInfo .modalInfoEstadoIcone i {
	color: #7dd3fc !important;
}

body.modoEscuro .modalInfo .modalInfoEstado h3 {
	color: #ffffff !important;
}

body.modoEscuro .modalInfo .modalInfoEstado p {
	color: #cbd5e1 !important;
}

/* ==========================================================
TIMELINE
========================================================== */

body.modoEscuro
.modalInfo
.historicoMovimentacaoItem:not(:last-child)::before {
	background: #334155 !important;
}

body.modoEscuro
.modalInfo
.historicoMovimentacaoMarcador {
	background: #0f2744 !important;
	color: #7dd3fc !important;
}

body.modoEscuro
.modalInfo
.historicoMovimentacaoMarcador i {
	color: inherit !important;
}

body.modoEscuro
.modalInfo
.historicoMovimentacaoConteudo {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #e5edf7 !important;
}

body.modoEscuro
.modalInfo
.historicoMovimentacaoCabecalho h3 {
	color: #ffffff !important;
}

body.modoEscuro
.modalInfo
.historicoMovimentacaoData {
	color: #94a3b8 !important;
}

body.modoEscuro
.modalInfo
.historicoMovimentacaoUsuario {
	color: #cbd5e1 !important;
}

body.modoEscuro
.modalInfo
.historicoMovimentacaoUsuario i,
body.modoEscuro
.modalInfo
.historicoMovimentacaoUsuario span {
	color: #cbd5e1 !important;
}

body.modoEscuro
.modalInfo
.historicoMovimentacaoDescricao {
	color: #cbd5e1 !important;
}

/* ==========================================================
DETALHES DOS EVENTOS
========================================================== */

body.modoEscuro
.modalInfo
.historicoMovimentacaoDetalhe {
	background: #0f2744 !important;
	border-color: #334155 !important;
}

body.modoEscuro
.modalInfo
.historicoMovimentacaoDetalheRotulo {
	color: #94a3b8 !important;
}

body.modoEscuro
.modalInfo
.historicoMovimentacaoDetalheValor {
	color: #ffffff !important;
}

body.modoEscuro
.modalInfo
.historicoMovimentacaoAlteracao {
	color: #cbd5e1 !important;
}

body.modoEscuro
.modalInfo
.historicoMovimentacaoAlteracao span {
	color: #cbd5e1 !important;
}

body.modoEscuro
.modalInfo
.historicoMovimentacaoAlteracao strong {
	color: #ffffff !important;
}

body.modoEscuro
.modalInfo
.historicoMovimentacaoAlteracao i {
	color: #7dd3fc !important;
}


/* ==========================================================
CORES DOS TIPOS DE EVENTO
========================================================== */

body.modoEscuro
.modalInfo
.historicoEventoCriado
.historicoMovimentacaoMarcador {
	background: rgba(14, 165, 233, 0.16) !important;
	color: #7dd3fc !important;
}

body.modoEscuro
.modalInfo
.historicoEventoAdicionado
.historicoMovimentacaoMarcador {
	background: rgba(59, 130, 246, 0.16) !important;
	color: #93c5fd !important;

}

body.modoEscuro
.modalInfo
.historicoEventoEditado
.historicoMovimentacaoMarcador {
	background: rgba(234, 179, 8, 0.16) !important;
	color: #fde047 !important;
}

body.modoEscuro
.modalInfo
.historicoEventoRemovido
.historicoMovimentacaoMarcador,
body.modoEscuro
.modalInfo
.historicoEventoCancelado
.historicoMovimentacaoMarcador {
	background: rgba(239, 68, 68, 0.16) !important;
	color: #fca5a5 !important;
}

body.modoEscuro
.modalInfo
.historicoEventoFinalizado
.historicoMovimentacaoMarcador {
	background: rgba(34, 197, 94, 0.16) !important;
	color: #86efac !important;
}

/* ==========================================================
RODAPÉ
========================================================== */

body.modoEscuro .modalInfo .modalInfoRodape {
	background: #172235 !important;
	border-top-color: #334155 !important;
}

body.modoEscuro
.modalInfo
.modalInfoRodape
.btnSecundario {
	background: #334155 !important;
	border-color: #475569 !important;
	color: #ffffff !important;
}

body.modoEscuro
.modalInfo
.modalInfoRodape
.btnSecundario:hover {
	background: #475569 !important;
	color: #ffffff !important;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - UPLOAD FOTO USUÁRIO
========================================================== */

.uploadFotoUsuario {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    margin-top: 10px;
}

.previewFotoUsuario {
    width: 86px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--azul-aj);
    color: var(--texto-claro);
    font-size: 42px;
}

.previewFotoUsuario img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uploadFotoInfo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.uploadFotoInfo label {
    color: var(--azul-aj);
    font-weight: 700;
}

.uploadFotoInfo small {
    color: var(--texto-secundario);
}

/* MODO ESCURO */

body.modoEscuro .previewFotoUsuario {
    background: #0f2744 !important;
    border: 1px solid #334155 !important;
}

body.modoEscuro .uploadFotoInfo label {
    color: var(--texto-claro) !important;
}

body.modoEscuro .uploadFotoInfo small {
    color: #cbd5e1 !important;
}

.barraAcoesInvestimentos {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 24px 0 18px 0;
}

.barraAcoesInvestimentos .btnPrincipal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.resumoParticipacaoModal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}

.resumoParticipacaoModal div {
    background: rgba(15, 39, 68, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 14px;
}

.resumoParticipacaoModal small {
    display: block;
    color: #cbd5e1;
    font-weight: 600;
    margin-bottom: 6px;
}

.resumoParticipacaoModal strong {
    color: #ffffff;
    font-size: 18px;
}

.cardDashIcone {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 22px;
    margin-bottom: 18px;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - DASHBOARDS GRÁFICOS
   ----------------------------------------------------------
   Áreas gráficas, cards circulares, legendas e rankings.
========================================================== */

.dashboardGraficoArea,
.cardGraficoObraPremium,
.itemRankingObra {
    background: var(--gradient-dark);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.24);
}

.dashboardGraficoArea {
    border-radius: 26px;
    padding: 34px;
    margin: 32px 0;
}

.graficoInvestimentoPremium {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 54px;
}

.graficoCircular,
.graficoObraCircular {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: conic-gradient(#22c55e var(--percentual), #334155 0);
}

.graficoCircular {
    --percentual: 0%;
    width: 220px;
    height: 220px;
    box-shadow:
        inset 0 0 0 18px rgba(15, 23, 42, 0.85),
        0 24px 60px rgba(0, 0, 0, 0.35);
}

.graficoObraCircular {
    --percentual-obra: 0%;
    width: 170px;
    height: 170px;
    margin: 0 auto 24px;
    background: conic-gradient(#22c55e var(--percentual-obra), #334155 0);
    box-shadow:
        inset 0 0 0 16px rgba(15, 23, 42, 0.85),
        0 20px 45px rgba(0, 0, 0, 0.32);
}

.graficoCircular div,
.graficoObraCircular div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0f172a;
}

.graficoCircular div {
    width: 138px;
    height: 138px;
}

.graficoObraCircular div {
    width: 108px;
    height: 108px;
}

.graficoCircular strong,
.graficoObraCircular strong {
    color: var(--texto-principal);
    font-weight: 900;
}

.graficoCircular strong {
    font-size: 34px;
}

.graficoObraCircular strong {
    font-size: 25px;
}

.graficoCircular span,
.graficoObraCircular span {
    color: #cbd5e1;
    font-weight: 700;
}

.graficoCircular span {
    font-size: 13px;
}

.graficoObraCircular span {
    font-size: 12px;
}

.graficoLegenda {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.graficoLegenda div {
    display: grid;
    grid-template-columns: 14px auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
}

.graficoLegenda .bolinha {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    grid-row: span 2;
}

.graficoLegenda .bolinha.investido {
    background: #22c55e;
}

.graficoLegenda .bolinha.disponivel {
    background: #334155;
}

.graficoLegenda strong {
    color: var(--texto-principal);
    font-size: 22px;
    font-weight: 800;
}

.graficoLegenda small {
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
}

.dashboardObrasGraficosArea,
.rankingObrasArea {
    margin: 32px 0;
}

.tituloBlocoDashboard {
    margin-bottom: 18px;
}

.tituloBlocoDashboard h3 {
    color: var(--texto-principal);
    font-size: 22px;
    font-weight: 800;
}

.tituloBlocoDashboard p {
    color: #cbd5e1;
    font-size: 14px;
    margin-top: 4px;
}

.dashboardGraficosObras {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.cardGraficoObraPremium {
    border-radius: 26px;
    padding: 26px;
}

.cardGraficoObraPremium h4 {
    min-height: 44px;
    margin: 0 0 22px;
    color: var(--texto-principal);
    font-size: 18px;
    font-weight: 800;
}

.dadosGraficoObra {
    display: grid;
    gap: 12px;
}

.dadosGraficoObra div {
    background: rgba(15, 39, 68, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 13px 15px;
}

.dadosGraficoObra small {
    display: block;
    margin-bottom: 4px;

    color: #cbd5e1;

    font-weight: 600;
}

.dadosGraficoObra strong {
    color: var(--texto-principal);
    font-weight: 800;
}

.rankingObrasInvestimentos {
    display: grid;
    gap: 14px;
}

.itemRankingObra {
    display: grid;
    grid-template-columns: 1.5fr 2fr auto;
    align-items: center;
    gap: 18px;

    border-radius: var(--radius-lg);
    padding: 18px 20px;
}

.itemRankingObra span {
    margin-right: 8px;

    color: #38bdf8;

    font-weight: 900;
}

.itemRankingObra strong {
    color: var(--texto-principal);
    font-weight: 800;
}

.itemRankingObra small {
    display: block;
    margin-top: 4px;

    color: #cbd5e1;
}

.itemRankingObra b {
    color: #22c55e;
    font-size: 18px;
}

.barraRanking {
    height: 12px;
    background: #334155;
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.barraRanking div {
    height: 100%;
    background: var(--gradient-info);
    border-radius: inherit;
}

/* RESPONSIVO */

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

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

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

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

#telaInvestimentos .cabecalhoSistema {
    margin-bottom: 28px;
}

#telaInvestimentos .configGrid {
    margin-top: 10px;
}

#telaInvestimentos .configCard {
    min-height: 150px;
}

.rankingObrasArea {
    margin-top: 10px;
    margin-bottom: 30px;
}

.dashboardObrasGraficosArea {
    margin-top: 10px;
    margin-bottom: 34px;
}

#telaInvestimentos .configCard .btnPrincipal {
    margin-top: 14px;
    width: fit-content;
    padding: 12px 20px;
    border-radius: 12px;
}

#telaInvestimentos .configCard h3 {
    margin-bottom: 8px;
}

#telaInvestimentos .configCard p {
    max-width: 520px;
    line-height: 1.5;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - REFINO VISUAL DASHBOARD GRÁFICO
   ----------------------------------------------------------
   Camada decorativa controlada para áreas gráficas premium.
========================================================== */

.dashboardGraficoArea {
    position: relative;
    overflow: hidden;
}

.dashboardGraficoArea::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 30% 20%, rgba(37, 99, 235, 0.16), transparent 30%),
        radial-gradient(circle at 75% 70%, rgba(34, 197, 94, 0.10), transparent 28%);

    pointer-events: none;
}

.dashboardGraficoArea > * {
    position: relative;
    z-index: 1;
}

.graficoCircular {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.graficoCircular:hover {
    transform: scale(1.035);
    box-shadow:
        inset 0 0 0 18px rgba(15, 23, 42, 0.88),
        0 30px 80px rgba(34, 197, 94, 0.16);
}

.graficoLegenda div {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(15, 39, 68, 0.45);
    border: 1px solid rgba(255,255,255,0.07);
}

.cardGraficoObraPremium {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.cardGraficoObraPremium:hover {
    transform: translateY(-4px);
    border-color: rgba(56, 189, 248, 0.32);
    box-shadow: 0 28px 70px rgba(0,0,0,0.34);
}

.graficoObraCircular {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.cardGraficoObraPremium:hover .graficoObraCircular {
    transform: scale(1.025);
    box-shadow:
        inset 0 0 0 16px rgba(15, 23, 42, 0.88),
        0 24px 60px rgba(34,197,94,0.14);
}

.rankingObrasArea {
    position: relative;
    padding: 26px;
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.10), transparent 34%),
        linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 22px 55px rgba(0,0,0,0.24);
}

.rankingObrasArea .tituloBlocoDashboard {
    margin-bottom: 22px;
}

.itemRankingObra {
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.itemRankingObra:hover {
    transform: translateX(4px);
    border-color: rgba(56, 189, 248, 0.32);
    box-shadow: 0 18px 45px rgba(0,0,0,0.22);
}

.itemRankingObra:first-child {
    border-color: rgba(34, 197, 94, 0.35);
}

.itemRankingObra:first-child span {
    color: #22c55e;
}

.itemRankingObra b {
    min-width: 70px;
    text-align: right;
}

#telaInvestimentos .configCard {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

#telaInvestimentos .configCard:hover {
    transform: translateY(-4px);
    border-color: rgba(56, 189, 248, 0.32);
    box-shadow: 0 26px 65px rgba(0,0,0,0.30);
}

#telaInvestimentos .configCard > * {
    position: relative;
    z-index: 1;
}

#telaInvestimentos .configIcone {
    box-shadow: 0 16px 35px rgba(37, 99, 235, 0.28);
}

#telaInvestimentos .configCard .btnPrincipal:hover {
    transform: translateY(-1px);
}

#telaParticipantesObra .configGrid {
    margin-bottom: 30px;
}

#telaParticipantesObra .configCard {
    position: relative;
    overflow: hidden;
    min-height: 145px;

    background:
        radial-gradient(
            circle at top right,
            rgba(37, 99, 235, 0.12),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #1e293b,
            #0f172a
        );

    border: 1px solid rgba(255,255,255,0.10);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

#telaParticipantesObra .configCard:hover {

    transform: translateY(-4px);

    border-color:
        rgba(56,189,248,0.30);

    box-shadow:
        0 24px 60px rgba(0,0,0,0.30);
}

#telaParticipantesObra .configCard strong {

    font-size: 24px;
    font-weight: 800;
}

#telaParticipantesObra .configCard h3 {

    font-size: 16px;
    font-weight: 700;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - MODAIS INVESTIMENTOS E OBRAS INTERNAS
   ----------------------------------------------------------
   Complementos específicos para Investidor, Obra,
   Participante e Lançamento. Base herdada do Modal Premium.
========================================================== */

#modalInvestidor.aberto,
#modalObra.aberto,
#modalParticipanteObra.aberto,
#modalLancamento.aberto {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

#modalInvestidor .modalConteudo,
#modalObra .modalConteudo,
#modalParticipanteObra .modalConteudo,
#modalLancamento .modalConteudo {
    width: min(760px, 96vw);
    max-height: 88vh;
}

#modalLancamento .modalConteudo {
    width: min(860px, 96vw);
}

#modalInvestidor .modalCabecalho,
#modalObra .modalCabecalho,
#modalParticipanteObra .modalCabecalho,
#modalLancamento .modalCabecalho {
    min-height: 76px;
    padding: 0 26px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: var(--azul-aj);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

#modalInvestidor .modalCabecalho h2,
#modalObra .modalCabecalho h2,
#modalParticipanteObra .modalCabecalho h2,
#modalLancamento .modalCabecalho h2 {
    margin: 0;

    color: var(--texto-claro);

    font-size: 24px;
    font-weight: 900;
}

#modalObra form,
#modalParticipanteObra form,
#modalLancamento form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;

    max-height: calc(88vh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 26px;
}


#modalInvestidor .grupoCampo:nth-last-child(2),
#modalObra .grupoCampo:nth-last-child(2),
#modalParticipanteObra .grupoCampo:nth-last-child(2),
#modalLancamento .grupoCampo:nth-last-child(2) {
    grid-column: auto;
}

#modalLancamento .grupoCampo:nth-child(4),
#modalLancamento .grupoCampo:nth-child(6) {
    grid-column: 1 / -1;
}

/* RESPONSIVO */

@media (max-width: 760px) {

    #modalLancamento .grupoCampo:nth-child(4),
    #modalLancamento .grupoCampo:nth-child(6) {
        grid-column: auto;
    }
}

/* ==============================
   RESPONSIVIDADE - INVESTIMENTOS
============================== */

@media (max-width: 1200px) {

    #telaInvestimentos .configGrid {
        grid-template-columns: 1fr;
    }

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

    .itemRankingObra b {
        text-align: left;
    }

}

@media (max-width: 768px) {

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

    .dashboardGraficoArea {
        padding: 24px 18px;
    }

    .graficoCircular {
        width: 180px;
        height: 180px;
    }

    .graficoCircular div {
        width: 112px;
        height: 112px;
    }

    .graficoCircular strong {
        font-size: 28px;
    }

    .cardGraficoObraPremium {
        padding: 22px;
    }

    .rankingObrasArea {
        padding: 22px;
    }

}

/* ==============================
   AJUSTES DE FLUXO - INVESTIMENTOS
============================== */

#telaInvestimentos,
#telaGerenciarInvestidores,
#telaGerenciarObras,
#telaGerenciarLancamentos,
#telaParticipantesObra {
    padding-bottom: 60px;
}

#listaInvestidores,
#listaObras,
#listaLancamentos,
#listaParticipantesObra {
    margin-top: 22px;
}

#telaInvestimentos .configGrid {
    margin-bottom: 40px;
}

.dashboardGraficosObras,
.rankingObrasInvestimentos {
    width: 100%;
}

.cardGraficoObraPremium,
.itemRankingObra,
#telaGerenciarInvestidores .cardUsuarioPremium,
#telaGerenciarObras .cardUsuarioPremium,
#telaGerenciarLancamentos .cardUsuarioPremium,
#telaParticipantesObra .cardUsuarioPremium {
    box-sizing: border-box;
}

/* ==============================
   RESET MODO CLARO - SISTEMA
============================== */

body:not(.modoEscuro) {
    background: #f3f7fb !important;
    color: #003366 !important;
}

body:not(.modoEscuro) .configCard {
    background: #ffffff !important;
    color: #003366 !important;
    border-color: #e2e8f0 !important;
}

body:not(.modoEscuro) .configCard h3,
body:not(.modoEscuro) .configCard strong {
    color: #003366 !important;
}

body:not(.modoEscuro) .configCard p,
body:not(.modoEscuro) .configCard span {
    color: #64748b !important;
}

body:not(.modoEscuro) .menuItem {
    background: transparent !important;
    color: #dbeafe !important;
}

body:not(.modoEscuro) .menuItem.ativo {
    background: #ffffff !important;
    color: #003366 !important;
}

body:not(.modoEscuro) .menuItem.ativo i,
body:not(.modoEscuro) .menuItem.ativo span {
    color: #003366 !important;
}

body:not(.modoEscuro) .menuItem:not(.ativo):hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* ==============================
   MODO CLARO - INVESTIMENTOS
============================== */

body:not(.modoEscuro) .dashboardGraficoArea,
body:not(.modoEscuro) .cardGraficoObraPremium,
body:not(.modoEscuro) .rankingObrasArea,
body:not(.modoEscuro) .itemRankingObra,
body:not(.modoEscuro) #telaInvestimentos .configCard {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #003366 !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08) !important;
}

body:not(.modoEscuro) #telaInvestimentos p,
body:not(.modoEscuro) #telaInvestimentos span,
body:not(.modoEscuro) #telaInvestimentos small {
    color: #64748b !important;
}

body:not(.modoEscuro) #telaInvestimentos .graficoCircular div,
body:not(.modoEscuro) #telaInvestimentos .graficoObraCircular div {
    background: #ffffff !important;
}

body:not(.modoEscuro) #telaInvestimentos .graficoCircular strong,
body:not(.modoEscuro) #telaInvestimentos .graficoObraCircular strong {
    color: #003366 !important;
}

body:not(.modoEscuro) #telaInvestimentos .graficoCircular span,
body:not(.modoEscuro) #telaInvestimentos .graficoObraCircular span {
    color: #64748b !important;
}

body:not(.modoEscuro) #telaInvestimentos .dadosGraficoObra div,
body:not(.modoEscuro) #telaInvestimentos .graficoLegenda div {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

body:not(.modoEscuro) #telaInvestimentos .barraRanking {
    background: #e2e8f0 !important;
}

body:not(.modoEscuro) .dashboardGraficoArea {
    margin-bottom: 18px !important;
}

body:not(.modoEscuro) .dashboardObrasGraficosArea,
body:not(.modoEscuro) .rankingObrasArea {
    margin-top: 18px !important;
    margin-bottom: 22px !important;
}

body:not(.modoEscuro) #modalInvestidor .modalConteudo,
body:not(.modoEscuro) #modalObra .modalConteudo,
body:not(.modoEscuro) #modalParticipanteObra .modalConteudo,
body:not(.modoEscuro) #modalLancamento .modalConteudo {
    background: #ffffff !important;
    color: #003366 !important;
    border-color: #e2e8f0 !important;
}

body:not(.modoEscuro) #modalInvestidor form,
body:not(.modoEscuro) #modalObra form,
body:not(.modoEscuro) #modalParticipanteObra form,
body:not(.modoEscuro) #modalLancamento form {
    background: #ffffff !important;
}

body:not(.modoEscuro) #modalInvestidor label,
body:not(.modoEscuro) #modalObra label,
body:not(.modoEscuro) #modalParticipanteObra label,
body:not(.modoEscuro) #modalLancamento label {
    color: #334155 !important;
}

body:not(.modoEscuro) #modalInvestidor input,
body:not(.modoEscuro) #modalInvestidor select,
body:not(.modoEscuro) #modalObra input,
body:not(.modoEscuro) #modalObra select,
body:not(.modoEscuro) #modalParticipanteObra input,
body:not(.modoEscuro) #modalParticipanteObra select,
body:not(.modoEscuro) #modalLancamento input,
body:not(.modoEscuro) #modalLancamento select {
    background: #f8fafc !important;
    color: #003366 !important;
    border-color: #cbd5e1 !important;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - LOGIN
========================================================== */

body.loginBody,
body:not(.modoEscuro).loginBody {
    margin: 0 !important;
    min-height: 100vh !important;

    background:
        radial-gradient(circle at top left, rgba(147, 197, 253, 0.75), transparent 32%),
        radial-gradient(circle at bottom right, rgba(0, 51, 102, 0.95), transparent 45%),
        linear-gradient(135deg, #8ec5ff, #1d5fa7, #003366) !important;

    color: var(--texto-claro) !important;
}

body.loginBody .loginCardPremium {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(16px);
}

body.loginBody .loginRodape,
body.loginBody .loginRodape strong {
    color: var(--texto-claro) !important;
}

body.loginBody .campoLoginPremium input {
    background: linear-gradient(
        135deg,
        rgba(147, 197, 253, 0.55),
        rgba(124, 58, 237, 0.35)
    ) !important;

    color: var(--azul-aj) !important;
	-webkit-text-fill-color: var(--azul-aj) !important;;
}

body.loginBody .campoLoginPremium input::placeholder {
    color: rgba(255, 255, 255, 0.9) !important;
}

#telaParticipantesObra .usuarioPremiumAcoes {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ==========================================================
   AJUSTES PONTUAIS - DASHBOARD INVESTIMENTOS
========================================================== */

.cardGraficoObraPremium h4 {
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================
   DASHBOARD INVESTIMENTOS - FILTRO DE PERÍODO PREMIUM
========================================================== */

.filtroPeriodoInvestimentos {
    display: flex;
    align-items: center;
    gap: 0;
}

.btnPeriodoInvestimento {
    width: 54px;
    height: 54px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: #dbeafe;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btnPeriodoInvestimento:first-child {
    border-radius: 14px 0 0 14px;
}

.btnPeriodoInvestimento:last-child {
    border-radius: 0 14px 14px 0;
}

.btnPeriodoInvestimento:hover,
.periodoAtualInvestimento:hover,
.periodoAnoInvestimento:hover {
    background: rgba(37,99,235,0.18);
    color: #ffffff;
}

.periodoAtualInvestimento {
    min-width: 170px;
    height: 54px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.25s ease;
}

.periodoAnoInvestimento {
    min-width: 130px;
    height: 54px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.25s ease;
}

/* ==========================================================
   CORREÇÃO PONTUAL - FILTRO INVESTIMENTOS PREMIUM PLUS
========================================================== */

.filtrosDashboardInvestimentos {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    margin: 28px 0 34px 0 !important;
}

.filtroPeriodoInvestimentos,
.filtroAnoInvestimentos {
    display: grid !important;
    grid-template-columns: 48px 140px 48px !important;
    align-items: center !important;
}

.btnPeriodoInvestimento,
.periodoAtualInvestimento,
.periodoAnoInvestimento {
    height: 52px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    background: rgba(255,255,255,0.04) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

.btnPeriodoInvestimento {
    width: 48px !important;
}

.periodoAtualInvestimento,
.periodoAnoInvestimento {
    width: 140px !important;
    min-width: 140px !important;
    font-weight: 700 !important;
}

.filtroPeriodoInvestimentos .btnPeriodoInvestimento:first-child,
.filtroAnoInvestimentos .btnPeriodoInvestimento:first-child {
    border-radius: 14px 0 0 14px !important;
}

.filtroPeriodoInvestimentos .btnPeriodoInvestimento:last-child,
.filtroAnoInvestimentos .btnPeriodoInvestimento:last-child {
    border-radius: 0 14px 14px 0 !important;
}

.periodoAtualInvestimento,
.periodoAnoInvestimento {
    border-left: none !important;
    border-right: none !important;
}

.btnPeriodoInvestimento:hover {
    background: rgba(37,99,235,0.18) !important;
}

/* ==========================================================
   DASHBOARD INVESTIMENTOS - FILTRO PREMIUM PLUS
========================================================== */

.ajFiltroInvestimentos {
    display: flex;
    gap: 16px;
    margin: 0 0 26px;
    align-items: center;
    flex-wrap: wrap;
}

.ajFiltroGrupo {
    display: flex;
    align-items: center;
    height: 52px;
    width: 190px;
    flex: none;
}

.ajFiltroSeta,
.ajFiltroValor {
    height: 52px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ajFiltroSeta {
    width: 52px;
    cursor: pointer;
    transition: 0.25s ease;
}

.ajFiltroSeta:hover {
    background: rgba(37,99,235,0.18);
}

.ajFiltroValor {
    flex: 1;
    width: 86px;
    font-weight: 700;
    border-left: none;
    border-right: none;
}

.ajFiltroValor.ano {
    width: 110px;
}

.ajFiltroGrupo .ajFiltroSeta:first-child {
    border-radius: 14px 0 0 14px;
}

.ajFiltroGrupo .ajFiltroSeta:last-child {
    border-radius: 0 14px 14px 0;
}

/* ==========================================================
   DASHBOARD INVESTIMENTOS - FILTRO PREMIUM PLUS / MODO CLARO E ESCURO
========================================================== */

.ajFiltroSeta,
.ajFiltroValor {
    background: #ffffff !important;
    color: #003366 !important;
    border-color: #d7e1ee !important;
}

.ajFiltroSeta i {
    color: #003366 !important;
}

.ajFiltroSeta:hover {
    background: #edf4ff !important;
}

body.modoEscuro .ajFiltroSeta,
body.modoEscuro .ajFiltroValor {
    background: rgba(255,255,255,0.04) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.12) !important;
}

body.modoEscuro .ajFiltroSeta i {
    color: #ffffff !important;
}

body.modoEscuro .ajFiltroSeta:hover {
    background: rgba(37,99,235,0.18) !important;
}

/* ==========================================================
   DASHBOARD INVESTIMENTOS - EVOLUÇÃO MENSAL
========================================================== */

.evolucaoMensalInvestimentosArea {
    margin: 32px 0;
}

.graficoMensalInvestimentos {
    display: grid;
    gap: 14px;
}

.itemMesInvestimento {
    display: grid;
    grid-template-columns: 110px 1fr 150px;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #d7e1ee;
    border-radius: 16px;
    padding: 14px 18px;
}

.itemMesInvestimento span {
    font-weight: 700;
    color: #003366;
}

.barraMesInvestimento {
    height: 12px;
    background: #e8eef7;
    border-radius: 999px;
    overflow: hidden;
}

.barraMesInvestimento div {
    height: 100%;
    background: linear-gradient(90deg, #003366, #2563eb);
    border-radius: 999px;
}

.itemMesInvestimento strong {
    text-align: right;
    color: #003366;
}

/* Modo escuro */
body.modoEscuro .itemMesInvestimento {
    background: #1e293b;
    border-color: #334155;
}

body.modoEscuro .itemMesInvestimento span,
body.modoEscuro .itemMesInvestimento strong {
    color: #ffffff;
}

body.modoEscuro .barraMesInvestimento {
    background: #0f2744;
}

/* ==========================================================
   DASHBOARD INVESTIMENTOS - ESPAÇAMENTO GERAL PADRONIZADO
========================================================== */

#dashboardInvestimentos {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

#dashboardInvestimentos .dashboardCardsInvestimentos,
#dashboardInvestimentos .evolucaoMensalInvestimentosArea,
#dashboardInvestimentos .dashboardGraficoArea,
#dashboardInvestimentos .dashboardObrasGraficosArea,
#dashboardInvestimentos .rankingObrasArea,
#dashboardInvestimentos .configGrid {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ==========================================================
   INVESTIMENTOS - FILTROS LANÇAMENTOS
========================================================== */

/* Modo escuro */
body.modoEscuro .filtrosLancamentosPremium {
    background: #1e293b;
    border-color: #334155;
}

body.modoEscuro .grupoCampoFiltro label {
    color: #cbd5e1;
}

body.modoEscuro .grupoCampoFiltro input,
body.modoEscuro .grupoCampoFiltro select {
    background: #0f2744 !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

/* ==========================================================
DASHBOARD INVESTIMENTOS - FILTRO OBRA MENSAL
========================================================== */

.filtroObraMensalInvestimentos {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.filtroObraMensalInvestimentos label {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--texto-secundario);
}

.filtroObraMensalInvestimentos .filtros {
	margin-bottom: 0;
}

.filtroObraMensalInvestimentos select {
	min-width: 220px;
}

body.modoEscuro .filtroObraMensalInvestimentos label {
	color: #cbd5e1;
}

/* ==========================================================
   DASHBOARD INVESTIMENTOS - TRANSIÇÃO EVOLUÇÃO MENSAL
========================================================== */

.graficoMensalInvestimentos {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.graficoMensalInvestimentos.carregandoGraficoMensal {
    opacity: 0.55;
    transform: translateY(2px);
    pointer-events: none;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - PAGINAÇÃO DO SISTEMA
   ----------------------------------------------------------
   Componente oficial de paginação para listagens do AJ ERP.
========================================================== */

.paginacaoSistema {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    margin: 30px 0 12px;
}

.btnPaginacaoSistema {
    min-width: 120px;
    height: 44px;

    border: none;
    border-radius: var(--radius-sm);

    background: #34445c;
    color: var(--texto-claro);

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.btnPaginacaoSistema:hover:not(:disabled) {
    transform: translateY(-2px);
    background: var(--azul-aj);
}

.btnPaginacaoSistema:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.infoPaginacaoSistema {
    color: var(--texto-secundario);
    font-size: 15px;
    font-weight: 700;
}

/* MODO ESCURO */

body.dark .btnPaginacaoSistema,
body.modoEscuro .btnPaginacaoSistema {
    background: #1e293b;
    color: var(--texto-claro);
}

body.dark .btnPaginacaoSistema:hover:not(:disabled),
body.modoEscuro .btnPaginacaoSistema:hover:not(:disabled) {
    background: var(--aj-info);
}

body.dark .infoPaginacaoSistema,
body.modoEscuro .infoPaginacaoSistema {
    color: #cbd5e1;
}

/* ==========================================================
   DASHBOARD PREMIUM - CONTROLE DE GASTOS
========================================================== */

/* MODO CLARO */

.btnNovoGastoPremium:hover {
    transform: translateY(-2px);
    background: #004b8d;
}

.cardResumoGastos {
    min-height: 118px;
    border-radius: 24px;
    background: #ffffff;
    padding: 22px 64px 22px 22px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.85);
    position: relative;
}

.cardResumoGastos i {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: #eef4ff;
    color: #003366;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.cardResumoGastos span {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.cardResumoGastos strong {
    display: block;
    margin-top: 8px;
    color: #003366;
    font-size: 22px;
    font-weight: 800;
}

/* MODO ESCURO */

body.dark .cardResumoGastos {
    background: #111827;
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

body.dark .cardResumoGastos i {
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
}

body.dark .cardResumoGastos span {
    color: #cbd5e1;
}

body.dark .cardResumoGastos strong {
    color: #f8fafc;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - DASHBOARD DE GASTOS RESPONSIVO
========================================================== */

@media (max-width: 1200px) {
    #dashboardGastos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    #dashboardGastos {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   FILTROS PREMIUM - CONTROLE DE GASTOS
========================================================== */

/* MODO CLARO */

.filtrosGastosPremium {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 24px;
    padding: 20px;
    margin: 0 0 24px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 16px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
}

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

.grupoFiltroGasto label {
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.grupoFiltroGasto input,
.grupoFiltroGasto select {
    height: 46px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 0 14px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    transition: all 0.2s ease;
}

.grupoFiltroGasto input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

.grupoFiltroGasto input:focus,
.grupoFiltroGasto select:focus {
    background: #ffffff;
    border-color: #003366;
    box-shadow: 0 0 0 4px rgba(0, 51, 102, 0.10);
}

/* ==========================================================
   CORREÇÃO MODO ESCURO - FILTROS GASTOS
========================================================== */

body.modoEscuro .filtrosGastosPremium {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.22);
}

body.modoEscuro .filtrosGastosPremium .grupoFiltroGasto label {
    color: #cbd5e1;
}

body.modoEscuro .filtrosGastosPremium .grupoFiltroGasto input,
body.modoEscuro .filtrosGastosPremium .grupoFiltroGasto select {
    background: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
    color: #f8fafc !important;
}

body.modoEscuro .filtrosGastosPremium .grupoFiltroGasto input::placeholder {
    color: #94a3b8;
}

body.modoEscuro .filtrosGastosPremium .grupoFiltroGasto select option {
    background: #0f172a;
    color: #f8fafc;
}

/* MODO ESCURO */

body.dark .filtrosGastosPremium {
    background: #111827;
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

body.dark .grupoFiltroGasto label {
    color: #cbd5e1;
}

body.dark .grupoFiltroGasto input,
body.dark .grupoFiltroGasto select {
    background: #0f172a;
    border-color: rgba(148, 163, 184, 0.25);
    color: #f8fafc;
}

body.dark .grupoFiltroGasto input::placeholder {
    color: #64748b;
}

body.dark .grupoFiltroGasto input:focus,
body.dark .grupoFiltroGasto select:focus {
    background: #111827;
    border-color: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16);
}

/* RESPONSIVO */

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

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - BOTÃO EXCEL GASTOS
========================================================== */

.btnExportarExcelGastos {
    background: #15803d;
    color: var(--texto-claro);
    border-color: #15803d;
    box-shadow: 0 12px 28px rgba(21, 128, 61, 0.22);
}

.btnExportarExcelGastos:hover {
    background: #166534;
    border-color: #166534;
}

body.modoEscuro .btnExportarExcelGastos,
body.dark .btnExportarExcelGastos {
    background: #16a34a;
    border-color: #16a34a;
    color: var(--texto-claro);
    box-shadow: 0 12px 28px rgba(22, 163, 74, 0.25);
}

body.modoEscuro .btnExportarExcelGastos:hover,
body.dark .btnExportarExcelGastos:hover {
    background: #15803d;
    border-color: #15803d;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - BOTÃO PDF GASTOS
========================================================== */

.btnExportarPdfGastos {
    background: #dc2626;
    color: var(--texto-claro);
    border-color: #dc2626;
    box-shadow: 0 12px 28px rgba(220, 38, 38, 0.22);
}

.btnExportarPdfGastos:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

body.modoEscuro .btnExportarPdfGastos,
body.dark .btnExportarPdfGastos {
    background: #ef4444;
    border-color: #ef4444;
    color: var(--texto-claro);
}

body.modoEscuro .btnExportarPdfGastos:hover,
body.dark .btnExportarPdfGastos:hover {
    background: #dc2626;
    border-color: #dc2626;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - BADGE E FILTROS FINANCEIROS CLIENTE
========================================================== */

.grupoBadgesCliente {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.badgeFinanceiro {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 78px;
    height: 32px;
    padding: 0 16px;

    border-radius: var(--radius-pill);

    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.badgeFinanceiro.emDia {
    background: var(--aj-success-soft);
    color: #166534;
}

.badgeFinanceiro.inadimplente {
    background: var(--aj-danger-soft);
    color: #991b1b;
}

.badgeFinanceiro.pendente {
    background: var(--aj-warning-soft);
    color: #92400e;
}

.btnAcaoCliente.financeiro {
    background: var(--aj-success);
    color: var(--texto-claro);
}

.btnAcaoCliente.financeiro:hover {
    background: #0f766e;
}

/* FILTROS FINANCEIROS */

.filtrosFinanceiros {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

    margin-top: 12px;
    margin-bottom: 18px;
}

.btnFiltroFinanceiro {
    border: none;
    border-radius: var(--radius-pill);

    padding: 10px 16px;

    background: var(--borda-suave);
    color: #334155;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.btnFiltroFinanceiro:hover {
    transform: translateY(-1px);
}

.btnFiltroFinanceiro.ativo {
    background: var(--azul-aj);
    color: var(--texto-claro);
}

/* MODO ESCURO */

body.dark .badgeFinanceiro.emDia,
body.modoEscuro .badgeFinanceiro.emDia {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
}

body.dark .badgeFinanceiro.inadimplente,
body.modoEscuro .badgeFinanceiro.inadimplente {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}

body.dark .badgeFinanceiro.pendente,
body.modoEscuro .badgeFinanceiro.pendente {
    background: rgba(245, 158, 11, 0.18);
    color: #fde68a;
}

body.modoEscuro .btnFiltroFinanceiro {
    background: #1e293b;
    color: #e2e8f0;
}

body.modoEscuro .btnFiltroFinanceiro.ativo {
    background: var(--aj-info);
    color: var(--texto-claro);
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - FINANCEIRO DO CLIENTE
   ----------------------------------------------------------
   Tela premium de controle financeiro individual do cliente.
========================================================== */

#telaFinanceiroCliente {
    padding: 0;
}

.financeiroClienteTopo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 22px;
}

.financeiroClienteTopo h1 {
    margin: 0;

    color: var(--azul-aj);

    font-size: 30px;
    font-weight: 900;
}

.financeiroClienteTopo p {
    margin: 6px 0 0;

    color: var(--texto-secundario);

    font-size: 14px;
    font-weight: 600;
}

.financeiroClienteCard {
    background: var(--branco);
    border: 1px solid var(--borda-suave);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);

    overflow: hidden;
}

.financeiroClienteResumo {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr auto;
    gap: 16px;

    padding: 26px;

    background: var(--azul-aj);
}

.financeiroClienteResumo div {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 16px;

    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-lg);
}

.financeiroClienteResumo span,
.financeiroClienteResumo small {
    color: #dbeafe;

    font-size: 12px;
    font-weight: 700;

    opacity: 0.88;
}

.financeiroClienteResumo span {
    display: block;
    margin-bottom: 8px;
}

.financeiroClienteResumo strong {
    color: var(--texto-claro);

    font-size: 16px;
    font-weight: 900;
    line-height: 1.2;
}

.financeiroClienteResumo div:last-child {
    align-items: center;
    text-align: center;
}

.financeiroClienteResumo div:last-child span {
    width: 100%;
    text-align: center;
}

.financeiroClienteResumo div:last-child .badgeFinanceiro {
    width: 128px;
    min-width: 128px;
    max-width: 128px;
}

/* FORMULÁRIO */

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

    padding: 26px;
}

.formFinanceiroCliente .grupoCampo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.formFinanceiroCliente .campoLinhaInteira {
    grid-column: 1 / -1;
}

.rodapeFinanceiroCliente {
    grid-column: 1 / -1;

    display: flex;
    justify-content: flex-end;
    gap: 12px;

    padding-top: 8px;
}

/* DEMONSTRATIVO */

.demonstrativoFinanceiro {
    display: grid;
    gap: 10px;

    padding: 18px;

    background: var(--bg-soft);
    border: 1px solid #dbe4ef;
    border-radius: var(--radius-lg);
}

.cabecalhoDemonstrativo {
    margin-bottom: 4px;
}

.tituloDemonstrativo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tituloDemonstrativo > i {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: var(--radius-md);

    background: var(--azul-aj);
    color: var(--texto-claro);

    font-size: 18px;
}

.tituloDemonstrativo strong {
    display: block;

    color: var(--azul-aj);

    font-size: 16px;
    font-weight: 900;
}

.tituloDemonstrativo small {
    display: block;
    margin-top: 2px;

    color: var(--texto-secundario);

    font-size: 12px;
    font-weight: 600;
}

.linhaDemonstrativo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 10px 0;

    border-top: 1px solid var(--borda-suave);
}

.linhaDemonstrativo span {
    display: flex;
    align-items: center;

    color: #334155;

    font-size: 14px;
    font-weight: 700;
}

.linhaDemonstrativo span i {
    margin-right: 8px;
    color: var(--azul-aj);
}

.linhaDemonstrativo strong {
    color: var(--azul-aj);

    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.linhaDemonstrativo.desconto strong {
    color: var(--aj-danger);
}

.demonstrativoFinanceiro .linhaDemonstrativo:first-of-type {
    padding-top: 14px;
}

.totalDemonstrativo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-top: 8px;
    padding: 16px;

    border-radius: var(--radius-md);

    background: var(--azul-aj);
}

.totalDemonstrativo span {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--texto-claro);

    font-size: 14px;
    font-weight: 900;
}

.totalDemonstrativo strong {
    color: var(--texto-claro);

    font-size: 20px;
    font-weight: 900;
}

/* MODO ESCURO */

body.modoEscuro #telaFinanceiroCliente,
body.dark #telaFinanceiroCliente {
    color: var(--texto-claro);
}

body.modoEscuro .financeiroClienteTopo h1,
body.dark .financeiroClienteTopo h1 {
    color: var(--texto-claro);
}

body.modoEscuro .financeiroClienteTopo p,
body.dark .financeiroClienteTopo p {
    color: #cbd5e1;
}

body.modoEscuro .financeiroClienteCard,
body.dark .financeiroClienteCard {
    background: #111827;
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

body.modoEscuro .financeiroClienteResumo,
body.dark .financeiroClienteResumo,
body.modoEscuro .totalDemonstrativo,
body.dark .totalDemonstrativo {
    background: var(--azul-aj);
}

body.modoEscuro .financeiroClienteResumo div,
body.dark .financeiroClienteResumo div {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.16);
}

body.modoEscuro .formFinanceiroCliente,
body.dark .formFinanceiroCliente {
    background: #111827;
}

body.modoEscuro .rodapeFinanceiroCliente,
body.dark .rodapeFinanceiroCliente {
    background: transparent;
}

body.modoEscuro .demonstrativoFinanceiro,
body.dark .demonstrativoFinanceiro {
    background: #0f172a;
    border-color: rgba(148, 163, 184, 0.25);
}

body.modoEscuro .tituloDemonstrativo strong,
body.dark .tituloDemonstrativo strong,
body.modoEscuro .linhaDemonstrativo strong,
body.dark .linhaDemonstrativo strong {
    color: var(--texto-claro);
}

body.modoEscuro .tituloDemonstrativo small,
body.dark .tituloDemonstrativo small {
    color: #94a3b8;
}

body.modoEscuro .linhaDemonstrativo,
body.dark .linhaDemonstrativo {
    border-color: rgba(148, 163, 184, 0.15);
}

body.modoEscuro .linhaDemonstrativo span,
body.dark .linhaDemonstrativo span {
    color: #e2e8f0;
}

body.modoEscuro .linhaDemonstrativo.desconto strong,
body.dark .linhaDemonstrativo.desconto strong {
    color: #f87171;
}

/* RESPONSIVO */

@media (max-width: 1100px) {
    .financeiroClienteResumo,
    .formFinanceiroCliente {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - OBRAS EXTERNAS: FILTROS
========================================================== */

.obrasExternasFiltros {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;

    margin: 18px 0 22px;
    padding: 18px;

    background: var(--branco);
    border: 1px solid var(--borda-suave);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.obrasExternasFiltrosAcoes {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* RESPONSIVO */

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

    .obrasExternasFiltrosAcoes {
        grid-column: 1 / -1;
    }
}

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

/* ==========================================================
OBRAS EXTERNAS - PAGINAÇÃO
========================================================== */

.paginacaoPremium {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding: 16px;
}

.paginacaoPremium span {
    font-weight: 600;
    color: #0b3b75;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - DASHBOARD OBRAS EXTERNAS
========================================================== */

.dashboardObrasExternas {
    margin: 24px 0;
}

/* ==========================================================
OBRAS EXTERNAS - GRÁFICOS DASHBOARD
========================================================== */

.obrasExternasGraficosGrid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 18px;
    margin-top: 24px;
}

.obrasExternasGraficoCard {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 26px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    transition: all .25s ease;
}

.obrasExternasGraficoCabecalho {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 26px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef2f7;
}

.obrasExternasGraficoCabecalho h3 {
    margin: 0;
    color: var(--azul-aj);
    font-size: 24px;
    font-weight: 700;
}

.obrasExternasGraficoCabecalho span {
    color: var(--texto-secundario);
    font-size: 14px;
    line-height: 1.4;
}

.barraGraficoItem {
    margin-bottom: 22px;
}

.barraGraficoTopo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 10px;
}

.barraGraficoTopo span {
    font-size: 14px;
    font-weight: 700;
    color: var(--azul-aj);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barraGraficoTopo strong {
    color: var(--verde-aj);
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.barraGraficoTrilho {
	margin-top:10px;
    height: 12px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.barraGraficoPreenchimento {
    height: 100%;
    background: linear-gradient(90deg,#003b70,#16a34a);
    border-radius: 999px;
}

.fonteRecursoGraficoItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    padding: 18px 16px;
    margin-bottom: 10px;

    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
}

.fonteRecursoGraficoItem:last-child {
    margin-bottom: 0;
}

.fonteRecursoGraficoItem strong {
    display: block;
    color: #003b70;
}

.fonteRecursoGraficoItem span {
    display: block;
    color: #6b7280;
    font-size: 13px;
    margin-top: 4px;
}

.fonteRecursoGraficoItem b{
    min-width:120px;
    text-align:right;
}

.graficoVazio {
    color: #6b7280;
    font-size: 14px;
}

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

/* ==========================================================
OBRAS EXTERNAS - AJUSTE FINAL MODO ESCURO
========================================================== */

body.modoEscuro .obraExternaCard,
body.modoEscuro .obrasExternasDashboardCard,
body.modoEscuro .obrasExternasGraficoCard,
body.modoEscuro .obrasExternasFiltros {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e5edf7 !important;
    box-shadow: 0 22px 55px rgba(0,0,0,0.28) !important;
}

body.modoEscuro .obraExternaCard h3,
body.modoEscuro .obrasExternasDashboardCard strong,
body.modoEscuro .obrasExternasGraficoCabecalho h3,
body.modoEscuro .barraGraficoTopo span,
body.modoEscuro .fonteRecursoGraficoItem strong,
body.modoEscuro .paginacaoPremium span {
    color: #ffffff !important;
}

body.modoEscuro .obraExternaLocal,
body.modoEscuro .obrasExternasDashboardCard span,
body.modoEscuro .obrasExternasGraficoCabecalho span,
body.modoEscuro .fonteRecursoGraficoItem span,
body.modoEscuro .graficoVazio {
    color: #cbd5e1 !important;
}

body.modoEscuro .barraGraficoTrilho {
    background: #334155 !important;
}

body.modoEscuro .fonteRecursoGraficoItem {
    border-bottom-color: #334155 !important;
}

body.modoEscuro .statusObraExterna {
    background: rgba(34,197,94,0.16) !important;
    color: #86efac !important;
}

body.modoEscuro .btnAcaoEditar,
body.modoEscuro .btnAcaoStatus {
    background: #334155 !important;
    color: #ffffff !important;
}

/* ==========================================================
MODO ESCURO - GRÁFICO FONTES DE RECURSO
========================================================== */

body.modoEscuro .fonteRecursoGraficoItem,
body.dark .fonteRecursoGraficoItem {

    background: #1e293b;
    border-color: rgba(148,163,184,.18);

}

body.modoEscuro .fonteRecursoGraficoItem strong,
body.dark .fonteRecursoGraficoItem strong {

    color: #ffffff;

}

body.modoEscuro .fonteRecursoGraficoItem small,
body.dark .fonteRecursoGraficoItem small {

    color: #94a3b8;

}


/* ==========================================================
AJUSTES OBRAS EXTERNAS E PAGINAÇÃO
========================================================== */

body.modoEscuro .paginacaoPremium {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    color: #e5edf7 !important;
}

body.modoEscuro .paginacaoPremium .btnSecundario,
body.modoEscuro .paginacaoPremium button {
    background: #334155 !important;
    color: #ffffff !important;
    border: 1px solid #475569 !important;
    box-shadow: none !important;
}

body.modoEscuro .paginacaoPremium .btnSecundario:disabled,
body.modoEscuro .paginacaoPremium button:disabled {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
    opacity: 0.75;
    cursor: not-allowed;
}

body.modoEscuro .paginacaoPremium span {
    color: #ffffff !important;
}

#telaObrasExternas.oculto .obrasExternasGraficosGrid,
#telaObrasExternas.oculto .obrasExternasDashboardGrid {
    display: none !important;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - PAGINAÇÕES E MODO ESCURO
   ----------------------------------------------------------
   Compatibilidade dark mode para paginações específicas
   e paginação premium reutilizável.
========================================================== */

body.modoEscuro .paginacaoClientes,
body.modoEscuro #paginacaoClientes,
body.modoEscuro #paginacaoLancamentosObrasExternas {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.modoEscuro .btnPaginacaoClientes,
body.modoEscuro .paginacaoPremium .btnSecundario,
body.modoEscuro .paginacaoPremium button {
    background: #334155 !important;
    color: var(--texto-claro) !important;
    border: 1px solid #475569 !important;
    box-shadow: none !important;
}

body.modoEscuro .btnPaginacaoClientes:disabled,
body.modoEscuro .paginacaoPremium .btnSecundario:disabled,
body.modoEscuro .paginacaoPremium button:disabled {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
    opacity: 0.75;
    cursor: not-allowed;
}

body.modoEscuro .infoPaginacaoClientes,
body.modoEscuro .paginacaoPremium span {
    color: var(--texto-claro) !important;
}

/* ==========================================================
PROTEÇÃO DOS GRÁFICOS DE OBRAS EXTERNAS FINAL
========================================================== */

#telaObrasExternas.oculto .obrasExternasGraficosGrid,
#telaObrasExternas.oculto .obrasExternasDashboardGrid {
    display: none !important;
}

/* ==========================================================
AJUSTES PONTUAIS - OBRAS EXTERNAS CARDS PADRÃO AJ
========================================================== */

.obraExternaCard{
    background:#fff;
    border-radius:18px;
    padding:22px;
    border-left:6px solid #003366;
    border-top:none;
    border-right:none;
    border-bottom:none;
    box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.obraExternaInfo{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin:18px 0;
}

.obraExternaInfo div{
    background:transparent!important;
    border:none!important;
    border-radius:0!important;
    padding:0!important;
}

.obraExternaInfo strong{
    color:#003366;
    font-weight:800;
}

.obraExternaInfo span{
    color:#334155;
}

/* ==========================================================
AJUSTES PONTUAIS - BADGES PADRÃO AJ
========================================================== */

.statusObraExterna{
    background:#0f766e!important;
    color:#fff!important;
    border-radius:999px;
    padding:7px 13px;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
}

.obraExternaCard .statusObraExterna{
    color:#fff!important;
}

/* ==========================================================
AJUSTES PONTUAIS - VALORES DOS LANÇAMENTOS
========================================================== */

#telaGerenciarLancamentosObrasExternas .statusObraExterna{
    background:#dcfce7!important;
    color:#15803d!important;
    font-weight:900;
}

/* ==========================================================
AJUSTES PONTUAIS - FILTROS PADRÃO AJ
========================================================== */

.obrasExternasFiltros{
    background:#fff;
    border-radius:18px;
    padding:18px;
    box-shadow:0 14px 34px rgba(15,23,42,.08);
    border-left:6px solid #003366;
}

.obrasExternasFiltros .formGrupo label{
    color:#003366;
    font-weight:800;
    font-size:13px;
}

.obrasExternasFiltros input,
.obrasExternasFiltros select{
    min-height:42px;
    background:#fff;
    border:1px solid #cbd5e1;
    border-radius:10px!important;
    color:#0f172a;
    font-weight:600;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - PAGINAÇÃO PADRÃO AJ
   ----------------------------------------------------------
   Base reutilizável para paginações premium do sistema.
========================================================== */

.paginacaoPremium {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;

    margin-top: 24px;
    padding: 16px;

    background: transparent !important;
}

.paginacaoPremium button,
.btnPaginacaoClientes {
    padding: 11px 18px;

    border: none !important;
    border-radius: var(--radius-sm);

    background: #334155 !important;
    color: var(--texto-claro) !important;

    font-weight: 800;

    box-shadow: none !important;
}

.paginacaoPremium button:disabled,
.btnPaginacaoClientes:disabled {
    background: #9ca3af !important;
    color: var(--texto-claro) !important;
    cursor: not-allowed;
    opacity: 1 !important;
}

.paginacaoPremium span,
.infoPaginacaoClientes {
    color: var(--azul-aj) !important;
    font-weight: 900;
}

/* ==========================================================
AJUSTES PONTUAIS - MODO ESCURO OBRAS EXTERNAS PADRÃO AJ
========================================================== */

body.modoEscuro .obraExternaCard,
body.modoEscuro .obrasExternasFiltros{
    background:#1e293b!important;
    border-left-color:#2563eb!important;
    box-shadow:0 22px 55px rgba(0,0,0,.28)!important;
}

body.modoEscuro .obraExternaCabecalho h3,
body.modoEscuro .obraExternaInfo strong,
body.modoEscuro .paginacaoPremium span,
body.modoEscuro .infoPaginacaoClientes{
    color:#fff!important;
}

body.modoEscuro .obraExternaInfo span{
    color:#cbd5e1!important;
}

body.modoEscuro .obrasExternasFiltros input,
body.modoEscuro .obrasExternasFiltros select{
    background:#0f2744!important;
    color:#fff!important;
    border-color:#475569!important;
}

body.modoEscuro .obrasExternasFiltros .formGrupo label{
    color:#e5edf7!important;
}

body.modoEscuro .paginacaoPremium button,
body.modoEscuro .btnPaginacaoClientes{
    background:#334155!important;
    color:#fff!important;
}

body.modoEscuro .paginacaoPremium button:disabled,
body.modoEscuro .btnPaginacaoClientes:disabled{
    background:#475569!important;
    color:#cbd5e1!important;
}

/* ==========================================================
AJUSTES PONTUAIS - FILTRO LANÇAMENTOS OBRAS EXTERNAS
========================================================== */

#telaGerenciarLancamentosObrasExternas .obrasExternasFiltros{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr auto;
    gap:14px;
    align-items:end;
    margin:18px 0 22px;
    padding:22px;
    background:#ffffff;
    border:1px solid #dbe3ef;
    border-radius:20px;
    border-left:none;
    box-shadow:0 10px 26px rgba(15,23,42,.07);
}

#telaGerenciarLancamentosObrasExternas .obrasExternasFiltros .formGrupo{
    display:flex;
    flex-direction:column;
    gap:7px;
}

#telaGerenciarLancamentosObrasExternas .obrasExternasFiltros .formGrupo label{
    color:#003366;
    font-size:13px;
    font-weight:800;
}

#telaGerenciarLancamentosObrasExternas .obrasExternasFiltros input,
#telaGerenciarLancamentosObrasExternas .obrasExternasFiltros select{
    width:100%;
    min-height:44px;
    background:#f8fafc;
    border:1px solid #cbd5e1;
    border-radius:12px!important;
    padding:10px 12px;
    color:#0f172a;
    font-weight:600;
}

#telaGerenciarLancamentosObrasExternas .obrasExternasFiltrosAcoes{
    display:flex;
    gap:8px;
    align-items:center;
}

#telaGerenciarLancamentosObrasExternas .obrasExternasFiltrosAcoes .btnPrimario,
#telaGerenciarLancamentosObrasExternas .obrasExternasFiltrosAcoes .btnSecundario{
    min-height:44px;
}

/* ==========================================================
AJUSTES PONTUAIS - BADGES STATUS OBRAS EXTERNAS
========================================================== */

#telaGerenciarObrasExternas .statusObraExterna{
    border-radius:999px;
    padding:7px 13px;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    color:#ffffff!important;
}

#telaGerenciarObrasExternas .statusObraExterna.statusPlanejada{
    background:#334155!important;
}

#telaGerenciarObrasExternas .statusObraExterna.statusAndamento{
    background:#003366!important;
}

#telaGerenciarObrasExternas .statusObraExterna.statusPausada{
    background:#b45309!important;
}

#telaGerenciarObrasExternas .statusObraExterna.statusConcluida{
    background:#0f766e!important;
}

/* ==========================================================
AJUSTES PONTUAIS - MODO ESCURO FILTRO E BADGES
========================================================== */

body.modoEscuro #telaGerenciarLancamentosObrasExternas .obrasExternasFiltros{
    background:#1e293b!important;
    border-color:#334155!important;
    box-shadow:0 22px 55px rgba(0,0,0,.28)!important;
}

body.modoEscuro #telaGerenciarLancamentosObrasExternas .obrasExternasFiltros input,
body.modoEscuro #telaGerenciarLancamentosObrasExternas .obrasExternasFiltros select{
    background:#0f2744!important;
    border-color:#475569!important;
    color:#ffffff!important;
}

body.modoEscuro #telaGerenciarLancamentosObrasExternas .obrasExternasFiltros .formGrupo label{
    color:#e5edf7!important;
}

/* ==========================================================
FONTES DE RECURSO - STATUS
========================================================== */

.statusAtivo{
    background:#0f766e!important;
    color:#ffffff!important;
}

.statusInativo{
    background:#c62828!important;
    color:#ffffff!important;
}

/* ==========================================================
RESPONSIVO - FONTES DE RECURSO
========================================================== */

@media (max-width:1000px){

    #telaGerenciarFontesRecurso .obraExternaInfo{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media (max-width:650px){

    #telaGerenciarFontesRecurso .obraExternaInfo{
        grid-template-columns:1fr;
    }

}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - DASHBOARD CARD SISTEMA
========================================================== */

.dashboardCardsInvestimentos {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
    margin: 20px 0 18px;
}

.cardDashboardInvestimento span,
.cardDashboardInvestimento strong,
.cardDashboardInvestimento .cardDashIcone {
    position: relative;
    z-index: 1;
}

/* MODO ESCURO - DASHBOARD CARD SISTEMA */

body.modoEscuro .cardDashboardInvestimento {
    background: #1e293b !important;
    border-color: #334155 !important;
    border-left-color: #2563eb !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28) !important;
}

body.modoEscuro .cardDashboardInvestimento::after {
    display: none;
}

body.modoEscuro .cardDashboardInvestimento span {
    color: #cbd5e1 !important;
}

body.modoEscuro .cardDashboardInvestimento strong {
    color: #ffffff !important;
}

/* RESPONSIVO - DASHBOARD CARD SISTEMA */

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

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - REMOÇÃO DE ELEMENTOS DECORATIVOS
========================================================== */

.dashboardTopoInvestimentos::before,
.dashboardTopoInvestimentos::after,
.cardDashboardInvestimento::before,
.cardDashboardInvestimento::after,
.cardModuloInvestimento::before,
.cardModuloInvestimento::after,
.moduloInvestimentoCard::before,
.moduloInvestimentoCard::after,
.investimentoModuloCard::before,
.investimentoModuloCard::after,
.dashboardGraficoArea::before,
.dashboardGraficoArea::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - ESTRUTURA BASE DO SISTEMA
========================================================== */

.container,
.pageSistema {
    width: 100%;
    max-width: 1240px;
}

.topoSistema {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
}

.acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.acoesSistema {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

.acoes input,
.acoesSistema input {
    flex: 1;
}

.filtros {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.filtros select {
    flex: 0 0 auto;
    width: auto;
    max-width: 280px;
    field-sizing: content;
}

/* RESPONSIVO - ESTRUTURA BASE */

@media (max-width: 720px) {

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

    .acoes {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .acoes input,
    .acoes button {
        width: 100%;
    }

    .acoesSistema button {
        width: auto;
    }

    .filtros select {
        width: 100%;
        max-width: none;

        field-sizing: fixed;
    }

}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - BOTÕES DO SISTEMA
   ----------------------------------------------------------
   Base oficial para botões reutilizáveis do AJ ERP.
   Preserva btnPrincipal e btnSecundario para compatibilidade.
========================================================== */

/* BASE */

.btnSistema,
.btnPrincipal,
.btnSecundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);

    min-height: 42px;
    padding: 0 18px;

    border: none;
    border-radius: var(--radius-md);

    cursor: pointer;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    transition:
        background var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-base),
        opacity var(--transition-base);
}

/* HOVER */

.btnSistema:hover,
.btnPrincipal:hover,
.btnSecundario:hover {
    transform: translateY(-2px);
}

/* FOCO ACESSÍVEL */

.btnSistema:focus-visible,
.btnPrincipal:focus-visible,
.btnSecundario:focus-visible {
    outline: 3px solid rgba(0, 51, 102, 0.22);
    outline-offset: 2px;
}

/* DESABILITADO */

.btnSistema:disabled,
.btnPrincipal:disabled,
.btnSecundario:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* PRIMÁRIO */

.btnSistema--primario,
.btnPrincipal {
    background: var(--azul-aj);
    color: var(--texto-claro);
    border: 1px solid var(--azul-aj);
    box-shadow: var(--sombra-card);
}

.btnSistema--primario:hover,
.btnPrincipal:hover {
    background: var(--azul-aj-escuro);
    border-color: var(--azul-aj-escuro);
    box-shadow: 0 16px 34px rgba(0, 51, 102, 0.20);
}

/* SECUNDÁRIO */

.btnSistema--secundario,
.btnSecundario {
    background: #334155;
    color: var(--texto-claro);
    border: 1px solid #475569;
}

.btnSistema--secundario:hover,
.btnSecundario:hover {
    background: #1e293b;
    border-color: #334155;
}

/* SUCESSO */

.btnSistema--sucesso {
    background: var(--aj-success);
    color: var(--texto-claro);
    border: 1px solid var(--aj-success);
}

.btnSistema--sucesso:hover{
    filter:brightness(1.05);
    box-shadow:0 14px 30px rgba(22,163,74,.25);
}

/* PERIGO */

.btnSistema--perigo {
    background: var(--aj-danger);
    color: var(--texto-claro);
    border: 1px solid var(--aj-danger);
}

.btnSistema--perigo:hover{
    filter:brightness(1.05);
    box-shadow:0 14px 30px rgba(220,38,38,.25);
}

/* AVISO */

.btnSistema--aviso {
    background: var(--aj-warning);
    color: var(--texto-claro);
    border: 1px solid var(--aj-warning);
}

.btnSistema--aviso:hover{
    filter:brightness(1.05);
    box-shadow:0 14px 30px rgba(217,119,6,.25);
}

/* ÍCONE */

.btnSistema i,
.btnPrincipal i,
.btnSecundario i{
    font-size:15px;
    line-height:1;
    flex-shrink:0;
}

/* MODO ESCURO */

body.modoEscuro .btnSistema--primario,
body.modoEscuro .btnPrincipal{
    background:var(--azul-aj);
    border-color:var(--azul-aj);
    color:#fff;
}

body.modoEscuro .btnSistema--secundario,
body.modoEscuro .btnSecundario {
    background: #334155;
    color: var(--texto-claro);
    border-color: #475569;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - BADGES DO SISTEMA
   ----------------------------------------------------------
   Base oficial para status, perfis e marcadores visuais.
   Mantém classes antigas para compatibilidade entre módulos.
========================================================== */

/* BASE */

.badgeSistema,
.badgeStatus,
.badgePerfil,
.perfilBadge,
.usuarioPerfil,
.textoProtegido.premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 78px;
    height: 32px;
    padding: 0 16px;

    border-radius: var(--radius-pill);

    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

/* STATUS */

.badgeSistema--ativo,
.badgeStatus.ativo {
    background: var(--aj-success-soft);
    color: #166534 !important;
}

.badgeSistema--inativo,
.badgeStatus.inativo {
    background: var(--aj-danger-soft);
    color: #991b1b !important;
}

.badgeSistema--info {
    background: var(--aj-info-soft);
    color: var(--azul-aj) !important;
}

.badgeSistema--sucesso {
    background: var(--aj-success-soft);
    color: #166534 !important;
}

.badgeSistema--perigo {
    background: var(--aj-danger-soft);
    color: #991b1b !important;
}

.badgeSistema--aviso {
    background: var(--aj-warning-soft);
    color: #92400e !important;
}

.badgeSistema--roxo {
    background: #f3e8ff;
    color: #6b21a8 !important;
}

/* PERFIS */

.perfilADMIN,
.badgeSistema--admin {
    background: var(--aj-info-soft);
    color: var(--azul-aj) !important;
}

.perfilGERENTE,
.badgeSistema--gerente {
    background: var(--aj-success-soft);
    color: #166534 !important;
}

.perfilOPERADOR,
.badgeSistema--operador {
    background: var(--aj-warning-soft);
    color: #92400e !important;
}

.perfilCONSULTA,
.badgeSistema--consulta {
    background: #f3e8ff;
    color: #6b21a8 !important;
}

/* NEUTRO / PROTEGIDO */

.textoProtegido.premium,
.badgeSistema--neutro {
    background: var(--bg-soft);
    color: var(--texto-secundario) !important;
}

/* MODO ESCURO */

body.modoEscuro .badgeSistema--ativo,
body.modoEscuro .badgeStatus.ativo,
body.modoEscuro .badgeSistema--sucesso,
body.modoEscuro .perfilGERENTE,
body.modoEscuro .badgeSistema--gerente {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #86efac !important;
}

body.modoEscuro .badgeSistema--inativo,
body.modoEscuro .badgeStatus.inativo,
body.modoEscuro .badgeSistema--perigo {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #fca5a5 !important;
}

body.modoEscuro .badgeSistema--info,
body.modoEscuro .perfilADMIN,
body.modoEscuro .badgeSistema--admin {
    background: rgba(96, 165, 250, 0.18) !important;
    color: #bfdbfe !important;
}

body.modoEscuro .badgeSistema--aviso,
body.modoEscuro .perfilOPERADOR,
body.modoEscuro .badgeSistema--operador {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fde68a !important;
}

body.modoEscuro .badgeSistema--roxo,
body.modoEscuro .perfilCONSULTA,
body.modoEscuro .badgeSistema--consulta {
    background: rgba(168, 85, 247, 0.18) !important;
    color: #e9d5ff !important;
}

body.modoEscuro .textoProtegido.premium,
body.modoEscuro .badgeSistema--neutro {
    background: rgba(148, 163, 184, 0.16) !important;
    color: #cbd5e1 !important;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - CAMPOS DO SISTEMA
   ----------------------------------------------------------
   Base oficial para inputs, selects, textareas e campos
   reutilizáveis do AJ ERP.
========================================================== */

/* BASE */

.campoSistema,
input,
select,
textarea {
    font-family: inherit;
}

input,
select,
textarea,
.campoSistema input,
.campoSistema select,
.campoSistema textarea {
    min-height: 42px;
    padding: 10px 12px;

    border: 1px solid var(--borda-suave);
    border-radius: var(--radius-md) !important;

    background: var(--branco);
    color: var(--texto-principal);

    font-size: 14px;
    font-weight: 500;

    transition:
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        background var(--transition-base),
        color var(--transition-base);
}

/* TEXTAREA */

textarea,
.campoSistema textarea {
    min-height: 90px;
    resize: vertical;
}

/* LABELS */

.campo label,
.campoSistema label {
    display: block;
    margin-bottom: 6px;

    color: var(--azul-aj);

    font-size: 14px;
    font-weight: 700;
}

/* PLACEHOLDER */

input::placeholder,
textarea::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* FOCO */

input:focus,
select:focus,
textarea:focus,
.campoSistema input:focus,
.campoSistema select:focus,
.campoSistema textarea:focus {
    outline: none;
    border-color: var(--azul-aj) !important;
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.10);
    background: var(--branco);
}

/* CAMPO COM ÍCONE */

.campoIcone {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: end;
    gap: var(--esp-3);
}

.campoIcone i {
    margin-bottom: 10px;

    color: var(--azul-aj);

    font-size: 20px;
}

.campoIcone label {
    display: block;
    margin-bottom: 4px;

    color: var(--texto-secundario);

    font-size: 13px;
    font-weight: 500;
}

.campoIcone.campoGrande {
    grid-column: span 2;
}

/* MODO ESCURO */

body.modoEscuro input,
body.modoEscuro select,
body.modoEscuro textarea,
body.modoEscuro .campoSistema input,
body.modoEscuro .campoSistema select,
body.modoEscuro .campoSistema textarea {
    background: #0f2744 !important;
    color: var(--texto-claro) !important;
    border-color: #334155 !important;
}

body.modoEscuro input::placeholder,
body.modoEscuro textarea::placeholder {
    color: #94a3b8 !important;
}

body.modoEscuro input:focus,
body.modoEscuro select:focus,
body.modoEscuro textarea:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14) !important;
}

body.modoEscuro .campo label,
body.modoEscuro .campoSistema label,
body.modoEscuro .campoIcone label {
    color: #cbd5e1 !important;
}

body.modoEscuro .campoIcone i {
    color: #93c5fd !important;
}

body.modoEscuro option {
    background: #1e293b !important;
    color: var(--texto-claro) !important;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - CARDS DO SISTEMA
   ----------------------------------------------------------
   Base oficial para cards premium reutilizáveis do AJ ERP.
   Mantém classes antigas para compatibilidade entre módulos.
========================================================== */

/* CARD BASE */

.cardSistema,
.cardClientePremium,
.cardUsuarioPremium {
    background: var(--branco);
    border-radius: var(--radius-lg);
    padding: 22px;
    margin-bottom: 18px;
    border: 1px solid var(--borda-suave);
    box-shadow: var(--shadow-md);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.cardSistema:hover,
.cardClientePremium:hover,
.cardUsuarioPremium:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* TOPO DO CARD */

.cardSistemaTopo,
.clientePremiumTopo,
.usuarioPremiumTopo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

/* IDENTIDADE */

.cardSistemaIdentidade,
.clienteIdentidade,
.usuarioIdentidade {
    display: flex;
    align-items: center;
    gap: 14px;
}

.avatarSistema,
.avatarCliente,
.avatarUsuario {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--azul-aj);
    color: var(--texto-claro);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
}

.cardSistemaIdentidade h3,
.clienteIdentidade h3,
.usuarioIdentidade h3 {
    margin: 0;
    color: var(--azul-aj);
    font-size: 18px;
    font-weight: 800;
}

.cardSistemaIdentidade p,
.clienteIdentidade p,
.usuarioIdentidade p {
    margin: 4px 0 0 0;
    color: var(--texto-secundario);
    font-size: 13px;
}

/* GRID DE INFORMAÇÕES */

.cardSistemaInfo,
.clientePremiumInfo,
.usuarioPremiumInfo {
    display: grid;
    gap: 14px;
    margin: 18px 0;
}

.cardSistemaInfo {
    grid-template-columns: repeat(3, 1fr);
}

.clientePremiumInfo {
    grid-template-columns: repeat(4, 1fr);
}

.usuarioPremiumInfo {
    grid-template-columns: repeat(3, 1fr);
}

/* CHIPS INTERNOS */

.infoSistemaChip,
.infoChip,
.infoUsuarioChip {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 10px;
    background: var(--bg-soft);
    border: 1px solid var(--borda-suave);
    border-radius: var(--radius-md);
    padding: 13px;
}

.infoSistemaChip i,
.infoChip i,
.infoUsuarioChip i {
    color: var(--azul-aj);
    font-size: 18px;
}

.infoSistemaChip small,
.infoChip small,
.infoUsuarioChip small {
    display: block;
    color: var(--texto-secundario);
    font-size: 11px;
    margin-bottom: 3px;
}

.infoSistemaChip strong,
.infoChip strong,
.infoUsuarioChip strong {
    color: var(--texto-principal);
    font-size: 13px;
    word-break: break-word;
}

/* AÇÕES DO CARD */

.cardSistemaAcoes,
.clientePremiumAcoes,
.usuarioPremiumAcoes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

/* RESPONSIVO */

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

    .cardSistemaTopo,
    .usuarioPremiumTopo {
        flex-direction: column;
    }
}

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

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

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

/* MODO ESCURO */

body.modoEscuro .cardSistema,
body.modoEscuro .cardClientePremium,
body.modoEscuro .cardUsuarioPremium {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e5edf7 !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.28) !important;
}

body.modoEscuro .cardSistemaIdentidade h3,
body.modoEscuro .clienteIdentidade h3,
body.modoEscuro .usuarioIdentidade h3 {
    color: var(--texto-claro) !important;
}

body.modoEscuro .cardSistemaIdentidade p,
body.modoEscuro .clienteIdentidade p,
body.modoEscuro .usuarioIdentidade p {
    color: #cbd5e1 !important;
}

body.modoEscuro .infoSistemaChip,
body.modoEscuro .infoChip,
body.modoEscuro .infoUsuarioChip {
    background: #0f2744 !important;
    border-color: #334155 !important;
}

body.modoEscuro .infoSistemaChip i,
body.modoEscuro .infoChip i,
body.modoEscuro .infoUsuarioChip i {
    color: #93c5fd !important;
}

body.modoEscuro .infoSistemaChip small,
body.modoEscuro .infoChip small,
body.modoEscuro .infoUsuarioChip small {
    color: #cbd5e1 !important;
}

body.modoEscuro .infoSistemaChip strong,
body.modoEscuro .infoChip strong,
body.modoEscuro .infoUsuarioChip strong {
    color: var(--texto-claro) !important;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - LISTA HIERÁRQUICA DO SISTEMA
   ----------------------------------------------------------
   Componente global para estruturas organizadas em níveis:
   empresas, departamentos, localizações, categorias e demais
   relações hierárquicas do AJ ERP.
========================================================== */

/* ==========================================================
CONTAINER
========================================================== */

.listaHierarquicaSistema {
	display: flex;
	flex-direction: column;
	gap: 4px;

	width: 100%;
}

/* ==========================================================
EMPRESA / GRUPO PRINCIPAL
========================================================== */

.listaHierarquicaEmpresa {
	width: 100%;

	margin-bottom: 16px;

	background: var(--branco);

	border: 1px solid var(--borda-suave);
	border-radius: var(--radius-lg);

	box-shadow: var(--shadow-sm);

	overflow: hidden;
}

.listaHierarquicaEmpresaTopo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;

	padding: 18px 20px;
}

.listaHierarquicaEmpresaIdentidade {
	display: flex;
	align-items: center;
	gap: 14px;

	min-width: 0;
}

.listaHierarquicaEmpresaIcone {
	width: 48px;
	height: 48px;

	flex: 0 0 48px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: var(--radius-md);

	background: var(--azul-aj);
	color: var(--texto-claro);

	font-size: 18px;
}

.listaHierarquicaEmpresaTexto {
	min-width: 0;
}

.listaHierarquicaEmpresaTexto h3 {
	margin: 0;

	color: var(--azul-aj);

	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
}

.listaHierarquicaEmpresaTexto p {
	margin: 4px 0 0;

	color: var(--texto-secundario);

	font-size: 13px;
	line-height: 1.4;
}

.listaHierarquicaEmpresaAcoes {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;

	flex-shrink: 0;
}

/* ==========================================================
CORPO DA EMPRESA
========================================================== */

.listaHierarquicaEmpresaCorpo {
	padding: 8px 20px 18px;

	border-top: 1px solid var(--borda-suave);
}

.listaHierarquicaEmpresaCorpo[hidden] {
	display: none !important;
}

/* ==========================================================
ITEM
========================================================== */

.listaHierarquicaItem {
	display: block;

	width: 100%;
}

.listaHierarquicaLinha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	width: 100%;
	min-height: 64px;

	padding: 8px 10px;

	border-radius: var(--radius-md);

	box-sizing: border-box;

	transition:
		background 0.18s ease;
}

.listaHierarquicaLinha:hover {
	background: var(--bg-soft);
}

/* ==========================================================
CONTEÚDO
========================================================== */

.listaHierarquicaConteudo {
	display: flex;
	align-items: center;
	gap: 10px;

	flex: 1;
	min-width: 0;
}

/* ==========================================================
EXPANDIR / RECOLHER
========================================================== */

.listaHierarquicaToggle {
	width: 30px;
	height: 30px;

	min-width: 30px;
	flex: 0 0 30px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 0;

	border: none;
	border-radius: var(--radius-sm);

	background: transparent;
	color: var(--azul-aj);

	cursor: pointer;
}

.listaHierarquicaToggle:hover {
	background: var(--bg-soft);
}

.listaHierarquicaToggle--vazio {
	cursor: default;
}

/* ==========================================================
ÍCONE DO ITEM
========================================================== */

.listaHierarquicaIcone {
	width: 42px;
	height: 42px;

	min-width: 42px;
	flex: 0 0 42px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: var(--radius-md);

	background: var(--aj-info-soft);
	color: var(--azul-aj);

	font-size: 16px;
}

/* ==========================================================
TEXTOS
========================================================== */

.listaHierarquicaTexto {
	flex: 1;
	min-width: 0;
}

.listaHierarquicaTitulo {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;

	min-width: 0;
}

.listaHierarquicaTitulo strong {
	color: var(--texto-principal);

	font-size: 15px;
	font-weight: 750;
	line-height: 1.35;
}

.listaHierarquicaDescricao {
	margin: 3px 0 0;

	color: var(--texto-secundario);

	font-size: 12px;
	line-height: 1.4;
}

/* ==========================================================
AÇÕES DO ITEM
========================================================== */

.listaHierarquicaAcoes {
	display: flex;
	align-items: center;
	gap: 6px;

	margin-left: auto;

	flex-shrink: 0;

	opacity: 0;
	pointer-events: none;

	transform: translateX(4px);

	transition:
		opacity 0.18s ease,
		transform 0.18s ease;
}

.listaHierarquicaLinha:hover .listaHierarquicaAcoes,
.listaHierarquicaLinha:focus-within .listaHierarquicaAcoes {
	opacity: 1;
	pointer-events: auto;

	transform: translateX(0);
}

/* ==========================================================
FILHOS
========================================================== */

.listaHierarquicaFilhos {
	display: flex;
	flex-direction: column;
	gap: 2px;

	margin-left: 45px;
	padding-left: 18px;

	border-left: 1px solid var(--borda-suave);
}

.listaHierarquicaFilhos[hidden] {
	display: none !important;
}

/* ==========================================================
ESTADO VAZIO DO GRUPO
========================================================== */

.listaHierarquicaVazio {
	display: flex;
	align-items: center;
	gap: 14px;

	min-height: 72px;

	padding: 14px 10px;

	color: var(--texto-secundario);
}

.listaHierarquicaVazio > i {
	width: 42px;
	height: 42px;

	flex: 0 0 42px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: var(--radius-md);

	background: var(--bg-soft);
	color: var(--azul-aj);

	font-size: 17px;
}

.listaHierarquicaVazio strong {
	display: block;

	color: var(--texto-principal);

	font-size: 14px;
	font-weight: 700;
}

.listaHierarquicaVazio p {
	margin: 3px 0 0;

	color: var(--texto-secundario);

	font-size: 12px;
}

/* ==========================================================
RESPONSIVIDADE
========================================================== */

@media (max-width: 720px) {

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

	.listaHierarquicaEmpresaAcoes {
		width: 100%;

		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.listaHierarquicaLinha {
		align-items: flex-start;
	}

	.listaHierarquicaAcoes {
		opacity: 1;
		pointer-events: auto;

		transform: none;
	}

	.listaHierarquicaFilhos {
		margin-left: 20px;
		padding-left: 10px;
	}

}

/* ==========================================================
MODO ESCURO
========================================================== */

body.modoEscuro .listaHierarquicaEmpresa,
body.dark .listaHierarquicaEmpresa {
	background: #1e293b;

	border-color: #334155;

	box-shadow: none;
}

body.modoEscuro .listaHierarquicaEmpresaCorpo,
body.dark .listaHierarquicaEmpresaCorpo {
	border-top-color: #334155;
}

body.modoEscuro .listaHierarquicaLinha:hover,
body.dark .listaHierarquicaLinha:hover,
body.modoEscuro .listaHierarquicaToggle:hover,
body.dark .listaHierarquicaToggle:hover {
	background: #0f172a;
}

body.modoEscuro .listaHierarquicaIcone,
body.dark .listaHierarquicaIcone,
body.modoEscuro .listaHierarquicaVazio > i,
body.dark .listaHierarquicaVazio > i {
	background: #0f2744;

	color: #93c5fd;
}

body.modoEscuro .listaHierarquicaFilhos,
body.dark .listaHierarquicaFilhos {
	border-left-color: #334155;
}

/* ==========================================================
DESIGN SYSTEM AJ V2.2 - RESULTADO DE LISTAGEM
----------------------------------------------------------
Componente global para cabeçalhos e resumos de resultados
em telas de consulta, pesquisa e listagem.
========================================================== */

.resultadoSistema {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;

	margin: 14px 0 18px;
	padding-bottom: 12px;

	border-bottom: 1px solid var(--borda-suave);
}

.resultadoSistemaConteudo {
	min-width: 0;
}

.resultadoSistemaTitulo {
	margin: 0;

	color: var(--texto-principal);

	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
}

.resultadoSistemaResumo {
	margin: 4px 0 0;

	color: var(--texto-secundario);

	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

.resultadoSistemaAcoes {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;

	flex-shrink: 0;
}

@media (max-width: 700px) {

	.resultadoSistema {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
	}

	.resultadoSistemaAcoes {
		justify-content: flex-start;
		width: 100%;
	}

}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - MODAL BASE
========================================================== */

.modal {
    padding: 24px;
    overflow: hidden;
}

.modalConteudo {
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modalTopo {
    flex-shrink: 0;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - FORMULÁRIO DE MODAL
   ----------------------------------------------------------
   Estrutura global para formulários longos dentro de modais.
   Mantém cabeçalho e rodapé fixos e permite rolagem no corpo.
========================================================== */

.formModalSistema {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - MODAL SISTEMA
   ----------------------------------------------------------
   Complemento estrutural dos modais globais.
   Base visual principal definida em MODAL BASE DO SISTEMA.
========================================================== */

/* FORMULÁRIO INTERNO */

.formGrid {
    padding: 26px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.campoGrande {
    grid-column: 1 / -1;
}

/* RODAPÉ */

.modalRodape {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 18px 26px;
    background: #f3f4f6;
    border-top: 1px solid var(--borda-suave);
}

/* ANIMAÇÃO */

.modal.aberto .modalConteudo {
    animation: modalSistemaEntrada 0.22s ease-out;
}

@keyframes modalSistemaEntrada {
    from {
        transform: translateY(18px) scale(0.98);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* RESPONSIVO */

@media (max-width: 700px) {
    .modal {
        padding: 14px;
    }

    .modalConteudo {
        width: 100%;
        max-height: calc(100vh - 28px);
        border-radius: var(--radius-lg);
    }

    .modalTopo {
        padding: 0 20px;
    }

    .modalTopo h2 {
        font-size: 18px;
    }

    .formGrid {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .campoGrande,
    .modalRodape {
        grid-column: 1 / -1;
    }

    .modalRodape {
        flex-direction: column-reverse;
    }

    .modalRodape button {
        width: 100%;
    }
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - FILTROS DO SISTEMA
   ----------------------------------------------------------
   Base oficial para áreas de busca, filtros e ações rápidas
   dos módulos do AJ ERP.
========================================================== */

.filtroSistema {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;

    width: 100%;
    margin: 18px 0 22px;
    padding: 18px;

    background: var(--branco);
    border: 1px solid var(--borda-suave);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.filtroSistema input,
.filtroSistema select {
    min-width: 220px;
    flex: 1;
}

.filtroSistema .btnSistema,
.filtroSistema .btnPrincipal,
.filtroSistema .btnSecundario {
    flex-shrink: 0;
}

/* VARIAÇÃO COM AÇÕES À DIREITA */

.filtroSistemaComAcoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.filtroSistemaCampos {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    flex-wrap: wrap;
}

.filtroSistemaAcoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* RESPONSIVO */

@media (max-width: 768px) {
    .filtroSistema,
    .filtroSistemaComAcoes,
    .filtroSistemaCampos,
    .filtroSistemaAcoes {
        flex-direction: column;
        align-items: stretch;
    }

    .filtroSistema input,
    .filtroSistema select,
    .filtroSistema button,
    .filtroSistema .btnSistema,
    .filtroSistema .btnPrincipal,
    .filtroSistema .btnSecundario {
        width: 100%;
        min-width: 0;
    }
}

/* MODO ESCURO */

body.modoEscuro .filtroSistema {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22) !important;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - TABELAS DO SISTEMA
   ----------------------------------------------------------
   Base oficial para tabelas, listas tabulares e áreas com
   rolagem horizontal dos módulos do AJ ERP.
========================================================== */

.tabelaSistemaWrapper {
    width: 100%;
    overflow-x: auto;

    background: var(--branco);
    border: 1px solid var(--borda-suave);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.tabelaSistema {
    width: 100%;
    min-width: 760px;

    border-collapse: collapse;

    background: var(--branco);
    color: var(--texto-principal);
}

.tabelaSistema thead {
    background: var(--azul-aj);
}

.tabelaSistema th {
    padding: 14px 16px;

    color: var(--texto-claro);

    font-size: 12px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.4px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.tabelaSistema td {
    padding: 14px 16px;

    color: var(--texto-principal);

    font-size: 13px;
    font-weight: 500;

    border-bottom: 1px solid var(--borda-suave);
    vertical-align: middle;
}

.tabelaSistema tbody tr {
    transition: background 0.18s ease;
}

.tabelaSistema tbody tr:hover {
    background: var(--bg-soft);
}

.tabelaSistema tbody tr:last-child td {
    border-bottom: none;
}

/* AÇÕES */

.tabelaSistemaAcoes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* CÉLULAS AUXILIARES */

.tabelaSistema .textoDireita {
    text-align: right;
}

.tabelaSistema .textoCentro {
    text-align: center;
}

.tabelaSistema .textoDestaque {
    color: var(--azul-aj);
    font-weight: 800;
}

.tabelaSistema .textoSucesso {
    color: var(--aj-success);
    font-weight: 800;
}

.tabelaSistema .textoPerigo {
    color: var(--aj-danger);
    font-weight: 800;
}

.tabelaSistema .textoAviso {
    color: var(--aj-warning);
    font-weight: 800;
}

/* RESPONSIVO */

@media (max-width: 768px) {
    .tabelaSistemaWrapper {
        border-radius: var(--radius-md);
    }

    .tabelaSistema th,
    .tabelaSistema td {
        padding: 12px;
        font-size: 12px;
    }
}

/* MODO ESCURO */

body.modoEscuro .tabelaSistemaWrapper {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22) !important;
}

body.modoEscuro .tabelaSistema {
    background: #1e293b !important;
    color: var(--texto-claro) !important;
}

body.modoEscuro .tabelaSistema thead {
    background: var(--azul-aj) !important;
}

body.modoEscuro .tabelaSistema td {
    color: #e5edf7 !important;
    border-bottom-color: #334155 !important;
}

body.modoEscuro .tabelaSistema tbody tr:hover {
    background: #0f2744 !important;
}

body.modoEscuro .tabelaSistema .textoDestaque {
    color: #93c5fd !important;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - VARIANTES DE BOTÕES
   ----------------------------------------------------------
   Complementos visuais para ações específicas do AJ ERP.
   A base dos botões está centralizada em BOTÕES DO SISTEMA.
========================================================== */

.btnPequeno {
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 800;
}

.btnIcone {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: var(--radius-md);
}

.btnEditar,
.btnVisualizar {
    background: var(--aj-info-soft);
    color: var(--azul-aj);
    border: 1px solid rgba(0, 51, 102, 0.14);
}

.btnExcluir,
.btnRemover {
    background: var(--aj-danger-soft);
    color: #991b1b;
    border: 1px solid rgba(220, 38, 38, 0.16);
}

.btnEditar:hover,
.btnVisualizar:hover {
    background: var(--azul-aj);
    color: var(--texto-claro);
}

.btnExcluir:hover,
.btnRemover:hover {
    background: var(--aj-danger);
    color: var(--texto-claro);
}

/* MODO ESCURO */

body.modoEscuro .btnEditar,
body.modoEscuro .btnVisualizar {
    background: rgba(96, 165, 250, 0.18) !important;
    color: #bfdbfe !important;
    border-color: rgba(96, 165, 250, 0.22) !important;
}

body.modoEscuro .btnExcluir,
body.modoEscuro .btnRemover {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.22) !important;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - PAGAMENTOS DOMICÍLIO FISCAL
   ----------------------------------------------------------
   Estrutura visual da listagem de pagamentos do módulo
   Domicílio Fiscal.
========================================================== */

.pagamentosPainelDomicilio {
    padding: 26px 30px 28px;
    max-height: calc(90vh - 76px);
    overflow-y: auto;
}

.pagamentosTopoDomicilio {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 18px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--borda-suave);
}

.pagamentoCampoAno,
.pagamentoCampoAtualizar {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pagamentoCampoAno label,
.pagamentoCampoAtualizar label,
.pagamentosAreaListaDomicilio > label {
    color: var(--texto-secundario);
    font-size: 13px;
    font-weight: 700;
}

.pagamentoCampoAno input {
    height: 46px;
    border: 1px solid var(--borda-suave);
    border-radius: var(--radius-md);
    padding: 0 14px;
    color: var(--texto-principal);
    font-size: 14px;
    font-weight: 700;
    background: var(--branco);
}

.pagamentosAreaListaDomicilio {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.listaPagamentosPremium {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.linhaPagamentoPremium {
    display: grid;
    grid-template-columns: 1.4fr 130px 1.2fr 110px;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border: 1px solid var(--borda-suave);
    border-radius: var(--radius-md);
    background: var(--branco);
}

.pagamentoMes {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pagamentoMes strong {
    color: var(--azul-aj);
    font-size: 15px;
    font-weight: 800;
}

.pagamentoMes small,
.pagamentoData small {
    color: var(--texto-secundario);
    font-size: 11px;
    font-weight: 700;
}

.pagamentoData {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pagamentoData strong {
    color: var(--texto-principal);
    font-size: 14px;
    font-weight: 800;
}

.btnPagamentoEditar {
    min-width: 100px;
    justify-content: center;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - PAGAMENTOS DOMICÍLIO FISCAL MODO ESCURO
========================================================== */

body.modoEscuro .pagamentosTopoDomicilio {
    border-color: #334155;
}

body.modoEscuro .pagamentoCampoAno label,
body.modoEscuro .pagamentoCampoAtualizar label,
body.modoEscuro .pagamentosAreaListaDomicilio > label {
    color: #cbd5e1;
}

body.modoEscuro .pagamentoCampoAno input {
    background: #0f2744;
    border-color: #334155;
    color: var(--texto-claro);
}

body.modoEscuro .linhaPagamentoPremium {
    background: #0f2744;
    border-color: #334155;
}

body.modoEscuro .pagamentoMes strong,
body.modoEscuro .pagamentoData strong {
    color: var(--texto-claro);
}

body.modoEscuro .pagamentoMes small,
body.modoEscuro .pagamentoData small {
    color: #94a3b8;
}

body.modoEscuro .btnPagamentoEditar {
    background: #1e3a8a;
    border-color: #2563eb;
    color: var(--texto-claro);
}

body.modoEscuro .btnPagamentoEditar:hover {
    background: #2563eb;
    border-color: #2563eb;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - MODAL EDITAR PAGAMENTO DOMICÍLIO FISCAL
   ----------------------------------------------------------
   Ajustes específicos do modal de edição de pagamento.
   Herda a estrutura global de modais, campos e rodapé.
========================================================== */

#modalEditarPagamentoDomicilio {
    z-index: 10000;
}

#modalEditarPagamentoDomicilio .modalConteudo {
    max-width: 520px;
    width: 94%;
}

#modalEditarPagamentoDomicilio .campoIcone {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    min-height: auto;
    padding: 0;
    border: none;
}

#modalEditarPagamentoDomicilio .campoIcone > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#modalEditarPagamentoDomicilio label {
    color: var(--texto-secundario);
    font-size: 13px;
    font-weight: 700;
}

#modalEditarPagamentoDomicilio input,
#modalEditarPagamentoDomicilio select {
    height: 46px;
    width: 100%;
    border: 1px solid var(--borda-suave) !important;
    border-radius: var(--radius-md) !important;
    background: var(--branco);
    padding: 0 14px;
    color: var(--texto-principal);
    font-size: 14px;
    font-weight: 600;
    outline: none;
}

#modalEditarPagamentoDomicilio .modalRodape {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
}

/* MODO ESCURO */

body.modoEscuro #modalEditarPagamentoDomicilio .modalConteudo {
    background: #111827;
}

body.modoEscuro #modalEditarPagamentoDomicilio label {
    color: #cbd5e1;
}

body.modoEscuro #modalEditarPagamentoDomicilio input,
body.modoEscuro #modalEditarPagamentoDomicilio select {
    background: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
    color: var(--texto-claro) !important;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - BOTÃO CARREGANDO PAGAMENTOS
   ----------------------------------------------------------
   Estado visual de carregamento do botão de atualização
   de pagamentos do Domicílio Fiscal.
========================================================== */

#btnCarregarPagamentosDomicilio.carregando i {
    animation: girarIconePagamento 0.8s linear infinite;
}

@keyframes girarIconePagamento {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - REFINO FORMULÁRIO DOMICÍLIO FISCAL
   ----------------------------------------------------------
   Ajustes específicos do formulário principal do módulo
   Domicílio Fiscal.
========================================================== */

#formDomicilioFiscal.formLinha {
    gap: 18px 24px;
}

#formDomicilioFiscal #domicilioObservacao {
    min-height: 92px;
    resize: vertical;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - DASHBOARD INVESTIMENTOS
========================================================== */

.dashboardInvestimentosResumo {
	margin: 0;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - CABEÇALHO INVESTIMENTOS
========================================================== */

#telaInvestimentos .cabecalhoSistema {
	margin-bottom: 12px;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - AÇÕES INVESTIMENTOS
========================================================== */

.acoesModuloInvestimentos {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: -18px 0 18px;
    flex-wrap: wrap;
}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - PLANEJAMENTO ORÇAMENTÁRIO
   ----------------------------------------------------------
   Grade orçamentária mensal com previsto x realizado.
========================================================== */

/* GRADE */

.gradePlanejamentoWrapper {
    width: 100%;
    max-height: calc(100vh - 330px);
    overflow: auto;

    padding: 0 8px 8px 0;
    box-sizing: border-box;

    background: var(--branco);
    border: 1px solid var(--borda-suave);
    border-radius: var(--radius-lg);
}

.gradePlanejamento {
    width: max-content;
    min-width: 100%;

    border-collapse: separate;
    border-spacing: 0;

    background: var(--branco);
}

/* CABEÇALHO */

.gradePlanejamento th {
    position: sticky;
    top: 0;
    z-index: 20;

    min-width: 170px;

    padding: 10px 12px;

    text-align: center;
    white-space: nowrap;

    color: var(--texto-claro);
    background: var(--azul-aj);

    border-bottom: 1px solid var(--azul-aj-escuro);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.gradePlanejamento th:first-child {
    left: 0;
    z-index: 30;
    min-width: 300px;
    max-width: 300px;
    text-align: left;
    background: var(--azul-aj);
}

.cabecalhoMesPlanejamento {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cabecalhoMesPlanejamento strong {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.2px;
}

.cabecalhoMesPlanejamento div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.cabecalhoMesPlanejamento span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

/* CÉLULAS */

.gradePlanejamento td {
    padding: 10px 12px;

    color: var(--azul-aj-escuro);
    background: var(--branco);

    font-size: 13px;
    text-align: center;

    border-bottom: 1px solid #eef2f7;
    border-right: 1px solid #eef2f7;
}

.gradePlanejamento td:first-child {
    position: sticky;
    left: 0;
    z-index: 15;

    min-width: 300px;
    max-width: 300px;

    text-align: left;

    background: var(--branco);
}

.gradePlanejamento tbody tr:hover td,
.gradePlanejamento tbody tr:hover td:first-child {
    background: #f9fbff;
}

/* GRUPOS */

.linhaGrupoPlanejamento td {
    height: 42px;
    padding: 10px 16px !important;

    color: var(--azul-aj);
    background: #eaf2fa !important;

    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.4px;

    border-top: 1px solid #dde6f0;
    border-bottom: 1px solid #dde6f0;
}

.linhaGrupoPlanejamento .celulaGrupoPlanejamento {
    position: sticky;
    left: 0;
    z-index: 16;

    background: #eef4fa !important;
}

/* ITEM */

.linhaItemPlanejamento {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.nomeItemPlanejamento {
    display: block;

    color: var(--azul-aj-escuro);

    font-weight: 700;
    line-height: 1.3;
}

.totalLinhaPlanejamento {
    display: block;
    margin-top: 4px;

    color: var(--texto-secundario);

    font-size: 10px;
    font-weight: 600;
    white-space: normal;
}

.acoesItemPlanejamento {
    display: flex;
    align-items: center;
    gap: 4px;

    opacity: 0;

    transition: opacity 0.2s ease;
}

.gradePlanejamento tr:hover .acoesItemPlanejamento {
    opacity: 1;
}

.btnAcaoItem {
    width: 24px;
    height: 24px;

    border: none;
    border-radius: 7px;

    background: transparent;
    color: var(--texto-secundario);

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.btnAcaoItem:hover {
    background: #eaf1ff;
    color: var(--azul-aj);
}

/* CAMPOS LIVRES */

#modalItemPlanejamento input,
#modalItemPlanejamento textarea {
    text-transform: none;
}

/* CÉLULA DO MÊS */

.celulaMesPlanejamento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
}

.campoValorPlanejamento {
    width: 112px;
    height: 32px;

    padding: 4px 10px;

    border: 1px solid #dde6f0;
    border-radius: var(--radius-sm);
    outline: none;

    background: var(--branco);
    color: var(--azul-aj-escuro);

    font-size: 12px;
    font-weight: 700;
    text-align: right;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}

.campoValorPlanejamento:hover {
    background: var(--bg-soft);
}

.campoValorPlanejamento:focus {
    border-color: var(--azul-aj);
    background: var(--branco);
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.12);
}

.campoValorPlanejamento.realizado {
    color: var(--verde);
    border-color: #cfe8e3;
}

/* SUBTOTAIS E RODAPÉ */

.linhaSubtotalPlanejamento td,
.gradePlanejamento tfoot td {
    padding: 12px;

    color: var(--azul-aj);
    background: var(--bg-soft) !important;

    font-size: 12px;
    font-weight: 800;

    border-top: 1px solid #dde6f0;
    border-bottom: 1px solid #dde6f0;
}

.linhaSubtotalPlanejamento small {
    display: block;
    margin-top: 4px;

    color: var(--texto-secundario);

    font-size: 10px;
}

.celulaResumoMes {
    display: flex;
    flex-direction: column;
    gap: 3px;

    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
}

/* DARK MODE */

body.dark-mode .gradePlanejamentoWrapper,
body.dark .gradePlanejamentoWrapper,
body.modoEscuro .gradePlanejamentoWrapper,
.dark-mode .gradePlanejamentoWrapper,
body.dark-mode .gradePlanejamento,
body.dark .gradePlanejamento,
body.modoEscuro .gradePlanejamento,
.dark-mode .gradePlanejamento {
    background: #0f172a;
    border-color: #1e293b;
}

body.dark-mode .gradePlanejamento th,
body.dark .gradePlanejamento th,
body.modoEscuro .gradePlanejamento th,
.dark-mode .gradePlanejamento th,
body.dark-mode .gradePlanejamento th:first-child,
body.dark .gradePlanejamento th:first-child,
body.modoEscuro .gradePlanejamento th:first-child,
.dark-mode .gradePlanejamento th:first-child {
    color: #f8fafc;
    background: #111827;
    border-color: #1e293b;
}

body.dark-mode .gradePlanejamento td,
body.dark .gradePlanejamento td,
body.modoEscuro .gradePlanejamento td,
.dark-mode .gradePlanejamento td,
body.dark-mode .gradePlanejamento td:first-child,
body.dark .gradePlanejamento td:first-child,
body.modoEscuro .gradePlanejamento td:first-child,
.dark-mode .gradePlanejamento td:first-child {
    color: #e5e7eb;
    background: #0f172a;
    border-color: #1e293b;
}

body.dark-mode .linhaGrupoPlanejamento td,
body.dark .linhaGrupoPlanejamento td,
body.modoEscuro .linhaGrupoPlanejamento td,
.dark-mode .linhaGrupoPlanejamento td,
body.dark-mode .linhaGrupoPlanejamento .celulaGrupoPlanejamento,
body.dark .linhaGrupoPlanejamento .celulaGrupoPlanejamento,
body.modoEscuro .linhaGrupoPlanejamento .celulaGrupoPlanejamento,
.dark-mode .linhaGrupoPlanejamento .celulaGrupoPlanejamento,
body.dark-mode .linhaSubtotalPlanejamento td,
body.dark .linhaSubtotalPlanejamento td,
body.modoEscuro .linhaSubtotalPlanejamento td,
.dark-mode .linhaSubtotalPlanejamento td,
body.dark-mode .gradePlanejamento tfoot td,
body.dark .gradePlanejamento tfoot td,
body.modoEscuro .gradePlanejamento tfoot td,
.dark-mode .gradePlanejamento tfoot td {
    background: #111827 !important;
    border-color: #1e293b;
    color: #f8fafc;
}

body.dark-mode .campoValorPlanejamento,
body.dark .campoValorPlanejamento,
body.modoEscuro .campoValorPlanejamento,
.dark-mode .campoValorPlanejamento {
    background: #020617;
    color: #f8fafc;
    border-color: #334155;
}

body.dark-mode .campoValorPlanejamento.realizado,
body.dark .campoValorPlanejamento.realizado,
body.modoEscuro .campoValorPlanejamento.realizado,
.dark-mode .campoValorPlanejamento.realizado {
    color: #5eead4;
    border-color: #134e4a;
}

body.dark-mode .gradePlanejamento tbody tr:hover td,
body.dark .gradePlanejamento tbody tr:hover td,
body.modoEscuro .gradePlanejamento tbody tr:hover td,
.dark-mode .gradePlanejamento tbody tr:hover td,
body.dark-mode .gradePlanejamento tbody tr:hover td:first-child,
body.dark .gradePlanejamento tbody tr:hover td:first-child,
body.modoEscuro .gradePlanejamento tbody tr:hover td:first-child,
.dark-mode .gradePlanejamento tbody tr:hover td:first-child {
    background: #111827 !important;
}

/* ==========================================================
FIM DO ARQUIVO - AJ ERP / DESIGN SYSTEM AJ V2.2
========================================================== */

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - PATCH DE COMPATIBILIDADE FINAL
========================================================== */

.btnFiltro {
    border: none;
    border-radius: var(--radius-pill);
    padding: 10px 16px;
    background: var(--borda-suave);
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background var(--transition-base),
        color var(--transition-base),
        transform var(--transition-base);
}

.btnFiltro:hover {
    transform: translateY(-1px);
}

.btnFiltro.ativo {
    background: var(--azul-aj);
    color: var(--texto-claro);
}

body.modoEscuro .btnFiltro {
    background: #1e293b;
    color: #e2e8f0;
}

body.modoEscuro .btnFiltro.ativo {
    background: var(--aj-info);
    color: var(--texto-claro);
}

.visualizadorContratoDomicilio {
    padding: 24px;
    background: var(--branco);
}

body.modoEscuro .visualizadorContratoDomicilio {
    background: #1e293b;
}

.visualizadorContratoDomicilio iframe {
    width: 100%;
    border: none;
    border-radius: var(--radius-md);
    background: var(--branco);
}

.dashboardCards {
    width: 100%;
}

.ajFiltroGastos {
    margin-bottom: 26px;
}

.buscaGasto {
    min-width: 260px;
}

/* ==========================================================
DESIGN SYSTEM AJ ERP V2.2

NOVO COMPONENTE:
MODAL DE INFORMAÇÕES - .modalInfo

Descrição:
Modal repensado para uso exclusivo na visualização
de informações, históricos, auditorias, logs e detalhes
que não possuem formulários ou ações de cadastro.

Objetivo:
Criar uma estrutura visual mais compacta, elegante
e reutilizável, sem alterar o funcionamento dos modais
de formulários já existentes no sistema.

Estrutura base:

.modal
.modalConteudo.modalInfo
.modalInfoTopo
.modalInfoCorpo
.modalInfoResumo
.modalInfoTimeline
.modalInfoRodape

========================================================== */

/* ==========================================================
MODAL DE INFORMAÇÕES - ESTRUTURA PRINCIPAL
========================================================== */

.modalInfo {
	width: min(780px, calc(100vw - 40px));
	max-height: min(760px, calc(100vh - 40px));
	display: flex;
	flex-direction: column;
	padding: 0;
	background:
		var(--cor-card, #ffffff);
	border-radius: 22px;
	overflow: hidden;

}

/* ==========================================================
MODAL DE INFORMAÇÕES - CABEÇALHO
========================================================== */

.modalInfoTopo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: auto;
	padding: 20px 24px;
	background:
		var(--cor-primaria, #003f73);
	border-bottom: 0;
}

.modalInfoTitulo {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.modalInfoTituloIcone {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	font-size: 19px;
}

.modalInfoTitulo > div:last-child {
	min-width: 0;
}

.modalInfoTitulo h2 {
	margin: 0;
	color: #ffffff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

.modalInfoTitulo p {
	margin: 4px 0 0;
	color: rgba(255, 255, 255, 0.74);
	font-size: 13px;
	line-height: 1.45;
}

.modalInfoTopo .btnFechar {
	width: 42px;
	height: 42px;
	flex-shrink: 0;
}

/* ==========================================================
MODAL DE INFORMAÇÕES - CORPO
========================================================== */

.modalInfoCorpo {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 0;
	padding: 20px 24px;
	overflow-y: auto;
	background:
		var(--cor-fundo-secundario, #f7f9fc);
}

/* ==========================================================
MODAL DE INFORMAÇÕES - RESUMO
========================================================== */

.modalInfoResumo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 18px;
	background:
		var(--cor-card, #ffffff);
	border: 1px solid
		var(--cor-borda, #dbe3ee);
	border-radius: 16px;
}

.modalInfoResumoPrincipal {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.modalInfoResumoIcone {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 12px;
	background:
		var(--cor-primaria, #003f73);
	color: #ffffff;
	font-size: 18px;
}

.modalInfoResumoPrincipal > div:last-child {
	min-width: 0;
}

.modalInfoRotulo {
	display: block;
	margin-bottom: 2px;
	color:
		var(--cor-texto-secundario, #66758a);
	font-size: 11px;
	font-weight: 500;

}

.modalInfoResumoTitulo {
	display: block;
	color:
		var(--cor-texto-principal, #111827);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.modalInfoResumoSubtitulo {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin: 3px 0 0;
	color:
		var(--cor-texto-secundario, #66758a);
	font-size: 13px;
	line-height: 1.4;
}

.modalInfoSeparador {
	margin: 0;
	color:
		var(--cor-texto-secundario, #66758a);
}

.modalInfoResumo .badgeSistema {
	flex-shrink: 0;
}

/* ==========================================================
MODAL DE INFORMAÇÕES - ESTADOS
========================================================== */

.modalInfoEstado {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	background:
		var(--cor-card, #ffffff);
	border: 1px solid
		var(--cor-borda, #dbe3ee);
	border-radius: 16px;
}

.modalInfoEstadoIcone {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 12px;
	background:
		var(--cor-primaria-clara, #e8f1f8);
	color:
		var(--cor-primaria, #003f73);
	font-size: 18px;
}

.modalInfoEstado > div:last-child {
	min-width: 0;
}

.modalInfoEstado h3 {
	margin: 0;
	color:
		var(--cor-texto-principal, #111827);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.modalInfoEstado p {
	margin: 4px 0 0;
	color:
		var(--cor-texto-secundario, #66758a);
	font-size: 13px;
	line-height: 1.5;
}

/* ==========================================================
MODAL DE INFORMAÇÕES - TIMELINE
========================================================== */

.modalInfoTimeline {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-left: 4px;
}

.historicoMovimentacaoItem {
	position: relative;
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 14px;
	padding-bottom: 16px;
}

.historicoMovimentacaoItem:last-child {
	padding-bottom: 0;
}

.historicoMovimentacaoItem:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 42px;
	bottom: 0;
	left: 20px;
	width: 2px;
	background:
		var(--cor-borda, #dbe3ee);
}

.historicoMovimentacaoMarcador {
	position: relative;
	z-index: 1;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background:
		var(--cor-primaria-clara, #e8f1f8);
	color:
		var(--cor-primaria, #003f73);
	font-size: 17px;
}

.historicoMovimentacaoConteudo {
	min-width: 0;
	padding: 15px 16px;
	background:
		var(--cor-card, #ffffff);
	border: 1px solid
		var(--cor-borda, #dbe3ee);
	border-radius: 14px;
}

.historicoMovimentacaoCabecalho {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.historicoMovimentacaoCabecalho h3 {
	margin: 0;
	color:
		var(--cor-texto-principal, #111827);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.historicoMovimentacaoData {
	flex-shrink: 0;
	color:
		var(--cor-texto-secundario, #66758a);
	font-size: 11px;
	line-height: 1.5;
}

.historicoMovimentacaoUsuario {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 7px;
	color:
		var(--cor-texto-secundario, #66758a);
	font-size: 12px;
}

.historicoMovimentacaoDescricao {
	margin: 9px 0 0;
	color:
		var(--cor-texto-secundario, #66758a);
	font-size: 13px;
	line-height: 1.5;
}

.historicoMovimentacaoDetalhes {
	display: grid;
	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);
	gap: 10px;
	margin-top: 13px;
}

.historicoMovimentacaoDetalhe {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	padding: 10px 12px;
	background:
		var(--cor-fundo-secundario, #f7f9fc);
	border: 1px solid
		var(--cor-borda, #dbe3ee);
	border-radius: 10px;
}

.historicoMovimentacaoDetalheRotulo {
	color:
		var(--cor-texto-secundario, #66758a);
	font-size: 10px;
	font-weight: 500;
}

.historicoMovimentacaoDetalheValor {
	color:
		var(--cor-texto-principal, #111827);
	font-size: 13px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.historicoMovimentacaoAlteracao {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	color:
		var(--cor-texto-secundario, #66758a);
	font-size: 13px;
}

.historicoMovimentacaoAlteracao strong {
	color:
		var(--cor-texto-principal, #111827);
}

/* ==========================================================
MODAL DE INFORMAÇÕES - CORES DOS EVENTOS
========================================================== */

.historicoEventoFinalizado
.historicoMovimentacaoMarcador {
	background: #dcfce7;
	color: #15803d;
}

.historicoEventoCancelado
.historicoMovimentacaoMarcador {
	background: #fee2e2;
	color: #b91c1c;
}

.historicoEventoRemovido
.historicoMovimentacaoMarcador {
	background: #fee2e2;
	color: #b91c1c;
}

.historicoEventoEditado
.historicoMovimentacaoMarcador {
	background: #fef3c7;
	color: #a16207;
}

.historicoEventoAdicionado
.historicoMovimentacaoMarcador {
	background: #dbeafe;
	color: #1d4ed8;
}

.historicoEventoCriado
.historicoMovimentacaoMarcador {
	background:
		var(--cor-primaria-clara, #e8f1f8);

	color:
		var(--cor-primaria, #003f73);
}

/* ==========================================================
MODAL DE INFORMAÇÕES - RODAPÉ
========================================================== */

.modalInfoRodape {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 14px 24px;
	background:
		var(--cor-card, #ffffff);

	border-top: 1px solid
		var(--cor-borda, #dbe3ee);
}

/* ==========================================================
MODAL DE INFORMAÇÕES - RESPONSIVIDADE
========================================================== */

@media (max-width: 700px) {

	.modalInfo {
		width:
			calc(100vw - 20px);
		max-height:
			calc(100vh - 20px);
		border-radius: 18px;
	}

	.modalInfoTopo {
		padding: 17px 18px;
	}

	.modalInfoTituloIcone {
		display: none;
	}

	.modalInfoTitulo h2 {
		font-size: 19px;
	}

	.modalInfoTitulo p {
		display: none;
	}

	.modalInfoCorpo {
		padding: 16px;
	}

	.modalInfoResumo {
		align-items: flex-start;
		padding: 14px;
	}

	.modalInfoResumoTitulo {
		font-size: 18px;
	}

	.modalInfoEstado {
		padding: 15px;
	}

	.historicoMovimentacaoCabecalho {
		flex-direction: column;
		gap: 4px;
	}

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

	.modalInfoRodape {
		padding: 12px 16px;
	}

}

/* ==========================================================
MODAL - CANCELAMENTO DE MOVIMENTAÇÃO
========================================================== */

.modalCancelamentoMovimentacao {
	max-width: 520px;
}

.modalCancelamentoIcone {
	background: rgba(245, 158, 11, 0.14);
	color: #b77900;
}

.modalCancelamentoFechar {
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1.2rem;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	transition: 0.2s ease;
}

.modalCancelamentoFechar:hover {
	background: rgba(255, 255, 255, 0.22);
}

.modalCancelamentoAviso {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	margin-bottom: 20px;
	border: 1px solid rgba(245, 158, 11, 0.28);
	border-radius: 12px;
	background: rgba(245, 158, 11, 0.08);
}

.modalCancelamentoAviso i {
	margin-top: 2px;
	color: #b77900;
}

.modalCancelamentoAviso p {
	margin: 0;
	line-height: 1.5;
}

.modalCancelamentoCampo {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.modalCancelamentoCampo label {
	font-size: 0.86rem;
	font-weight: 600;
}

.modalCancelamentoCampo label span {
	color: #dc2626;
}

.modalCancelamentoCampo textarea {
	width: 100%;
	min-height: 120px;
	padding: 14px;
	border: 1px solid #d7deea;
	border-radius: 12px;
	resize: vertical;
	font: inherit;
	line-height: 1.5;
	color: #172033;
	background: #ffffff;
	outline: none;
	transition: 0.2s ease;
}

.modalCancelamentoCampo textarea:focus {
	border-color: #07518a;
	box-shadow: 0 0 0 3px rgba(7, 81, 138, 0.12);
}

.modalCancelamentoContador {
	font-size: 0.75rem;
	text-align: right;
	color: #64748b;
}

.modalCancelamentoMovimentacao
.modalInfoRodape {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	padding: 14px 20px;
}

.modalCancelamentoMovimentacao
.modalInfoRodape
.btnSecundario,
.modalCancelamentoMovimentacao
.modalInfoRodape
.btnSistema {
	flex: 0 0 auto;
	width: auto;
	min-width: 110px;
	padding: 10px 18px;
}

.modalCancelamentoMovimentacao
.modalInfoRodape
.btnSistema--perigo {
	min-width: 130px;
}

/* ==========================================================
DARK MODE - CANCELAMENTO DE MOVIMENTAÇÃO
========================================================== */

body.modoEscuro
.modalCancelamentoCampo textarea {
	border-color: rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.06);
	color: #f8fafc;
}

body.modoEscuro
.modalCancelamentoCampo textarea::placeholder {
	color: #94a3b8;
}

body.modoEscuro
.modalCancelamentoAviso {
	background: rgba(245, 158, 11, 0.10);
}

body.modoEscuro
.modalCancelamentoContador {
	color: #94a3b8;
}

/* ==========================================================
SELETOR GLOBAL DE ITENS
DESIGN SYSTEM AJ ERP V2.2
========================================================== */

.seletorItensSistemaConteudo{

	padding:20px;

}

.seletorItensSistemaLista{

	display:grid;
	grid-template-columns:
		repeat(
			auto-fill,
			minmax(180px, 1fr)
		);
	gap:10px;
	margin-top:14px;
	max-height:420px;
	overflow-y:auto;

}

.seletorItemSistema{

	width:100%;
	display:flex;
	align-items:center;
	gap:12px;
	padding:12px 14px;
	border:1px solid var(--borda-suave);
	border-radius:12px;
	background:var(--branco);
	cursor:pointer;
	text-align:left;
	transition:
		border-color .18s ease,
		background .18s ease,
		transform .18s ease;

}

.seletorItemSistema:hover{

	background:#f7faff;
	border-color:var(--azul-aj);
	transform:translateY(-1px);

}

.seletorItemSistema.ativo{

	border-color:var(--azul-aj);
	background:#f2f7fd;

}

.seletorItemSistemaIcone{

	width:38px;
	height:38px;
	flex:0 0 38px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:10px;
	background:var(--azul-aj);
	color:#ffffff;
	font-size:18px;

}

.seletorItemSistemaInfo{

	min-width:0;
	display:flex;
	flex-direction:column;
	gap:2px;

}

.seletorItemSistemaInfo strong{

	font-size:13px;
	color:var(--texto-principal);

}

.seletorItemSistemaInfo small{

	font-size:11px;
	color:var(--texto-secundario);

}

.seletorItensSistemaVazio{

	grid-column:1 / -1;
	padding:30px;
	text-align:center;
	color:var(--texto-secundario);

}

/* ==========================================================
SELETOR GLOBAL DE ITENS
AJUSTE DO MODAL
DESIGN SYSTEM AJ ERP V2.2
========================================================== */

.modalConteudo--seletorItens{

	width:min(
		760px,
		calc(100vw - 40px)
	);
	max-height:80vh;
	overflow:hidden;

}

.modalConteudo--seletorItens
.seletorItensSistemaConteudo{

	overflow:hidden;

}

.modalConteudo--seletorItens
.seletorItensSistemaLista{

	max-height:430px;
	overflow-y:auto;

}

#modalSeletorItensSistema{

	z-index:1200;

}

/* ==========================================================
PROMPT PREMIUM GLOBAL
DESIGN SYSTEM AJ ERP V2.2
========================================================== */

.modalConteudo--promptPremium{

	width:min(
		560px,
		calc(100vw - 40px)
	);

}

.promptPremiumConteudo{

	padding:20px;

}

.promptPremiumConteudo textarea{

	width:100%;
	resize:vertical;

}

/* ==========================================================
   DESIGN SYSTEM AJ V2.2 - CHECKBOX
========================================================== */

input[type="checkbox"] {
	width: 18px;
	height: 18px;

	min-width: 18px;
	min-height: 18px;

	margin: 0;
	padding: 0;

	flex-shrink: 0;

	cursor: pointer;

	accent-color: var(--azul-aj);

	box-shadow: none !important;

	transition: none;
}

input[type="checkbox"]:hover,
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible,
input[type="checkbox"]:active,
input[type="checkbox"]:checked {
	box-shadow: none !important;
	outline: none;
}