body:not(.tema-claro) #tema-claro-styles {
    display: none !important;
}

body.tema-claro {
    --cor-fundo-principal: #f8f9fa;
    --cor-fundo-card: #ffffff;
    --cor-fundo-hover: #e9ecef;
    --cor-texto-principal: #212529;
    --cor-texto-secundario: #6c757d;
    --cor-primaria-cecam: #007bff;
    --cor-primaria-hover: #0056cc;
    --cor-sucesso: #198754;
    --cor-alerta: #ffc107;
    --cor-erro: #dc3545;
    --cor-separador: #dee2e6;
    --cor-borda: #ced4da;
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 6px 25px rgba(0, 123, 255, 0.15);
}

body.tema-claro {
    background-color: var(--cor-fundo-principal) !important;
    color: var(--cor-texto-principal) !important;
}

body.tema-claro {
    background-image: url(../img/Hero-Section-Claro.png);
    background-size: cover;
    background-repeat: repeat-x;
}

    body.tema-claro .header-cliente {
        background: rgba(255, 255, 255, 0.95) !important;
        border-bottom: 1px solid var(--cor-separador);
    }

    body.tema-claro .tituloPrincipal {
        background: linear-gradient(135deg, var(--cor-texto-principal) 0%, var(--cor-primaria-cecam) 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }

    body.tema-claro .logo-escuro {
        display: none;
    }

    body.tema-claro .logo-claro {
        display: block;
        background: rgba(0, 0, 0, 0.05);
    }

    body.tema-claro .login-card,
    body.tema-claro .welcome-card,
    body.tema-claro .tab-content-card,
    body.tema-claro .filter-section,
    body.tema-claro .form-password-change,
    body.tema-claro .sidebar-menu {
        background: var(--cor-fundo-card) !important;
        border: 1px solid var(--cor-separador) !important;
        box-shadow: var(--shadow-card) !important;
    }

    body.tema-claro .form-input,
    body.tema-claro .form-select,
    body.tema-claro .form-textarea {
        background: var(--cor-fundo-card) !important;
        border: 2px solid var(--cor-borda) !important;
        color: var(--cor-texto-principal) !important;
    }

    body.tema-claro .footer-cliente {
        background: rgba(255, 255, 255, 0.95) !important;
        border-top: 1px solid var(--cor-separador);
    }

body.tema-claro .dx-input-cecam.dxeBase,
body.tema-claro .dx-input-cecam.dxeButtonEditSys,
body.tema-claro .dx-input-cecam .dxeButtonEditSys {
    background: var(--cor-fundo-card) !important;
    border-color: var(--cor-borda) !important;
    color: var(--cor-texto-principal) !important;
}

body.tema-claro .dx-input-cecam .dxeEditArea,
body.tema-claro .dx-input-cecam .dxeEditAreaSys {
    background: transparent !important;
    color: var(--cor-texto-principal) !important;
}

body.tema-claro .dx-input-cecam input[type="text"] {
    color: var(--cor-texto-principal) !important;
}

body.tema-claro .dx-input-cecam td.dxeButtonEditButton {
    border-left: 1px solid var(--cor-separador) !important;
}

body.tema-claro .dx-input-cecam.dxeButtonEditSys:hover,
body.tema-claro .dx-input-cecam .dxeButtonEditSys:hover {
    border-color: var(--cor-primaria-cecam) !important;
    box-shadow: var(--shadow-hover) !important;
}

body.tema-claro .dx-input-cecam.dxeButtonEditSys.dxeFocused,
body.tema-claro .dx-input-cecam .dxeButtonEditSys.dxeFocused {
    border-color: var(--cor-primaria-cecam) !important;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.12) !important;
}