/* ============================================================================
 * ERP Gestão Deluz — Design System (Refinamento Corporativo)
 * ============================================================================
 * Camada de design system mais corporativa / B2B aplicada SOBRE style.css.
 * Carregada ANTES do style.css em base.html para definir tokens-base,
 * e novamente após para refinos visuais finais.
 *
 * Identidade visual: empresa B2B de serviços (roçada/limpeza de faixas de
 * transmissão de energia elétrica). Clientes: ARGO Energia, Bauru Energia, etc.
 *
 * Paleta-base:
 *  - Navy profundo (#0F2A4A) → identidade séria, "corporate", para a navbar.
 *  - Teal/Esmeralda (#0D9488 / #10B981) → accent (energia, eletricidade),
 *    para botões primários, KPIs, links e o brand existente.
 *  - Cinzas neutros suaves para textos/superfícies (Slate Tailwind-like).
 *
 * Princípios: hierarquia clara, sombras suaves, cantos arredondados moderados,
 * tipografia Inter, alta densidade ERP, contraste AA garantido.
 * ========================================================================== */

/* ============================================================ TOKENS-EXTRA */
:root {
    /* === Navy corporativo (NOVO — cor "institucional" da barra superior) === */
    --navy-50:  #f0f4f9;
    --navy-100: #d9e2ee;
    --navy-200: #b3c4dc;
    --navy-300: #7d97bd;
    --navy-400: #4a6b94;
    --navy-500: #2b4a73;
    --navy-600: #1d3a5f;
    --navy-700: #15304f;
    --navy-800: #102541;
    --navy-900: #0f2a4a;    /* navy principal (header) */
    --navy-950: #081a32;

    /* === Slate (cinza-azulado para textos/superfícies refinadas) === */
    --slate-25:  #fbfcfd;
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* === Aliases corporativos (sobrescrevem aliases de style.css) === */
    --corp-navy:          var(--navy-900);
    --corp-navy-hover:    var(--navy-800);
    --corp-navy-text:     #ffffff;

    /* === Tokens semânticos polidos === */
    /* Mantemos os --color-* existentes do style.css mas afinamos sombras */
    --shadow-corp-xs:  0 1px 1.5px rgba(15, 23, 42, 0.04);
    --shadow-corp-sm:  0 1px 2px rgba(15, 23, 42, 0.05),
                       0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-corp-md:  0 2px 4px rgba(15, 23, 42, 0.05),
                       0 4px 8px rgba(15, 23, 42, 0.06);
    --shadow-corp-lg:  0 8px 16px rgba(15, 23, 42, 0.07),
                       0 4px 8px rgba(15, 23, 42, 0.04);
    --shadow-corp-xl:  0 20px 32px rgba(15, 23, 42, 0.10),
                       0 8px 12px rgba(15, 23, 42, 0.05);

    /* Halo navy para focos importantes (uso em inputs principais) */
    --shadow-corp-focus-navy: 0 0 0 3px rgba(15, 42, 74, 0.18);

    /* === Refinos de superfície === */
    --surface-app-corp:   #dbe4f0;   /* fundo do app: slate-200 azulado SATURADO — separação visual real do navbar navy E do branco dos cards. Antes #eef2f8 era percebido como "branco" contra o navbar navy, criando ilusão de "faixa branca". */
    --surface-elevated:   #ffffff;

    /* Sobrescreve a superfície do app para tom corporativo */
    --surface-app: var(--surface-app-corp);
    --bs-body-bg: var(--surface-app-corp);
}

/* ====================================================== TIPOGRAFIA REFINADA */
body {
    /* Mantém Inter, mas habilita variações OpenType mais elegantes */
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01', 'ss03';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* H1/H2 com tracking um pouco mais apertado para parecer mais "corporate" */
h1, .h1 {
    font-weight: 700;
    letter-spacing: -0.028em;
    color: var(--slate-900);
}
h2, .h2 {
    font-weight: 700;
    letter-spacing: -0.024em;
    color: var(--slate-900);
}
h3, .h3, h4, .h4, h5, .h5 {
    color: var(--slate-800);
    letter-spacing: -0.018em;
}

/* Texto de corpo: cinza um pouco mais escuro / contraste AA */
p { color: var(--slate-600); }

/* ============================================================ NAVBAR NAVY */
/*
 * A navbar agora é navy escuro (identidade "corporate banking").
 * Sobreescreve a navbar branca legada do style.css. Mantém estrutura e
 * comportamento — só muda visual.
 */
.navbar,
.navbar.bg-white,
.navbar.navbar-light,
nav.navbar.navbar-expand-lg {
    background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%) !important;
    background-color: var(--navy-900) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18), 0 2px 8px rgba(15, 42, 74, 0.18) !important;
    backdrop-filter: none;
    padding: 10px 8px !important;
}

.navbar .navbar-brand {
    color: #ffffff !important;
    font-weight: 600;
    letter-spacing: -0.018em;
    padding: 4px 10px !important;
}
.navbar .navbar-brand:hover { background: rgba(255, 255, 255, 0.07); }
.navbar .navbar-brand img {
    height: 48px;
    width: auto;
    filter: brightness(1.04) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.navbar .navbar-brand span,
.navbar .navbar-brand .fw-bold,
.navbar .navbar-brand .text-primary {
    color: #ffffff !important;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.014em;
}
.navbar .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

/* Itens de menu da navbar — texto claro (anula navbar-light Bootstrap) */
.navbar,
.navbar.navbar-light {
    --bs-navbar-color: rgba(255, 255, 255, 0.78);
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #ffffff;
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: #ffffff;
}
.navbar .nav-link,
.navbar.navbar-light .nav-link {
    color: rgba(255, 255, 255, 0.78) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: color 140ms ease, background 140ms ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}
.navbar .nav-link.active::after {
    background: var(--brand-400, #34d399) !important;
    bottom: -10px !important;
}
.navbar .nav-link i {
    opacity: 0.85;
    color: inherit;
}

/* User chip — escurece para combinar com navbar navy */
.navbar .user-chip {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}
.navbar .user-chip:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}
.navbar .user-chip .avatar {
    background: linear-gradient(135deg, #34d399 0%, #0d9488 100%);
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10);
}
.navbar .user-chip .text-muted,
.navbar .user-chip i { color: rgba(255, 255, 255, 0.7) !important; }

/* Toggler em mobile */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15) !important; }

/* Navbar dropdown menus (mantém branco/limpo, igual ao estilo padrão) */
.navbar .dropdown-menu {
    margin-top: 6px !important;
    border: 1px solid var(--slate-200);
    box-shadow: var(--shadow-corp-lg);
}

/* Compensa a "active::after" da navbar — agora a borda navy é embaixo */
@media (max-width: 991.98px) {
    .navbar {
        padding: 8px 8px !important;
    }
    .navbar .navbar-nav { gap: 2px; }
    .navbar .dropdown-menu { background: var(--surface-elevated); }
}

/* ============================================================= CARDS POLIDOS */
.card {
    border: 1px solid var(--slate-200) !important;
    box-shadow: var(--shadow-corp-xs) !important;
    border-radius: 12px !important;
    background: var(--surface-elevated);
}
.card:hover { box-shadow: var(--shadow-corp-sm) !important; }

.card-header {
    border-bottom: 1px solid var(--slate-200);
    background: linear-gradient(180deg, #ffffff 0%, var(--slate-50) 100%) !important;
}

/* card.shadow-sm e card.border-0 — visual unificado */
.card.shadow-sm { box-shadow: var(--shadow-corp-sm) !important; }
.card.border-0  { border: 1px solid var(--slate-200) !important; }

/* "Premium" KPI card pattern — para destacar números importantes */
.kpi-card {
    position: relative;
    overflow: hidden;
}
.kpi-card__value {
    font-feature-settings: 'tnum', 'ss01';
}

/* Border-start accent (mantém compatibilidade com cards legados em dashboard) */
.card.border-start.border-3,
.card.border-start.border-4 { border-left-width: 3px !important; }
.card.border-top.border-3,
.card.border-top.border-4 { border-top-width: 3px !important; }

/* ===================================================== MODULE CARDS (home) */
.module-card {
    display: block;
    background: var(--surface-elevated);
    border: 1px solid var(--slate-200);
    border-radius: 14px;
    box-shadow: var(--shadow-corp-xs);
    color: inherit;
    text-decoration: none;
    transition: border-color 180ms ease,
                box-shadow 180ms ease,
                transform 180ms ease;
    overflow: hidden;
    position: relative;
}
.module-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--brand-500, #10b981) 0%,
        var(--brand-600, #059669) 50%,
        var(--navy-700) 100%);
    opacity: 0;
    transition: opacity 180ms ease;
}
.module-card:hover {
    border-color: var(--brand-400, #34d399);
    box-shadow: var(--shadow-corp-lg);
    transform: translateY(-2px);
    color: inherit;
}
.module-card:hover::before { opacity: 1; }
.module-card .card-title {
    font-weight: 600;
    color: var(--slate-900);
    letter-spacing: -0.014em;
}
.module-card .card-text { color: var(--slate-500); }

.module-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

/* Garante que as classes utilitárias bg-X-subtle de Bootstrap 5.3 sigam o tom */
.bg-primary-subtle  { background-color: #e6f6f0 !important; }
.bg-success-subtle  { background-color: #e6f6f0 !important; }
.bg-warning-subtle  { background-color: #fef3c7 !important; }
.bg-danger-subtle   { background-color: #fee2e2 !important; }
.bg-info-subtle     { background-color: #e0f2fe !important; }
.bg-secondary-subtle{ background-color: var(--slate-100) !important; }

.text-primary-emphasis { color: var(--brand-700, #047857) !important; }
.text-success-emphasis { color: var(--brand-700, #047857) !important; }
.text-warning-emphasis { color: #b45309 !important; }
.text-danger-emphasis  { color: #b91c1c !important; }
.text-info-emphasis    { color: #075985 !important; }
.text-secondary-emphasis { color: var(--slate-700) !important; }

/* ============================================================= PAGE HEADER */
.page-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--slate-200);
}
.page-header__title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--slate-900);
    line-height: 1.2;
}
.page-header__title i {
    /* Ícones do título: caixa colorida sutil ao invés de só ícone solto */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--brand-50, #ecfdf5), var(--brand-100, #d1fae5));
    color: var(--brand-700, #047857);
    border-radius: 10px;
    font-size: 1.05rem;
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.18);
    margin-right: 6px;
}
.page-header__title i.text-primary,
.page-header__title i.text-success {
    background: linear-gradient(135deg, var(--brand-50, #ecfdf5), var(--brand-100, #d1fae5));
    color: var(--brand-700, #047857);
}
.page-header__title i.text-danger {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #b91c1c;
}
.page-header__title i.text-warning {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #b45309;
}
.page-header__title i.text-info {
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    color: #075985;
}
.page-header__subtitle {
    font-size: 0.875rem;
    color: var(--slate-500);
    margin-top: 4px;
    font-weight: 400;
}

/* ============================================================= BREADCRUMB */
.breadcrumb-trail {
    font-size: 0.8125rem;
    color: var(--slate-500);
    margin-bottom: 12px;
    align-items: center;
}
.breadcrumb-trail a {
    color: var(--slate-500);
    font-weight: 500;
    transition: color 120ms ease;
}
.breadcrumb-trail a:hover { color: var(--brand-700, #047857); }
.breadcrumb-trail__sep { color: var(--slate-300); }

/* ============================================================= BOTÕES NAVY */
/*
 * Botões "navy" — variante institucional (opcional). Por padrão, a paleta
 * primary continua sendo o verde Deluz.
 */
.btn-navy {
    background-color: var(--navy-900);
    border-color: var(--navy-900);
    color: #ffffff;
    box-shadow: var(--shadow-corp-xs);
}
.btn-navy:hover, .btn-navy:focus {
    background-color: var(--navy-800);
    border-color: var(--navy-800);
    color: #ffffff;
}
.btn-outline-navy {
    background: transparent;
    border-color: var(--navy-300);
    color: var(--navy-800);
}
.btn-outline-navy:hover {
    background-color: var(--navy-50);
    border-color: var(--navy-400);
    color: var(--navy-900);
}

/* ============================================================ STATUS BADGES */
/* Padronização extra de badges (Bootstrap 5.3 estilo soft) */
.badge.bg-secondary-subtle { background: var(--slate-100) !important; color: var(--slate-700) !important; border: 1px solid var(--slate-200); }

/* ===================================================== TABELAS POLIDAS */
.table > thead th {
    background: var(--slate-50) !important;
    color: var(--slate-500) !important;
    border-bottom: 1px solid var(--slate-200) !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--slate-50) !important;
}

/* Tabelas dentro de card — sem borda esquerda/direita para alinhar com a borda do card */
.card > .card-body.p-0 > .table-responsive > .table,
.card > .table-responsive > .table {
    margin-bottom: 0;
}

/* ================================================================= FORMS */
.form-control, .form-select {
    border-color: var(--slate-300) !important;
    box-shadow: var(--shadow-corp-xs) !important;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-500, #10b981) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16) !important;
}
.form-label {
    color: var(--slate-700);
    font-weight: 500;
}

/* ================================================================ FOOTER */
.app-footer {
    border-top: 1px solid var(--slate-200);
    background: var(--surface-elevated);
    padding: 14px 0;
    margin-top: 48px;
    color: var(--slate-500);
    font-size: 0.75rem;
}
.app-footer a { color: var(--slate-600); font-weight: 500; }
.app-footer a:hover { color: var(--brand-700, #047857); }

/* ============================================================ ANIMATIONS */
.module-card, .card, .btn, .badge {
    transition-property: background-color, border-color, color, box-shadow, transform, opacity;
}

/* ============================================================ EMPTY STATE */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--slate-500);
}
.empty-state__icon {
    font-size: 3rem;
    color: var(--slate-300);
    margin-bottom: 12px;
    display: block;
}
.empty-state__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate-700);
    margin-bottom: 4px;
}
.empty-state__desc {
    font-size: 0.875rem;
    color: var(--slate-500);
}

/* ============================================================ HOME KPI ROW */
#home-kpis .kpi-mini {
    background: var(--surface-elevated);
    border: 1px solid var(--slate-200);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: var(--shadow-corp-xs);
    display: flex;
    align-items: center;
    gap: 12px;
}
#home-kpis .kpi-mini__icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
#home-kpis .kpi-mini__label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate-500);
    font-weight: 600;
}
#home-kpis .kpi-mini__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--slate-900);
    line-height: 1.2;
    font-feature-settings: 'tnum';
}

/* ============================================================ WELCOME HERO */
.welcome-hero {
    background:
        radial-gradient(ellipse 60% 80% at 0% 50%, rgba(16, 185, 129, 0.06), transparent 70%),
        radial-gradient(ellipse 60% 80% at 100% 50%, rgba(15, 42, 74, 0.04), transparent 70%),
        var(--surface-elevated);
    border: 1px solid var(--slate-200);
    border-radius: 16px;
    padding: 28px 32px;
    box-shadow: var(--shadow-corp-xs);
    margin-bottom: 24px;
}
.welcome-hero__title {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--slate-900);
    letter-spacing: -0.022em;
    margin-bottom: 4px;
}
.welcome-hero__subtitle {
    color: var(--slate-500);
    margin: 0;
    font-size: 0.9375rem;
}

/* ============================================================ SECTION-LABEL */
.section-label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================ PRINT-SAFETY */
@media print {
    .navbar { background: #ffffff !important; color: #000 !important; }
    .navbar .nav-link, .navbar .navbar-brand,
    .navbar .navbar-brand span { color: #000 !important; }
}

/* ============================================================ RESPONSIVO */
@media (max-width: 768px) {
    .page-header__title { font-size: 1.25rem; }
    .page-header__title i { width: 30px; height: 30px; font-size: 0.95rem; }
    .welcome-hero { padding: 20px 18px; }
    .welcome-hero__title { font-size: 1.375rem; }
    .module-icon { width: 42px; height: 42px; font-size: 19px; }
}

/* ============================================================================
 * APP BACKGROUND — Foto temática (torres de transmissão Deluz)
 * ============================================================================
 * Aplicado em TODO o sistema. Pra desativar em uma tela específica,
 * adicionar classe `no-app-bg` no body daquela página.
 * Camadas (de trás para frente):
 *   body::before  — imagem propriamente dita (com Ken Burns muito sutil)
 *   body::after   — overlay semi-transparente (legibilidade WCAG)
 *   conteúdo .container — fica acima de tudo (z-index: 1)
 * ========================================================================== */

body:not(.no-app-bg) {
    position: relative;
    /* Garante stacking context para os pseudo-elementos */
    isolation: isolate;
}

/* Camada 1: imagem de fundo (fixed para sensação de "palco estático") */
body:not(.no-app-bg)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: image-set(
        url("/static/img/capa-torres.webp") type("image/webp") 1x,
        url("/static/img/capa-torres@2x.webp") type("image/webp") 2x,
        url("/static/img/capa-torres-opt.jpg") type("image/jpeg") 1x
    );
    /* Fallback para navegadores sem image-set() */
    background-image: url("/static/img/capa-torres.webp");
    background-size: cover;
    background-position: center 35%;   /* terço-superior do céu vira "área de respiro" */
    background-repeat: no-repeat;
    /* Estado inicial da animação de entrada (fade + zoom suave) */
    opacity: 0;
    transform: scale(1.04);
    animation:
        app-bg-enter 1400ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards,
        app-bg-kenburns 48s ease-in-out 1600ms infinite alternate;
    will-change: opacity, transform;
}

/* Camada 2: overlay que "lava" a imagem para garantir legibilidade.
   Light: lava com branco/cinza-azulado (foto vira textura tonal mais presente).
   Dark: lava com navy profundo (sobra um glow âmbar do pôr-do-sol).
   AJUSTE 2026-05: opacidade do overlay REDUZIDA ~10pp em ambos os temas
   (a pedido do Edson) — imagem agora mostra ~28-32%, antes 15-22%. */
body:not(.no-app-bg)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Light mode default — casa com --bg-app #dbe4f0 (RGB 219,228,240) */
    background:
        linear-gradient(180deg,
            rgba(219, 228, 240, 0.68) 0%,
            rgba(219, 228, 240, 0.78) 40%,
            rgba(219, 228, 240, 0.86) 100%);
}

/* Dark mode — overlay navy com leve transparência para deixar o pôr-do-sol "respirar" */
html[data-bs-theme="dark"] body:not(.no-app-bg)::after {
    background:
        linear-gradient(180deg,
            rgba(11, 18, 32, 0.72) 0%,
            rgba(11, 18, 32, 0.80) 45%,
            rgba(11, 18, 32, 0.88) 100%);
}

/* Garante que main/footer fiquem ACIMA das camadas de fundo (pseudo-elementos
   com z-index negativo) mas SEM tocar o nav — o sticky-top do Bootstrap tem
   z-index 1020 nativo, e sobrescrevê-lo quebra o stacking dos dropdowns
   (que ficam ATRÁS do conteúdo) + esconde o background navy do navbar.
   IMPORTANTE: NÃO usar `z-index: 0` aqui — isso cria stacking context próprio
   no <main>, e modais Bootstrap definidos dentro de {% block content %}
   ficam PRESOS nesse contexto (z-index 1055 vira relativo ao main, que está
   em z-index auto/0 do body). O `.modal-backdrop` é injetado pelo Bootstrap
   como filho do <body>, fora do main — então o backdrop escapa do main, mas
   o modal não. Resultado: modal aparece "transparente"/sem backdrop.
   Pseudo-elementos com z-index NEGATIVO já ficam atrás de conteúdo com
   z-index auto por padrão; não é necessário forçar z-index 0 aqui. */
body:not(.no-app-bg) > main,
body:not(.no-app-bg) > footer {
    position: relative;
}

/* HERO da home: leve translucidez + halo */
body:not(.no-app-bg) .welcome-hero {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background:
        radial-gradient(ellipse 60% 80% at 0% 50%, rgba(16, 185, 129, 0.06), transparent 70%),
        radial-gradient(ellipse 60% 80% at 100% 50%, rgba(15, 42, 74, 0.04), transparent 70%),
        rgba(255, 255, 255, 0.92);
}
html[data-bs-theme="dark"] body:not(.no-app-bg) .welcome-hero {
    background:
        radial-gradient(ellipse 60% 80% at 0% 50%, rgba(16, 185, 129, 0.10), transparent 70%),
        radial-gradient(ellipse 60% 80% at 100% 50%, rgba(15, 42, 74, 0.18), transparent 70%),
        rgba(15, 23, 42, 0.78);
    border-color: rgba(148, 163, 184, 0.18);
}

/* Cards da home: leve translucidez */
body:not(.no-app-bg) .module-card {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, 0.94);
}
html[data-bs-theme="dark"] body:not(.no-app-bg) .module-card {
    background: rgba(30, 41, 59, 0.86);
    border-color: rgba(148, 163, 184, 0.16);
}

body:not(.no-app-bg) #home-kpis .kpi-mini {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, 0.92);
}
html[data-bs-theme="dark"] body:not(.no-app-bg) #home-kpis .kpi-mini {
    background: rgba(30, 41, 59, 0.84);
    border-color: rgba(148, 163, 184, 0.16);
}

/* Animação A: Fade-in com micro zoom-out (entrada) */
@keyframes app-bg-enter {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1.0); }
}

/* Animação B: Ken Burns muito lento (loop, imperceptível, "vida" no fundo)
   Pan + zoom sutilíssimo de 1.00 → 1.03 em 48s */
@keyframes app-bg-kenburns {
    0%   { transform: scale(1.0)  translate3d(0, 0, 0); }
    100% { transform: scale(1.03) translate3d(-1.2%, -0.6%, 0); }
}

/* MOBILE: desliga parallax fixed (causa jank em iOS) e o Ken Burns (economia
   de bateria/CPU). Mantém apenas fade-in inicial. */
@media (max-width: 767.98px) {
    body:not(.no-app-bg)::before {
        position: absolute;
        animation: app-bg-enter 1200ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards;
        /* Em mobile, fixar a 100vh de altura para cobrir o viewport visível */
        height: 100vh;
    }
}

/* ACESSIBILIDADE: respeita "Reduzir movimento" do sistema operacional.
   - Sem fade-in (imagem entra direto opaca)
   - Sem Ken Burns (loop infinito incomoda usuários sensíveis)
   - Mantém overlay (a parte visual estática segue intacta) */
@media (prefers-reduced-motion: reduce) {
    body:not(.no-app-bg)::before {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* NO-APP-BG — telas operacionais (sem imagem temática de fundo).
   A "faixa branca acima do navbar" que aparecia aqui NÃO era de CSS — era um
   BOM (U+FEFF) no início do head_extra desses templates, que o parser HTML
   movia pro topo do <body> como nó de texto (~21px). Removido dos templates.
   Nenhuma regra de CSS é necessária — o conteúdo usa o padding natural (py-4). */